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() ?>&layout=button_count&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://nbbumnd0bj-flywheel.netdna-ssl.com/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!
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
Try this one : http://martinj.net/wordpress-plugins/facebook-like-button .
It’s good.
Doug, i’ve had good luck with this plugin: http://martinj.net/wordpress-plugins/facebook-like-button/
Thanks Jack! Not sure what I did, but I actually didn’t see the button show up when I used the plugin.
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.
Facebook Like Button and WordPress Integration@inspring.
Thanks for the post. There is an existing WP plugin that enables you to add the Like button and automatically adds the meta data.
http://wordpress.org/extend/plugins/open-graph-protocol-tools/
I’ve installed it on a few blogs and it works great.
Gary
Jack, thanks for sharing that one. I hadn’t seen that one, looks great. I’ll have to install it and check it out.
do you have any idea how to disable add comment feature from like button?
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.
I have a facebook fanpage for my site, and a like button for my website. Do I really need to have them separate for seo purposes?