[英]Facebook-Share with open graph custom Title, Image, Description not showing (Magento 2)
Im trying to get open graph sharing running in Magento 2. When sharing url looks like this: https://www.facebook.com/v6.0/dialog/share_open_graph?action_properties=%7B%22object%22%3A%7B%22og%3Aurl%22%3A%22http%3A%2F%2FXXXX.XXXX.XX%3A8005%2Fde%2Fmini-taschenschirm-filigrain.html%22%2C%22og%3Atitle%22%3A%22Test%20Titel%22%2C%22og%3Adescription%22%3A%22test%20description%22%2C%22og%3Aimage%3Aurl%22%3A%22http%3A%2F%2FXXX.XXXXX.XX%3A8005%2Fpub%2Fmedia%2Fcatalog%2Fproduct%2Fcache%2Faec5383cda2d6e7ccc1547d0d0cdcbe8%2Fs%2Fc%2Fschirm_black_1.jpg%3E%22%7D%7D&action_type=og.shares&app_id=1355337027998409&channel_url=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D46%23cb%3Df2d86ce06c7e8a4%26domain%3Dmage.intermall.de%26origin%3Dhttp%253A%252F%252FXXX.XXXX.XX%253A8005%252Ff37eea29d1c7654%26relation%3Dopener&display=popup&e2e=%7B%7D&fallback_redirect_uri=http%3A%2F%2FXXX.XXXX.XX%3A8005%2Fde%2Fmini-taschenschirm-filigrain.html%23&locale=en_US&next=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D46%23cb%3Df3e4e25677030d%26domain%3Dmage.intermall.de%26origin%3Dhttp%253A%252F%252FXXX.XXXX.XX%253A8005%252Ff37eea29d1c7654%26relation%3Dopener%26frame%3Df10ab084fc6bbf%26result%3D%2522xxRESULTTOKENxx%2522&sdk=joey&version=v6.0
我试图在 Magento 2 中运行开放图共享。当共享 url 看起来像这样: https://www.facebook.com/v6.0/dialog/share_open_graph?action_properties=%7B%22object%22%3A%7B%22og%3Aurl%22%3A%22http%3A%2F%2FXXXX.XXXX.XX%3A8005%2Fde%2Fmini-taschenschirm-filigrain.html%22%2C%22og%3Atitle%22%3A%22Test%20Titel%22%2C%22og%3Adescription%22%3A%22test%20description%22%2C%22og%3Aimage%3Aurl%22%3A%22http%3A%2F%2FXXX.XXXXX.XX%3A8005%2Fpub%2Fmedia%2Fcatalog%2Fproduct%2Fcache%2Faec5383cda2d6e7ccc1547d0d0cdcbe8%2Fs%2Fc%2Fschirm_black_1.jpg%3E%22%7D%7D&action_type=og.shares&app_id=1355337027998409&channel_url=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D46%23cb%3Df2d86ce06c7e8a4%26domain%3Dmage.intermall.de%26origin%3Dhttp%253A%252F%252FXXX.XXXX.XX%253A8005%252Ff37eea29d1c7654%26relation%3Dopener&display=popup&e2e=%7B%7D&fallback_redirect_uri=http%3A%2F%2FXXX.XXXX.XX%3A8005%2Fde%2Fmini-taschenschirm-filigrain.html%23&locale=en_US&next=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D46%23cb%3Df3e4e25677030d%26domain%3Dmage.intermall.de%26origin%3Dhttp%253A%252F%252FXXX.XXXX.XX%253A8005%252Ff37eea29d1c7654%26relation%3Dopener%26frame%3Df10ab084fc6bbf%26result%3D%2522xxRESULTTOKENxx%2522&sdk=joey&version=v6.0
: https://www.facebook.com/v6.0/dialog/share_open_graph?action_properties=%7B%22object%22%3A%7B%22og%3Aurl%22%3A%22http%3A%2F%2FXXXX.XXXX.XX%3A8005%2Fde%2Fmini-taschenschirm-filigrain.html%22%2C%22og%3Atitle%22%3A%22Test%20Titel%22%2C%22og%3Adescription%22%3A%22test%20description%22%2C%22og%3Aimage%3Aurl%22%3A%22http%3A%2F%2FXXX.XXXXX.XX%3A8005%2Fpub%2Fmedia%2Fcatalog%2Fproduct%2Fcache%2Faec5383cda2d6e7ccc1547d0d0cdcbe8%2Fs%2Fc%2Fschirm_black_1.jpg%3E%22%7D%7D&action_type=og.shares&app_id=1355337027998409&channel_url=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D46%23cb%3Df2d86ce06c7e8a4%26domain%3Dmage.intermall.de%26origin%3Dhttp%253A%252F%252FXXX.XXXX.XX%253A8005%252Ff37eea29d1c7654%26relation%3Dopener&display=popup&e2e=%7B%7D&fallback_redirect_uri=http%3A%2F%2FXXX.XXXX.XX%3A8005%2Fde%2Fmini-taschenschirm-filigrain.html%23&locale=en_US&next=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D46%23cb%3Df3e4e25677030d%26domain%3Dmage.intermall.de%26origin%3Dhttp%253A%252F%252FXXX.XXXX.XX%253A8005%252Ff37eea29d1c7654%26relation%3Dopener%26frame%3Df10ab084fc6bbf%26result%3D%2522xxRESULTTOKENxx%2522&sdk=joey&version=v6.0
7B%22object%22%3A%7B% https://www.facebook.com/v6.0/dialog/share_open_graph?action_properties=%7B%22object%22%3A%7B%22og%3Aurl%22%3A%22http%3A%2F%2FXXXX.XXXX.XX%3A8005%2Fde%2Fmini-taschenschirm-filigrain.html%22%2C%22og%3Atitle%22%3A%22Test%20Titel%22%2C%22og%3Adescription%22%3A%22test%20description%22%2C%22og%3Aimage%3Aurl%22%3A%22http%3A%2F%2FXXX.XXXXX.XX%3A8005%2Fpub%2Fmedia%2Fcatalog%2Fproduct%2Fcache%2Faec5383cda2d6e7ccc1547d0d0cdcbe8%2Fs%2Fc%2Fschirm_black_1.jpg%3E%22%7D%7D&action_type=og.shares&app_id=1355337027998409&channel_url=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D46%23cb%3Df2d86ce06c7e8a4%26domain%3Dmage.intermall.de%26origin%3Dhttp%253A%252F%252FXXX.XXXX.XX%253A8005%252Ff37eea29d1c7654%26relation%3Dopener&display=popup&e2e=%7B%7D&fallback_redirect_uri=http%3A%2F%2FXXX.XXXX.XX%3A8005%2Fde%2Fmini-taschenschirm-filigrain.html%23&locale=en_US&next=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D46%23cb%3Df3e4e25677030d%26domain%3Dmage.intermall.de%26origin%3Dhttp%253A%252F%252FXXX.XXXX.XX%253A8005%252Ff37eea29d1c7654%26relation%3Dopener%26frame%3Df10ab084fc6bbf%26result%3D%2522xxRESULTTOKENxx%2522&sdk=joey&version=v6.0
https://www.facebook.com/v6.0/dialog/share_open_graph?action_properties=%7B%22object%22%3A%7B%22og%3Aurl%22%3A%22http%3A%2F%2FXXXX.XXXX.XX%3A8005%2Fde%2Fmini-taschenschirm-filigrain.html%22%2C%22og%3Atitle%22%3A%22Test%20Titel%22%2C%22og%3Adescription%22%3A%22test%20description%22%2C%22og%3Aimage%3Aurl%22%3A%22http%3A%2F%2FXXX.XXXXX.XX%3A8005%2Fpub%2Fmedia%2Fcatalog%2Fproduct%2Fcache%2Faec5383cda2d6e7ccc1547d0d0cdcbe8%2Fs%2Fc%2Fschirm_black_1.jpg%3E%22%7D%7D&action_type=og.shares&app_id=1355337027998409&channel_url=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D46%23cb%3Df2d86ce06c7e8a4%26domain%3Dmage.intermall.de%26origin%3Dhttp%253A%252F%252FXXX.XXXX.XX%253A8005%252Ff37eea29d1c7654%26relation%3Dopener&display=popup&e2e=%7B%7D&fallback_redirect_uri=http%3A%2F%2FXXX.XXXX.XX%3A8005%2Fde%2Fmini-taschenschirm-filigrain.html%23&locale=en_US&next=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D46%23cb%3Df3e4e25677030d%26domain%3Dmage.intermall.de%26origin%3Dhttp%253A%252F%252FXXX.XXXX.XX%253A8005%252Ff37eea29d1c7654%26relation%3Dopener%26frame%3Df10ab084fc6bbf%26result%3D%2522xxRESULTTOKENxx%2522&sdk=joey&version=v6.0
My Function looks like this:我的功能如下所示:
define([
'jquery',
'underscore'
], function ($, _) {
'use strict';
$.widget('intersales.shareFB', {
options: {
url: null,
quote: null,
img: null
},
_create: function(){
var self = this;
self._bindSubmit();
},
_bindSubmit: function () {
var self = this;
$(this.element).click(function(e){
e.preventDefault();
self._share();
});
},
_share: function(){
console.log('sharing url' + ' ' + this.options.url);
console.log('sharing img' + ' ' + this.options.img);
var self = this;
FB.ui({
method: 'share_open_graph',
action_type: 'og.shares',
action_properties: JSON.stringify({
object: {
'og:url': this.options.url,
'og:title': 'Test Titel',
'og:description': 'test description',
'og:image:url': this.options.img
}
})
}, function(response){
if (response && !response.error_message) {
// then get post content
alert('successfully posted. Status id : '+response.post_id);
} else {
console.log('Something went error.');
}
});
}
}
);
return $.intersales.shareFB;
});
Fun thing is, when shared the link is correct but it doesnt show the image, the title or the description.有趣的是,共享时链接是正确的,但它不显示图像、标题或描述。 I kinda dont want to set the oh tags in page, because its magento and i dont want to override the exsisting templates.我有点不想在页面中设置 oh 标签,因为它是 magento,我不想覆盖现有的模板。
Im kinda new to magento and want/need to write a module, that enables social-media sharing in product detail page.我对 magento 有点陌生,想要/需要编写一个模块,以便在产品详细信息页面中实现社交媒体共享。 My goal is to do that with twitter and facebook.我的目标是通过 twitter 和 facebook 做到这一点。 I started doing that for facebook but its kinda too complicated.我开始为 facebook 做这件事,但它有点太复杂了。 All i want is to share the product with a custom text, title and the product image (maybe hastags) Can anyone get me to the right path?我想要的只是用自定义文本、标题和产品图片(可能是标签)分享产品,任何人都可以让我走上正确的道路吗?
Those parameters do not work for dynamic OG tags anymore, they were just a workaround earlier.这些参数不再适用于动态 OG 标签,它们只是之前的一种解决方法。 The only way to change OG tags for sharing is to change them in he original page source.更改OG标签以进行共享的唯一方法是在原始页面源中更改它们。 Facebook will pick them up automatically. Facebook 会自动提取它们。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.