Facebook – Like Button Shows Same Like on Tumblr

facebookfacebook-liketumblr

I got a problem with my Tumblr blog. I implemented the Facebook like button but for some reason it's showing the same likes on all posts. And yes, I'm using {Permalink} as the URL.

<iframe src="//www.facebook.com/plugins/like.php?href={Permalink}&amp;send=false&amp;layout=button_count&amp;width=100&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=21&amp;appId=431993306908765" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:85px; height:21px; float:left; margin-left:30px;" allowTransparency="true"></iframe>

I also tried the HTML5 version, with the same results.

Here's a demo site: http://testmycode.tumblr.com/

As you can see, liking one of the posts and then reloading the page shows the same number on all posts. But if you inspect the elements it clearly shows that each post's like button has a unique URL. I also use {Permalink} on Facebook’s comment box and it works fine dynamically.

Another thing is that when I edit the code in Tumblr, there's a preview page with another site, and the likes there work fine. Each post has a different likes amount. I even tried liking the preview site's post and it worked dynamically. However, when going live with my own site it doesn’t work.

Best Answer

All those links point to http://missedit.tumblr.com/ in the og:url meta data of each page. You need to set the og:url to the permalink

So something like

<meta property="og:url" content="{Permalink}">