How To Fix Facebook Like Button (fb_xd_fragment) Problem Of Your Blog And Website

Hi! Everyone, hope you all are fine.
Today in this post I will tell you how you can solve fb_xd_fragment problem. From more than a year many people are facing problem with fb_xd_fragment parameter, it is somewhat similar problem as once we had before, replytocom parameter problem for self hosted WordPress blog. Now fb_xd_fragment parameter is coming because of Facebook like button.

When someone clicks on like button on a webpage, that webpage link will get published on their wall. Now when one of their friend visit that link from Internet Explorer 7 (IE7 or below) web browser then Facebook add a parameter (?fb_xd_fragment) in that URL. E.g.: xyz.com/abc will become xyz.com/abc?fb_xd_fragment.

And when someone visit that page with ?fb_xd_fragment parameter in it , Facebook like button script add a CSS code (style=”display: none; “) in HTML tag because which nothing display on web browser but content gets loaded on their web browser. And this is even getting indexed by search engines, which also cause duplicate content issue. Search for inurl:?fb_xd_fragment in Google and you will able to see so many such URL which have ?fb_xd_fragment parameter in it.

Solution

For Self Hosted WordPress Blog/Site

1. If you are a WordPress user as I suggested for replytocom, for this also I will suggest you to use plugins called Permalink Redirect and WordPress SEO Plugin both of them are by Yoast. In case if you already using any SEO plugin in your WordPress blog then you can use Permalink Redirect. If you are not using any (or want to want to change your) SEO plugin then you can use WordPress SEO Plugin.
2. Add the below code in footer.php of you theme just before closing body tag (</body>).

<script>document.getElementsByTagName('html')[0].style.display='block';</script>

2^nd step is needed because if you write an article about the same on your blog then you will see that the content is not appearing because if you add fb_xd_fragment in your URL then also Like button will add display: none CSS code in HTML tag or remove that text from your URL. I got to know about this after I posted this article on my blog.

For Blogger.com Blog

1. Go to Blogger.com, login into your account
2. Now go to Design –> Edit HTML
3. Now search for </body> (Press F3 to bring browser search box)
4. Add the below code just before closing body tag and SAVE TEMPLATE button

<script>document.getElementsByTagName('html')[0].style.display='block';</script>

This method will only help you from blank page problem, not with search engine as because Blogger don’t allow you to edited robots.txt file.

For Static Website

1. Add the below code in every page just before closing body tag (</body>).

<script>document.getElementsByTagName('html')[0].style.display='block';</script>

2. In robots.txt file add below line

Disallow: *?*

1^st step will solve your blank page problem and 2^nd step will solve your search engine problem.

To conform if it’s working or not, search using site: with your website URL (note: – it will take time to effect, because search engine need to re-crawl your full website again) then inurl:?fb_xd_fragment  E.g.: site:sjbn.co inurl:?fb_xd_fragment .

In reply to Avi Singh