13 Jan 2011

WordPress HOW TO: Add Facebook “Like” and “Share” buttons on index.php

You can find instructions everywhere on how to add these buttons to individual pages in WordPress, but when it comes to the index page (the main blog list page), just putting the code into the loop doesn’t work. You need to also specify the page URL for each post, or facebook will unhelpfully link to your main blog page every time. Here’s the code:

Sorry it spills out of the design, I just haven’t bothered to style this sort of code up yet. But you can still copy and paste it.

Facebook Like Button Code:

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink() ?>&layout=button_count&show_faces=false&width=80&action=like&font=lucida+grande&colorscheme=light" allowtransparency="true" style="border: medium none; overflow: hidden; width: 80px; height: 21px;" frameborder="0″ scrolling="no"></iframe>

Facebook Share Button Code:

<a name="fb_share" share_url="<?php the_permalink() ?>" type="button"></a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

Variations of these work if you want to use one of the fancy buttons, just be sure to specify the permalink parameter each time.


  • Adnan
    December 13, 2012 Reply

    thanks a lot dear, it works for me

  • michael
    May 10, 2012 Reply

    Great tip – anyone know of similar tricks for a ‘Tweet this’ and ‘Google +1’ buttons?

  • Omegakenshin
    June 13, 2011 Reply

    Excelent post, thanks for the info, just what I was looking for ^^

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.