带有share_open_graph方法的FB.ui仅显示小图像

时间:2017-07-13 22:12:26

标签: javascript facebook facebook-graph-api

我有这个代码在同一页面URL上创建多个共享按钮,但指定了自定义标题,描述和图像。

    // this loads the Facebook API
    (function (d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) { return; }
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

    window.fbAsyncInit = function () {
        var appId = '1937011929814387';
        FB.init({
            appId: appId,
            xfbml: true,
            version: 'v2.9'
        });
    };

    // FB Share with custom OG data.
    (function($) {

        $('.fb_share_btn').on('click', function (event) {
            event.preventDefault();
            event.stopPropagation();
            event.stopImmediatePropagation();

                // Dynamically gather and set the FB share data. 
                var FBDesc      = 'My custom description';
                var FBTitle     = 'My custom title';
                var FBLink      = 'http://example.com/my-page-link';
                var FBPic       = 'http://example.com/img/my-custom-image.jpg';

                // Open FB share popup
                FB.ui({
                    method: 'share_open_graph',
                    action_type: 'og.shares',
                    action_properties: JSON.stringify({
                        object: {
                            'og:url': FBLink,
                            'og:title': FBTitle,
                            'og:description': FBDesc,
                            'og:image': FBPic
                        }
                    })
                },
                function (response) {
                // Action after response
                })
        })

    })( jQuery );

对于图像,我遵循"共享最佳实践"这里描述的是FB dev docs

但是当与Facebook分享时,不要像这样大尺寸显示图像:

enter image description here

它出现在这样的小版本中:

enter image description here

我知道Facebook JavaScript SDK deprecating some parameters recently过去常常让我发挥作用,正如我所期待的那样。这就是为什么我使用share_open_graph for share dialogs使用最新的SDK版本(v2.9)和可用于此自定义共享的方法的原因。

这是否意味着从SDK v2.9 +开始,我们不能让分享图块显示更大的图像了?

1 个答案:

答案 0 :(得分:1)

我找到了解决方案。只需将action_type: 'og.shares'替换为action_type: 'og.likes'

...
FB.ui({
        method: 'share_open_graph',
        action_type: 'og.likes',
        action_properties: JSON.stringify({
            object: {
                'og:url': FBLink,
                'og:title': FBTitle,
                'og:description': FBDesc,
                'og:image': FBPic
            }
        })
    },
    function (response) {
    // Action after response
    }
);
...

要查看完整的文章,请执行以下操作:Dynamically change facebook open graph meta data javascript或仅结帐fully working example即可看到其实际效果。

小的缺点是,在共享对话框顶部和用户墙上的共享内容之类的句子是“ John Doe喜欢点滴的对象”