脸书评论插件答案

【问题标题】：Facebook comment plugin脸书评论插件
【发布时间】：2015-03-04 11:51:07
【问题描述】：

我试图将 facebook 评论插件添加到一个简单照片库的每张图片中，但是当我将它添加到循环中时它似乎不起作用，这是页面的代码：

` 附言

</head>


<body>

<div id="fb-root"></div>
<script>(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/fr_FR/sdk.js#xfbml=1&appId="id"&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


<?php
$folder = 'img/';
$filetype = '*.*';
$files = glob($folder.$filetype);
$count = count($files);

$sortedArray = array();
for ($i = 0; $i < $count; $i++) {
$sortedArray[date ('YmdHis', filemtime($files[$i]))] = $files[$i];

}

 krsort($sortedArray);
  echo '<table>';
 foreach ($sortedArray as &$filename) {
 #echo '<br>' . $filename;
 echo '<tr><td>';
 echo '<a name="'.$filename.'" href="#'.$filename.'"><img src="'.$filename.'" /></a>';
  echo substr($filename,strlen($folder),strpos($filename, '.')-strlen($folder));
 echo '</td></tr>';
 }
 echo '</table>';
 ?>
 </body>
</html>`

感谢您的宝贵时间！ :)

【问题讨论】：

标签： php html loops plugins facebook-php-sdk

【解决方案1】：

我没有看到任何用于在循环中添加类似按钮的代码。所以没有什么可以渲染的。

首先，您应该配置您的 Javascript SDK 并将其链接到您的 Facebook 页面/应用程序。

要配置 Javascript SDK，您需要添加类似

的内容

<script>
      window.fbAsyncInit = function() {
        FB.init({
          appId      : 'your-app-id',
          xfbml      : true,
          version    : 'v2.1'
        });
      };

      (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'));
    </script>

此代码详细 here，但会将您的网站链接到您的应用程序并配置 SDK 以在页面上查找 Facebook 社交插件。

然后你需要添加占位符元素让Javscript SDK解析和渲染，如下所示：

foreach ($sortedArray as &$filename) {
    #echo '<br>' . $filename;
    echo '<tr><td>';
    echo '<a name="'.$filename.'" href="#'.$filename.'"><img src="'.$filename.'" /></a>';
?>
<div class="fb-like" data-href="<?php echo $imageUrl; ?>" data-layout="button" data-action="like" data-show-faces="true" data-share="false"></div>
<?php
    echo substr($filename,strlen($folder),strpos($filename, '.')-strlen($folder));
    echo '</td></tr>';
}

这些 div 具有特殊的属性，SDK 可以识别并使用这些属性在正确的位置呈现类似的按钮。

您应该阅读文档here。

【讨论】：

我的页面的 php 代码显示了指定文件夹中的所有图像，我想做的是为每个图像添加一个赞按钮，但我认为这是不可能的，因为赞按钮需要一个每张图片的新链接，再次感谢您的时间:)
还有其他方法可以解决它，我之前已经构建了一个项目，为每个图像创建路线，但该路线所做的只是找到父画廊并显示它，将链接/喜欢的图像移动到列表的顶部。您也可以使用 HTML 锚点，即 www.example.com/gallery-1#image-1。看到这个another answer