2

on my website I have more than 200 pages and I want to add facebook comments feature to my website. I ran to this problem is that I have to change the code (the url) for each page. I do not want to change the code for every page. If you can see the second piece of code contain Url goes here can I include a method like location.href so that it can use the current url of the page. can I do this ? I do not care if it is php, javascript, or anything ealse.

Include the JavaScript SDK on your page once, ideally right after the opening <body> tag.

<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/en_US/all.js#xfbml=1&appId=324524777119";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Place the code for your plugin wherever you want the plugin to appear on your page.

<div class="fb-comments" data-href="Url Goes Here" data-num-posts="2" data-width="470"></div>

5 Answers 5

2

This can be used for getting the page url on the initial load.

<?php
function get_current_page()
{
   $page_url = (@$_SERVER["HTTPS"] == "on") ? "https://" : "http://";
   $page_url .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
   return $page_url;
}
?>

<div class="fb-comments" data-href="<?php echo get_current_page(); ?>" data-num-posts="2" data-width="470"></div>

If the url is changed after the initial page loads the FB.XFBML.parse() needs to be called to reload the comment box. This is good for ajax sites that do not do a full page reload when changing state.

1

You can use div and then dynamically create its contents with the innerHTML method in JavaScript where it will be your fb-comments tag. You can get the current page with document.location.href.

After you create the fb-comments tag dynamically and render it inside the div, you need to reparse its contents so the XFBML is interpreted. You can do it with the FB.XFBML.parse() method.

var mydiv = document.getElementById('myCommentsDiv');  
mydiv.innerHTML = 
   '<div class="fb-comments" data-href="' + document.location.href + '" data-num-posts="2" data-width="470"></fb:comments>';  
FB.XFBML.parse(mydiv);  
9
  • I tried the code you gave me, but it is showing me random comments from random people. Feb 10, 2012 at 10:33
  • Try "View source" in your browser to see the html that your code rendered.
    – DMCS
    Feb 10, 2012 at 10:43
  • Can you give us a demo/sample page url for us to see what you've got?
    – DMCS
    Feb 10, 2012 at 10:58
  • Ahhh. Your syntax is incorrect. You should put that code in normal javascript script tags. Ensure it runs in the document.fbAsyncInit. Also ensure you have the myCommentsDiv. Looks like you have quite a bit of learning to do. Take your time. You can get it.
    – DMCS
    Feb 10, 2012 at 11:15
  • what do you mean "Ensure it runs in the document.fbAsyncInit" ? any way this is the code I have now... Feb 10, 2012 at 11:20
1

A simple suggestion is:

<script type="text/javascript">
document.write('<div class="fb-comments" data-href="' + document.location.href + '"
 data-num-posts="2" data-width="470"></div>');   
</script>
0

Edit: found the solution here: Different Facebook comment box after each ajax call

You have to remove the box completely and put it back and call FB.XFBML.parse()

0

This one worked for me:

I defined the URL like this:

define('URL_FB','http://'.$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI']);

and then I echoed like this:

<div class="fb-comments" data-href="<?php echo URL_FB; ?>" data-width="470" data-num-posts="10" data-colorscheme="dark"></div>

Hope to be clear enough. :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.