Facebook comment plugin

Question

im trying to add facebook comment plugin to each picture of a simple photo gallery but it doesnt seem to work when i add it to the loop, here's the code of the page:

` Affichages

</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>`

thanks for your time ! :)

Scriptable · Answer 1 · 2015-01-06T19:03:59.110

I dont see any code for adding the like buttons in your loop. So there is nothing to render.

Firstly you should configure your Javascript SDK and link it to your Facebook page / application.

To configure the Javascript SDK you will need to add something like

<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>

This code is detailed here but links your website to your application and configures the SDK to look for Facebook social plugins on the page.

Then you need to add placeholder elements for the Javscript SDK to parse and render, like the below:

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>';
}

These divs have special attributes that the SDK will recognise and use to render the like buttons in the correct place.

You should read the documentation here.

the php code of my page shows all the images in a specified folder, what im trying to do is to to add a like button for every image but i see that's it impossible since the like button requires a new link for every image, thanks for your time again :) — Ferhat Boutaleb, Jan 06 '15 at 19:18
There are other ways to approach it, I've built a project before that creates routes for each image but all that route does is find the parent gallery and display that, moving the linked / liked image to the top of the list. You could possibly use HTML anchors too, ie www.example.com/gallery-1#image-1. See this [another answer](http://stackoverflow.com/questions/10570578/share-anchor-links) — Scriptable, Jan 06 '15 at 19:20

Facebook comment plugin

1 Answers1