Search code examples
urlbloggerfacebook-comments

Canonical URL formatting issue causes Facebook to interpret mobile URL as a different URL

I need to format this canonical URL and I cant figure out how! I've looked around the web and this site a lot and I've realized that I need a specific answer.

Problem Description:

  1. My BLOG's desktop view has (say) URL: www.x.com/page.html
  2. The same page in mobile view URL would be: www.x.com/page.html?m=1
  3. Its all good and dandy to this point, but the problem comes when I use facebook comments with this. It parses url based on this: www.x.com/page.html

So, it is identifying ?m=1 in the end of the first URL as an entirely different URL.

i.e

  • It is treating those two URL as different
  • Both of them are URL for the same page and I want them to be treated the same

Could anyone provide me a way to check if the loading page is ?m=1 and if it is ?m=1 then remove the ?m=1 when sending it to facebook?

I WOULD GREATLY APPRECIATE IT IF THE SOLUTION IS INLINE if it is not inline, oh well, I just need a solution right now.

Current code snippet used is this:

<fb:comments colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' height='110' width='560'/>

Let me break the question into small parts(incase someone is not a native speaker and wants to help/learn about this problem)

  • I want to detect if the loading page has ?m=1 in its URL or not. The canonical URL for this is data:post.url applied as expr:href='data:post.url'
  • If a ?m=1 is detected from data:post.URL , I want to remove it and send the remaining URL into expr:href= so that both my URLs are identified the same when my website displays facebook comments.

Click the image link below to look at this image please. This is the same URL but the comments are being sent to me as if they're from different URLs. I want them to appear under the same thread. This is it--> https://i.sstatic.net/M7fK2.png

I haven't found this particular answer anywhere and I am hopeful that some creative solutions will pop out in this site!

Solution

  • In your code

    <fb:comments colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' height='110' width='560'/>

    Use data:post.canonicalUrl instead of data:post.url

    This is the Blogger's layout tag for getting the Canonical URL of a blog post (This will always default to the blogspot.com domain, so there won't be ccTLD issues as well)