Adding Facebook plugin comments for dynamic products

Asked 25/1, 2012 at 12:7 Answered 19/12, 2012 at 12:3

I installed facebook comments on my website. My website is a dynamic website and pages are like this www.example.com/page?id=54, www.example.com/page?id=67.

If I post a comment in this page: www.site.com/page?id=54, it also appears in www.example.com/page?id=67. The comments are not unique for a page, but appear in every page

i saw the question : Facebook comments, for each page. The answer in this question is that the problem is because of the "?" sign. It seems that "?" sign in the URL make it broken for the Facebook plugin. And I need to change form of URl writing.

Because my website is 7 years old have incoming links to it, I don’t want to change the method of the URl writing .

is there another way to fix it?

Joanniejoao answered 25/1, 2012 at 12:7 Comment(0)

Firstly, copy comment div and script from Facebook, paste it to your product details page:

<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=114215202075258";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

and

<div class="fb-comments" data-href="http://example.com" data-width="470" data-num-posts="3"></div>

Finally, simply add this code:

<script>
    $(".fb-comments").attr("data-href", window.location.href);
</script>

Etrem answered 19/12, 2012 at 12:3 Comment(1)

Alon Steinberg why dont you accept this answer ? @Jhoon Bey : Thanx a lot you saved my day. – Caa 6/12, 2014 at 17:20

If you're using PHP this is the code which will request the URL of the current page and then link Facebook comments to it:

<?PHP    
$url = $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'];
echo "<div class='fb-comments' data-href='$url' data-num-posts='10' data-width='470'></div>";
?>

It works if your dynamic content has only one query string (for example ?product=). If it has more query strings for the same page, for example &sort= for sorting options, then it won't work properly as the Facebook comment which would appear on sorting option ascending wouldn't appear on the sorting option descending, for example.

You can solve this part by assigning a base URL for that product and then showing the FB comments for that URL on all dynamic pages with that product. For example, you're requesting FB comments for the page ?product=13&sort=asc&type=34 even if &sort and &type are different on that page.

Cetinje answered 28/1, 2012 at 12:25 Comment(0)

When inserting the widget to your page you add something similar to the following code:

<div class="fb-comments" data-href="http://example.com" data-num-posts="2" data-width="470"></div>

You need to replace http://example.com each time for the new page, once with ?id=54 and another time with ?id=67 for each relevant page.

Krauss answered 25/1, 2012 at 12:11 Comment(3)

I have about 2000 products on my wesite. i'm looking for dynamic solution. i used: <div class="fb-comments" data-href="winebar.co.il/product.asp?productid="&productid data-num-posts="10" data-width="470"></div> but there is a problem with the "?" sign – Joanniejoao 25/1, 2012 at 12:19

You can do it with server side code , I'm not sure which server language you're working with, you'll have to print the productId variable at the appropriate page. – Krauss 25/1, 2012 at 12:31

i did ir with productId variable. the problem is with ? sign. when i use it it doesnt work. please read also link: facebook.#3172622 – Joanniejoao 25/1, 2012 at 14:43

Hmm, I'm confused. You say the site is 7 years old and you cannot change it, but somehow you recently inserted the like plugin into an unchangeable web site. Now you want ways to fix this unchangeable website.

But, if you could change the website, here's what you're going to need to do:

Put in the required og meta tags into the <head> section of each web page as described on the like plugin documentation web site. You can do this programmatically via the query string parameter using your .asp coding skills.
Test/QA the OG meta tags are correctly specified at https://developers.facebook.com/tools/lint
Add the required html code for the plug in and ensure the href correctly and fully identified in the data-href parameter of the like plug
Test/QA the like button by viewing source on the page being sent down.

EDIT

Take a look at what Facebook sees for your url

http://developers.facebook.com/tools/debug/og/echo?q=http%3A%2F%2Fwww.winebar.co.il%2Fproduct.asp%3Fproductid%3D567%26CatCode%3D182

Notice the plugin code

BAD: data-href="http://winebar.co.il/product.asp?productid="

If should look like the URL in the user's browser bar:

GOOD: data-href="http://www.winebar.co.il/product.asp?productid=567&CatCode=182"

Roguery answered 25/1, 2012 at 16:0 Comment(1)

I implement the method and it works using changing the calling of the dynamic page: data-href="winebar.co.il/product.asp?productid="&productid The only problem that in every page the comments are the same. As also explained in this question: The answer in this question is that the problem is because of the "?" sign. It seems that "?" sign in the URL make it broken for the Facebook plugin. And I need to change form of URl writing. Because my website is 7 years old have incoming links to it, I don’t want to change the method of the URl writing – Joanniejoao 26/1, 2012 at 7:39

Recommended topics

Hot tags