Getting FB Comment Plugin to Sync

This is to address an issue with the Facebook Comment Plugin, wherein the comments made on a page using a desktop do not show up on the same page when accessed using a mobile tablet or smart phone, or vice-versa


Facebook Comment plugin is the comment box you can attach at the end of your blog, which allows users to login to their Facebook account and leave comments to the article (just like the one below this article).

We will briefly show how to add the plugin to our article and fix the issues that comes along with it. But if you already know how to place the plugin to your articles and would just need to get to the solution right away, click below to jump to the solution.





How to add the plugin

Here are the steps:
1. Click here to go to the FB developer's page. Open it in a new window so you can still proceed with the steps easily.

2. Enter the complete URL of the article or page where you want to put the comment plugin on

 3. Click on the Get Code button, and copy the code as shown below:

 If you are getting a message about reference to an entity which must end with the ";" delimiter, change all the "&" with "1&". In which case, the 1&version should be 1&version.

4. Paste this code on your blog's HTML right after the <body> tag.

5. Copy the second code as shown below:

The data-href here refers to the URL of your page. This is where the issue starts.

 

The Problem

The website's address or URL differs when accessed by a mobile. For example, the address www.example.com becomes mobile.example.com or www.example.com?m=1 (in the case of Blogger users) when accessed using a mobile device although the content of the page is the same.

The Facebook Comment plugin relies on the absolute URL of the page to display the comments. For example, when you make a comment on a website www.example.com/blog, Facebook Comment plugin "ties" that comment to the specific URL. In short, the comments made on www.example.com/blog will not show up on its mobile platform counterpart mobile.example.com/blog/.

The Solution

How to fix this? There are a lot of solutions that you can find online, but the solution I am sure works 100% of the time is this:

Replace the part of the web address that changes when you access the page across platforms with a tilde (~). For example, when your web address changes from www.example.com to mobile.example.com, the URL you can enter is ~.example.com. For Blogger users, the URL changes from www.example.com/myblog.html/ to www.example.com/myblog.html?m=1 which means, the URL would be www.example.com/myblog.html/~.

Notice that our URL here ends with (~).

 

Let us check the solution:

The URLs below are of the same page -- writing business letters. You will notice that the first one ends with the .html extension while the second one has m=1 after it. The m=1 means that it is a mobile device page.

You may try accessing this page:

or


and leave any comment you like (but please, make it at least a proper one). These are just the same pages though. Once done, open this mobile device page:


and see if the comment you made earlier is still there.