CODEWITHSUNDEEP
javascriptfacebook
Maan Sahir
Maan Sahir

Reputation: 369

change the url of facebook comments box according to the page?

On my website I have more than 100 pages, and now I want to add facebook comments box to each page. After inserting the page Url to facebook it gave me this code to add to my page, but I do not want to copy and past to each page then change the Url according to the webpage name. In the second code there is the acctual URL to the webpage can I replace it with

location.href

So that I do not have to change the URL. Is that even possible? How can I do that?

  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>

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

<div class="fb-comments" data-href="http://damnthisfunny.site40.net/1.html" data-num-posts="25" data-width="470"></div>

I tried this but its not working :

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

<div class="fb-comments" data-href="+location.href+" data-num-posts="25" data-width="470"></div>

</body>

Upvotes: 1

Views: 4701

Answers (3)

Anton Mitsev
Anton Mitsev

Reputation: 620

Thanks man (Enlil)! Here is my rework on the last idea, as I am using it only on client side:

<div id="fbc"></div>
<script>
    var elemDiv = document.getElementById("fbc");
    var markup = '';
    markup += '<div class="fb-comments" data-href="'+location.href+'" data-num-posts="5" data-width="682" style="margin-top:2em;"></div>';
    elemDiv.innerHTML = markup;
    FB.XFBML.parse(elemDiv);
</script>
<script type="text/javascript" src = "//connect.facebook.net/bg_BG/all.js#xfbml=1&appId=xxxxxxxxxx"></script>

Thousands thanks!

Upvotes: 1

Enlil Nibiru Annunaki
Enlil Nibiru Annunaki

Reputation: 21

I was able to solve this using a little javascript. Where I wanted the comments to appear I used the code:

`<div id="fbcomments"></div>
`<script>
`var elemDiv = document.getElementById("fbcomments");
`var markup = '';
`markup += '<fb:comments href="' + location.href + '"></fb:comments>';
`elemDiv.innerHTML = markup;
`FB.XFBML.parse(elemDiv);
`</script>

as opposed to the FB code:

`<div class="fb-comments" data-href="http://mysite.com/page" data-num-posts="20" data-width="538" data-colorscheme="dark"></div>

All is well as far as the comments posting and the code knowing what page they belong to. The only problem I'm running into is this: Whichever code I use from above, the link from the commenter's FB profile links back to the comment page with the same /?fb_comment_id= query string. If i use the FB code the comments will show, but if I use the javascript code, the comments will NOT show up?! I'm lost...

Upvotes: 2

DMCS
DMCS

Reputation: 31880

data-href="+location.href+" Your issue lies in this part of your code. Ensure you are using a valid fully qualified URL.

Upvotes: 1

Related Questions