FB 共享 SDK 不起作用 - 仅显示股票应用照片答案

【问题标题】：FB share SDK not working - only displays stock app photoFB 共享 SDK 不起作用 - 仅显示股票应用照片
【发布时间】：2016-07-10 19:47:05
【问题描述】：

我正在使用以下代码在 FB 上分享我的页面。 data-title、data-desc 和 data-image 不共享。当对话框链接弹出时，FB 只显示应用默认照片。分享时，href正确分享并显示应用默认照片。

代码在下面，我也在脚本底部粘贴了我的头（带有 og 标签）。那里有冲突吗？ FB 无法读取我的 php 标签吗？

感谢任何帮助。

html:

<li><div id="fb-root"></div>
<a class="fb_share" href="<?php echo JO_Request::getInstance()->getFullUrl(); ?>"  data-image="" data-title="<?php echo $this->mypage['postTitle']; ?>" data-desc="<?php echo $this->mypage['postDesc'] ? nl2br(substr($this->mypage['postDesc'], 0, 200)) . '...' : ''; ?>" data-width="450"><img src="https://www.mygoodness.com/date/myimage.png" alt="" width="20" height="20"></a></li>

脚本：

<script type="text/javascript">

    window.fbAsyncInit = function() {
        FB.init({
            appId: 'app id',
            secret: 'app secret',
            status: true,
            cookie: true,
            xfbml: true
        });
    };

    (function(d, debug)
    {var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement('script'); js.id = id; js.async = true;
        js.src = "//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js";
        ref.parentNode.insertBefore(js, ref);
    }(document, /*debug*/ false));

    function postToFeed(title, desc, url, image) {
        FB.XFBML.parse();
        var obj = {method: 'feed',link: url, picture: image,name: title,description: desc};
        function callback(response) {}
        FB.ui(obj, callback);
    }

    var fbShareBtn = document.querySelector('.fb_share');
    fbShareBtn.addEventListener('click', function(e) {
        e.preventDefault();
        var title = fbShareBtn.getAttribute('data-title'),
            desc = fbShareBtn.getAttribute('data-desc'),
            url = fbShareBtn.getAttribute('href'),
            image = fbShareBtn.getAttribute('data-image');
        postToFeed(title, desc, url, image);

        return false;
    });

</script>

头：

<head prefix="og:http://ogp.me/ns# fb:http://ogp.me/ns/fb#">

    <!-- Meta -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=echo,chrome=1">

    <meta property="fb:app_id" content="app id">
    <meta property="og:url" content="<?php echo JO_Request::getInstance()->getFullUrl(); ?>">
    <meta property="og:title" content="<?php echo $this->mypage['postTitle']; ?>">
    <meta property="og:image" content="<?php echo $this->baseUrl;?>myhome.png">
    <meta property="og:type" content="website">
    <meta property="og:description" content="<?php echo $this->mypage['postDesc'] ? nl2br(substr($this->mypage['postDesc'], 0, 200)) . '...' : ''; ?>">

</head>

【问题讨论】：

脚本代码必须是inner body，推荐fb
@RuiCosta 谢谢瑞。您的意思是在 --
是的，如果不工作，发布控制台日志错误的捕获
@RuiCosta 抱歉，这没用。并且没有控制台错误日志。分享有效，它只是分享了错误的东西。顺便说一句，href 正确共享。 data-title 和 data-desc 和 data-iimage 不共享。
等等，你的服务器是不是本地主机？

标签： javascript php facebook facebook-javascript-sdk share

【解决方案1】：

实际上您的标签已正确实施，问题是您设置在对话框中显示以共享的图像执行开放空间图中设置的限制。（最大限制-8mb）

可实现 web 的开放图形标签的捷克文文档。
Sharing Open Graph Webmaster Guide

您还可以使用此调试器检查您的链接以打开图形，我认为您将是最有用的。 Sharing Debugger

【讨论】：