, WordPress

Facebook Like Button and WordPress Integration

With the Facebook Like button launching, I thought I’d spend some time tonight and integrate it into my WordPress blog. I also integrated it on a Compendium client’s blog, too, tonight.

First step is pretty simple – just add the iframe code to your template pages (index and single). Since your index page can have multiple posts, it’s important to modify the button within your page loop so that the permanent link is properly appended.

<iframe src="http://www.facebook.com/plugins/like.php?href=
<?php the_permalink() ?>&amp;layout=button_count&amp;action=like" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:250px; height:px"></iframe>

I also adjusted the width and then did some CSS to float the button up next to the Twitter Retweet button. The reason why these tools are so great is that they don’t require any login, navigation, etc. You simply click the button and you’ve posted the status onto Facebook (or Twitter respectively).

Additionally, you can also put meta data in your blog’s header for Facebook to extract. Here’s how I’ve edited mine:

<?php if(is_single()) { ?>
<meta property="og:title" content="<?php wp_title('','true','right'); ?>"/>
<?php } else { ?>
<meta property="og:title" content="Practical Marketing Advice from Marketing Professionals"/>
<?php } ?>
<meta property="og:image" content="https://c.martech.zone/mtb_icon.png"/>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>"/>

Eventually, I’m hoping to see someone write a nice plugin to do this. I haven’t tested to see which way is better – the iframe approach or the Facebook JavaScript SDK method. If you’ve identified a nice plugin out there to take care of this, let me know!

13 Comments

  1. 1

    I’ve got a question for you, Bromance:

    2 nights ago I tried to play with my facebook like box (formerly the facebook fan widget) for my “how to publish a book of blues. hopefully” fan page and now it won’t load. It does what it’s doing on Mashable right now…or WAS doing earlier Saturday afternoon.

    Is it conflicting with Thesis? GRRRR

  2. 2
  3. 3
  4. 4
  5. 5

    There shouldn’t be any conflict at all – but it may take some major tweaking with CSS to locate the button where you need it. I had a heck of a hard time.

  6. 6
  7. 7
  8. 8

    Jack, thanks for sharing that one. I hadn’t seen that one, looks great. I’ll have to install it and check it out.

  9. 9
  10. 10

    But the code seems to be incomplete as I I have copied this code to mu wp page. I think I need to add some stuff to get it work on my page.

  11. 11

Leave a Reply