Question

我正在写一个网站，我将有几个页面（用户提交）。这些页面可以像http://www.mywebsite.com/?page=page1，http://www.mywebsite.com/?page=page2等那样访问。我希望每个页面都有一个类似fb的共享按钮（在加载内容之后），这样当他们点击时，它在他们的fb中发布特定页面（及其图像）。到目前为止，一切似乎都适合我，直到我遇到这个问题，这个问题最近两天都让我头晕目眩。一些论坛说开放图和fb-share都是错误的，但我仍然希望我的要求是全球性的，它必须有效。

虽然fb-like和fb-share在共享特定URL时工作正常，但它并没有选择正确的图像。我可以在标题中定义OG元标记，但是这些绑定会随着页面通过Ajax动态加载而发生变化。

我通过jQuery覆盖这些标签og：url和og：image（显示它们已更新），但我认为fb-share不会读取它们。（或者我如何测试？）

FB调试工具似乎没有多大帮助，因为我使用ajax方法，它没有显示更新的元标记，但显示了我的标题第一次定义的内容，所以它显然对我没什么帮助。如果我在标题中对我的值进行硬编码（不依赖于jquery来覆盖），我的两个页面都可以正常工作，其中包含正确的内容，计数和URL，确认缓存或这些标签或图像没有问题我使用。但当我通过java脚本覆盖所有内容时，似乎存在脱节，不知道在哪里。

据我所知这是使用jquery覆盖元标记的问题。此外，我认为fb-share在显示旁边的计数时也没有选择正确的URL。

简而言之，fb-share不会被新的url覆盖（根据我显示的page-id），因为它显示了我所有页面的相同计数（如/ share），并且它不会选择被覆盖的元数据-tag显示正确的图片。我硬编码的任何东西都适用于硬编码的页面。

我的index.php像这样运行（注意我已经掩盖了网站的详细信息和我的fb应用程序）..

<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noarchive"/>
<meta name="GOOGLEBOT" content="noarchive"/>
<meta property="fb:app_id" content="4126120410011204"/>
<meta property="fb:admins" content="fbuser1"/>
<meta property="fb:admins" content="fbuser2"/>
<meta property="og:title" content="MYWEBSITE | A website on cloud being tested..."/>
…

</head>

<script>
        $( document ).ready(function() {

           …

           var selProfID = $("#profileID").val();

           if (selfProfID ) { 
             showOneProf(selfProfID);
            }

           function showOneProf(uid) {
             ...
            $.ajax({
            type: "POST",
            url: action.php,
            data: {'pageid' : uid},

            success: function(results)
            {
..          
 $.each(eval(results), function(i,item){


        …
        $('head').append('<meta property="og:url" content="http://www.mywebsite.com/?page='+item.pageid+'" />');
        $('head').append('<meta property="og:image" content="http://www.mywebsite.com/uploads/'+item.image+'" />');
        var linkurl = "http://www.mywebsite.com/?page=page1";

           document.getElementById('fblike2').setAttribute('href', linkurl);
           document.getElementById("fbcomments1").setAttribute('href', linkurl);
           FB.XFBML.parse(document.getElementById('fbc'));
           $("#contents").append(results);
         });
        ..
        });

</script>   

<?php
..

$profid = $_GET['page'];
echo "<input type='hidden' id='profileID' value='$profid'><BR>";

..
<div id='contents'>
<div id="fbc"></div>
<script>
function loadfbComments(){
var elemDiv = document.getElementById("fbc");

    var likes = '<div id="fblike2" class="fb-like" data-href="http://www.mywebsite.com" data-layout="button" data-action="like" data-send="true" data-show-faces="true" data-share="true"></div>';
    var markup = '';
        markup += '<div id="fbcomments1" class="fb-comments" data-colorscheme="light" data-href="http://www.mywebsite.com" data-order-by="reverse" data-num-posts="10" data-width="682" style="margin-top:2em;"></div>';
        elemDiv.innerHTML = "<BR>" + likes + "<BR>" + markup;
        FB.XFBML.parse(elemDiv);
}
loadfbComments();

                </script>
                <script type="text/javascript" src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=09090909090909"></script>
..  
</div>
?>

如果您认为我在这里犯了任何愚蠢的错误，请帮忙。非常感谢。

PK

Answer 1

正如杰米在你的帖子评论中提到的，Facebook只是向你的网站发出请求并获取它找到的标题信息。 Javascript由您的浏览器执行，而不是由Facebook正在进行的简单请求执行。它只会检索静态元标记，而不是渲染标记。如果您想使您的共享图像动态化，您应该在服务器端执行此操作。

您可以设置如下内容：

<meta property="og:image" content="<?= $shareImage ?>" />

fb share不动态地采用og：image

1 个答案: