Facebook-Share 与开放图形自定义标题、图像、描述未显示（Magento 2）

Question

我试图在 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

我的功能如下所示：

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;
});

有趣的是，共享时链接是正确的，但它不显示图像、标题或描述。 我有点不想在页面中设置 oh 标签，因为它是 magento，我不想覆盖现有的模板。

我对 magento 有点陌生，想要/需要编写一个模块，以便在产品详细信息页面中实现社交媒体共享。 我的目标是通过 twitter 和 facebook 做到这一点。 我开始为 facebook 做这件事，但它有点太复杂了。 我想要的只是用自定义文本、标题和产品图片（可能是标签）分享产品，任何人都可以让我走上正确的道路吗？

Answer 1

这些参数不再适用于动态 OG 标签，它们只是之前的一种解决方法。 更改OG标签以进行共享的唯一方法是在原始页面源中更改它们。 Facebook 会自动提取它们。