Search code examples
facebookfacebook-graph-apifacebook-social-plugins

How to put multiple Facebook Like buttons with counter on same page

I have one page with multiple news items. Every item in the list must have own Like button with count.

Is it possible to put multiple Like buttons with count for each news on same page?

Multiple Facebook like button with count on the same page

Solution

  • Each like button code will have to have it's own unique url.

    refer to: http://developers.facebook.com/docs/reference/plugins/like/

    I use php to achieve this, by pulling all relative urls needed from a database, looping them and writing return to the data-href param in the html5 like button code.

    You can manually set these links or set up a dynamic system as i did.

    html5 button code.

    <div class="fb-like" data-href="'.$thepage[link1].'" data-send="false" data-layout="button_count" data-width="90" data-show-faces="false" data-font="tahoma" style="margin-left: auto; margin-right: auto; text-align: center;"></div>

<div class="fb-like" data-href="'.$thepage[link2].'" data-send="false" data-layout="button_count" data-width="90" data-show-faces="false" data-font="tahoma" style="margin-left: auto; margin-right: auto; text-align: center;"></div>

<div class="fb-like" data-href="'.$thepage[link3].'" data-send="false" data-layout="button_count" data-width="90" data-show-faces="false" data-font="tahoma" style="margin-left: auto; margin-right: auto; text-align: center;"></div>

    xfbml button

    <fb:like href="http://anotherfeed.com?link=1" send="true" width="450" show_faces="true"></fb:like>

<fb:like href="http://anotherfeed.com?link=2" send="true" width="450" show_faces="true"></fb:like>

<fb:like href="http://anotherfeed.com?link=3" send="true" width="450" show_faces="true"></fb:like>