我正在写一个网站，在那里我会有几个页面(用户提交)。这些页面的访问方式如下http://www.mywebsite.com/?page=page1，http://www.mywebsite.com/?page=page2等等，我想为每个页面(加载内容后)都有一个类似fb的共享按钮，这样当他们点击该按钮时，它会在他们的fb中发布特定页面(及其图像)。到目前为止，一切似乎对我来说都很顺利，直到最近两天我遇到了这个让我头疼的问题。一些论坛说开放图和fb共享有缺陷，但我仍然希望我的需求是全球性的，它必须有效。
虽然fb-like和fb-share可以很好地共享特定的URL，但它并没有选择正确的图像。我可以在标题中定义OG元标记，但随着页面通过Ajax动态加载，这些标记必然会发生变化。
我通过jQuery覆盖了这些标签og:url和og:image(这表明它们已经更新)，但我猜fb-share不会读取它们。(或者我该如何测试？)
FB调试器工具似乎没有太大帮助，因为我使用ajax方法，它不显示更新的元标签，而是第一次显示在我的头中定义的内容，所以它显然对我没有太大的帮助。如果我在头中硬编码我的值(不依赖jquery覆盖)，我的两个页面都可以单独使用正确的内容，计数和URL，确认缓存、这些标签或我使用的图像没有问题。但当我通过java脚本将它们全部覆盖时，似乎出现了断开连接的情况，不确定在哪里。
据我说，这是一个使用jquery覆盖元标签的问题。此外，我认为fb共享在显示旁边的计数时也没有选择正确的url。
简而言之，fb-share不会被新的url覆盖(根据我显示的页面id)，因为它为我的所有页面显示相同的计数(如/share)，并且它不会选择覆盖的元标签来显示正确的图片。任何我硬编码的东西，它只适用于硬编码的页面。
我的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-
正如Jamie在你帖子的评论中提到的，Facebook只是向你的网站发出请求，并获取它找到的标题信息。Javascript是由您的浏览器执行的，而不是由Facebook发出的简单请求执行的。它将只检索静态元标记，而不检索渲染的标记。当你想让你的共享图像动态时，你应该在服务器端这样做。
您可以设置以下内容：
<meta property="og:image" content="<?= $shareImage ?>" />