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!

How to Create a Dental Marketing Plan

A step-by-step guide to creating a successful and effective dental marketing plan. Download Now