Adding Facebook plugin comments for dynamic products

柔情痞子 提交于 2019-12-03 03:31:31

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>

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.

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.

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:

  1. 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.
  2. Test/QA the OG meta tags are correctly specified at https://developers.facebook.com/tools/lint
  3. 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
  4. 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"

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!