Single article separated into multiple pages makes Facebook Like button detect as completely separated articles

Question

I run a multiple author Wordpress platform where authors post articles where many of them are separated in several pages. The visitors can navigate the pages within the article by clicking on a Next button. This is various types of articles like galleries, lengthy articles, lists etc

I am sure you are all familiar with the Next button by now. The issue here is that the Facebook like button cannot detect that it is one article and treats it as completely separate pages.

This is the valid XHTML 1.0 code I use for the Like button:

<!--[if IE]>
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode("http://domain.com" . $_SERVER["REQUEST_URI"]); ?>%2F&amp;layout=button_count&amp;show_faces=true&amp;width=300&amp;action=like&amp;font&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border-style:none; overflow:hidden; width:200px; height:21px;" allowTransparency="true">
</iframe>
<![endif]-->
<!--[if !IE]>-->
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode("http://domain.com" . $_SERVER["REQUEST_URI"]); ?>%2F&amp;layout=button_count&amp;show_faces=true&amp;width=300&amp;action=like&amp;font&amp;colorscheme=light&amp;height=21" style="border-style:none; overflow:hidden; width:200px; height:21px;">
</iframe>
<!--<![endif]-->

The IE conditions are there so that it works correctly in IE8.

The URL of the articles are like this. The original first page is:

http://domain.com/title-of-the-article/

And the second page is:

http://domain.com/title-of-the-article/2/

And so on... How do I make it so that the Like button detects the second page as the first (original) page and avoid separating them as different? I have tried hunting down a solution on Google without any direct results, someone mentioned to change og:url meta tag on the 'sub' pages to all point at the main URL for the article...

Answer 1

You can explicitly set the 'like' URL. If you play with the form FaceBook provides you can see how that works.

<div class="fb-like" data-href="http://example.com" data-send="true" data-width="450" data-show-faces="true"></div>

If you don't set the URL the default is the current URL, so you will have multiple pages.

So, and this is the only WordPress part of this question, use the_permalink in that form.

<div class="fb-like" data-href="<?php the_permalink() ?>" data-send="true" data-width="450" data-show-faces="true"></div>