WordPress Facebook "Like" Button

by MIND

Apr
22

So there’s this guy that we work with from time to time; he’s one of those “uppity blogger” types. I think he does something with Search Engine Optimization too… but who knows what’s really behind that boss goatee. Apparently he “liked” Facebook’s popular … “Like” … system and wanted to grab that functionality for his own, somewhat questionable, devices. All kidding aside, the team and MIND was contacted to develop a WordPress Plugin that is THE “Like” button from facebook… now available on your blog – as of yesterdays announcement at the F8 conference from Facebook CEO Mark Zuckerberg. Using The Facebook Universal Like button a user can add the “Like” button to any post. When a visitor “Likes” your post it will show up on their Facebook page (after they login of course). You then get yet another non-substantial feather in your cap in the form of a thumbs up (+1)! WEEEEEEEE!!!

Instructions:

* Download the plugin (current version: 1.1).
* Unzip the compressed file to your wp-content/plugins folder.
* Browse to the Plugins page under wp-admin and activate the plugin.
* Setting the options: Browse to Settings->WP FB Like Button.
* Use your own CSS by referencing div ID “wp_fb_like_button” (note that this is only the container for the iframe)

Like, do you like it? We hope you do!

Thanks to Chicago SEO for helping us push the v1.0.2 release!

Related Posts:

MIND Development & Design Lancaster PA Web Design and Lancaster PA Web Development is a Web Design and Web Development Solution based in Lancaster PA. MIND Lancaster PA Graphic Design provides logo and branding services as well as Lancaster PA Internet Marketing and Lancaster PA Social Media services.

{ 39 comments… read them below or add one }

Zim April 22, 2010 at 10:04 pm

Version 1.0.2 is up :P

Reply

Carolyn Shelby April 22, 2010 at 10:19 pm

Works great :) Thanks for the extra tweaks!

Reply

Chad April 22, 2010 at 11:10 pm

Very cool! I love how it post right back to Facebook!

Reply

Phil Buckley April 23, 2010 at 2:28 am

Just put it up. I’m using Thesis and wanted to hook it under the post title, but it looks like even the can only appear in the main content div. Is that correct?

Anyway, worked around it using css for now.

Well done guys!

Reply

Mark Boyd April 23, 2010 at 1:48 pm

The “like” button is ok but leaves me strangely unfulfilled.

Reply

Mind D&D April 23, 2010 at 2:13 pm

Mark, you are hilarious… thanks for the comment!

Reply

Mind D&D April 23, 2010 at 1:56 pm

Thanks, Phil! We just put out v1.1 which should handle your issue. You can use <?php insert_wp_fb_like(); ?> in your templates to show the button wherever you want. We also added the ability to enable/disable the plugin for pages.

Reply

Jake April 23, 2010 at 4:04 pm

I like it! Thank you for your work. Its been installed on my blog at KansasRoots.com and works wonderfully. Quick question though, what are the relative advantages of the width and height settings? I’m using the default 450w X 100h setting, and unfortunately until I get some like mojo on a post it just appears as a awkard empty whitespace. It would be awesome if that height could be fluid and expand and contract as needed to show avatars.

Can you tell me if a height of 100 would display 1 or 2 rows of avatars? If wanted only 1 row to display, what would be the optimal height setting?

Reply

Mind D&D April 23, 2010 at 5:11 pm

Thanks Jake. It would require a bit of javascript to let the height be fluid as you’ve described, a quick google for “iframe height” will give you some leads. In this case, the height and width settings are simply applied to the iframe style. I haven’t seen any pages with enough “likes” to make it to 2 rows so I’m not sure how that would be handled yet. After taking a look at the height of the avatar and the button, 65px height seems to be a good start for a single line under the button.

Reply

Thomas Greve April 23, 2010 at 6:17 pm

Thank you again for this Plugin. Is it possible for you to support the Wordpress auto-update for Plugins. You are so fast to develop new versions. It isn’t easy to follow ;-)

Thank You

Reply

Mind D&D April 23, 2010 at 6:28 pm

Thomas, we’ve submitted this to the Wordpress plugin directory already, it just hasn’t been approved yet. Once we are, you will be able to update automatically. Thanks for the support!

Reply

Jess Ostroff April 23, 2010 at 9:35 pm

Thanks for this. We added it to our site (www.convinceandconvert.com), but can’t figure out how to make it appear at the top of each post instead of at the bottom. I’ve seen it done (http://davefleet.com/) but can’t figure it out! Any help would be much appreciated :)

Reply

Mind D&D April 23, 2010 at 10:23 pm

Jess, after you install the plugin, you can configure the placement from Settings -> WP FB Like Button. Select one of the “top” options under button alignment to make it appear at the top of your posts. You can also use <?php insert_wp_fb_like(); ?> in your template.

Reply

Toxic Beauty April 23, 2010 at 11:41 pm

Love it! Thanks!!!

Reply

Chuck Reynolds April 24, 2010 at 6:13 am

Are you going to host this with http://wordpress.org/extend/plugins/ at all so it will alert on updates?

Reply

Mind D&D April 24, 2010 at 3:32 pm

Hi Chuck, we

Reply

Thomas Greve April 24, 2010 at 4:54 pm

Thank you for your answer and support. Does your Plugin also support a count of people, which like the article??? I mean does it tell you per excample “3 people like this. ” If not please integrate this to your (my favorite) plugin. If you need: In my blog article is a link to interesting video tutorial

Reply

Latief@AnotherBlogger April 26, 2010 at 1:59 pm

Thanks for the plugin. I’ll give it a try :)

Reply

Kris Bradley April 26, 2010 at 3:49 pm

Thanks for the info guys, this is a great new feature. Once I get my blog up and running I will be sure to download the ‘Like’ plugin. I am also going to spread the word about your blog on my Twitter page.

Reply

Terry Gibbs April 28, 2010 at 9:13 am

I put this on my blog. Easy set up after trying for an hour to figure out the codes on facebook myself. THANK YOU.

Reply

Blog SEO - Vince April 29, 2010 at 10:00 pm

Thanks a lot ! I’m very proud to have the “Like” button now !

Reply

Noel April 30, 2010 at 2:46 am

Thank you. Just uploaded this and using it on my blog. works great.

Reply

agencehorizon April 30, 2010 at 9:03 am

Hey, thanks for the plugin!
Oh btw do you plan to build an extended version based on the XFBML with JS?

Reply

Bronson April 30, 2010 at 10:49 am

Thanks for this super handy little gem of a plugin.

I’m really looking forward to integrating it with my existing blogs and experimenting with it to see the results.

Reply

Trevor May 1, 2010 at 2:10 am

Sweeeeeet! I already have a “like” button but it’s not tied to facebook. This is pretty cool.

Reply

James @online phd uk May 4, 2010 at 3:26 am

Fantastic !, I am going to try this, Not too sure about manipulation the css stuff though !
Has anyone had any issues with this plugin on the latest version of wordpress ?

Reply

Name.ly May 7, 2010 at 2:35 pm

Thank you very much. It is now used on all Name.ly sites. A to your page was also added into acknowledgements.

Cheers!

Reply

Jeff May 11, 2010 at 3:24 pm

I was that peoples profile pictures would show up if they lied it. I am not getting that. Did I set something wrong? Thanks for the plugin…..It’s nice to be liked!

Reply

Mind D&D May 11, 2010 at 5:23 pm

Jeff, you must set the “display faces” setting to true in the plugin’s settings. Do that and the profile pictures will show up if any of your friends have liked the post.

Reply

SEO Blog May 13, 2010 at 5:45 pm

Sau gut! Endlich mal jemand der meiner Meinung ist.

Reply

ikea24.pl May 18, 2010 at 8:32 am

Hey,

The faces, despite having true parameter in ‘show faces’ setting, appear only if I am logged into Facebook. If I am not, then the plugin shows only the count of people that liked the post. How can I make it to show faces of the people who pressed ‘like it’ button without having to log into facebook account?

Reply

Mind D&D May 26, 2010 at 1:35 pm

ikea24.pl, unfortunately, it is a limitation put in place by facebook, so we can’t do anything about that.

Jenny O, the plugin only references what facebook has for each post, based on the post’s URL. If you by chance changed your permalink settings, that would do it.

Reply

Anis May 23, 2010 at 5:09 pm

I like twice.. it shows 2 likes.. would be great if it counts 1 for as many like as by the same person =)

Reply

Jenny O May 26, 2010 at 6:00 am

Hi! I installed the plugin, and it worked fine at first – I registered 41 likes for one post, 27 for another, and so on. After about a week, they all just disappeared – reset to zero. So last week I installed the upgrade. I got 4 likes on one post, and so on. Today they have disappeared again! It’s too bad.

Reply

Is this fix OK? July 19, 2010 at 11:50 am

Hi, I noticed that when I disabled “show on pages” the button stopped showing on archive posts as well (i.e., it didn’t show when I browsed by tags.) When I looked in the plug-in code, I saw this line:

if ( !is_feed() && !is_archive() && !is_search() && !is_404() && !is_page() )

I solved the problem by removing “&& !is_archive()” from the above line. The button now appears when I browse by tags as well, and is suppressed only on pages. Are there any implications to this fix that I’m not aware of?

Btw, great plug-in. Nice and simple.

Reply

Mind D&D July 19, 2010 at 1:07 pm

Absolutely, that fix is fine.

Reply

Is this fix OK? July 20, 2010 at 2:40 pm

Many thanks, Mind D&D, for that very prompt reply!

Reply

Web Design York September 3, 2010 at 9:22 pm

Great – most useful – thx

Reply

Flavio March 31, 2011 at 4:27 pm

Great job! Thank you guys!

Reply

Leave a Comment

{ 18 trackbacks }

Previous post:

Next post: