WordPress Facebook "Like" Button

by Zim Zala Bim on Thursday, April 22, 2010

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!

Zim Zala Bim AKA: David Zimmerman

Zim (aka David) is a web developer and co-founder of MIND. He does not write that often, and when he does, you'll be glad!

  • Pingback: Facebook Universal Like button – wp plugin | Top SEO Consultants

  • http://www.minddnd.com/ Zim

    Version 1.0.2 is up :P

  • http://liveunitedchicago.org Carolyn Shelby

    Works great :) Thanks for the extra tweaks!

  • Pingback: Der Facebook Universal

  • http://www.minddevelopmentanddesign.com Chad

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

  • Pingback: Tweets that mention MIND Development & Design, LLC | Web Development and Web Design in Lancaster, PA -- Topsy.com

  • http://www.1918.com/ Phil Buckley

    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!

  • http://marqeteer.com Mark Boyd

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

    • http://www.minddnd.com/ Mind D&D

      Mark, you are hilarious… thanks for the comment!

  • http://www.minddnd.com/ Mind D&D

    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.

  • http://Kansasroots.com Jake

    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?

    • http://www.minddnd.com/ Mind D&D

      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.

  • http://blog.tgsoft-hro.de Thomas Greve

    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

    • http://www.minddnd.com/ Mind D&D

      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!

  • http://convinceandconvert.com Jess Ostroff

    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 :)

    • http://www.minddnd.com/ Mind D&D

      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.

  • http://toxicbeautyblog.com/natural-beauty-products/you-get-what-you-pay-for/ Toxic Beauty

    Love it! Thanks!!!

  • http://rynoweb.com Chuck Reynolds

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

    • http://www.minddnd.com/ Mind D&D

      Hi Chuck, we

  • Pingback: wp-popular.com » Blog Archive » Facebook Universal Like Button WP Plugin | MIND Development & Design, LLC

  • http://blog.tgsoft-hro.de Thomas Greve

    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

  • http://another-blogger.com Latief@AnotherBlogger

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

  • Kris Bradley

    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.

  • Pingback: uberVU - social comments

  • http://www.godspeaksdaily.com Terry Gibbs

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

  • Pingback: A Cool Wordpress Plugin to Integrate Facebook “Like” Functionality | Search Engine Journal

  • Pingback: Facebook Connect en Wordpress - :: creatov.nl ::

  • Pingback: Plugin Wordpress per integrare la funzione “mi piace” di Facebook | My Social Web

  • http://www.encoreunblogseo.info/ Blog SEO – Vince

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

  • http://gothambytes.com Noel

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

  • Pingback: A Cool Wordpress Plugin to Integrate Facebook

  • http://www.agencehorizon.com agencehorizon

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

  • http://www.zenprofits.com Bronson

    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.

  • Pingback: A Cool Wordpress Plugin to Integrate Facebook

  • http://shootyouintheface.com Trevor

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

  • Pingback: What’s Not To Like About Facebook’s Like Button « Scotland SEO

  • Pingback: Ajouter le bouton Facebook « J’aime ca » sur un Blog Worpress : Like Button | Insolite-du-Geek

  • Pingback: DIY Personal Branding » Universal Facebook “Like” Button!

  • Pingback: A Cool Wordpress Plugin to Integrate Facebook

  • http://onlinephduk.com/ James @online phd uk

    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 ?

  • http://name.ly/about/acknowledgements/ Name.ly

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

    Cheers!

  • Pingback: 5 Rockstar Plugins for your Wordpress Blog « San Jose Web Design, Social Media and SEO | San Jose Website Design | DESIGN FORSITE

  • http://www.lvshortsales.com Jeff

    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!

    • http://www.minddnd.com/ Mind D&D

      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.

  • http://www.suchmaschinenoptimierung-google.info/SEO-blog/ SEO Blog

    Sau gut! Endlich mal jemand der meiner Meinung ist.

  • http://www.kupzikei.pl ikea24.pl

    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?

    • http://www.minddnd.com/ Mind D&D

      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.

  • Anis

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

  • http://gogirlcafe.jennyo.net Jenny O

    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.

  • Pingback: Wordpress Facebook ‘Like’ button | Unorig

  • Is this fix OK?

    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.

    • http://www.minddnd.com/ Mind D&D

      Absolutely, that fix is fine.

  • Is this fix OK?

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

  • http://www.edit-studios.com Web Design York

    Great – most useful – thx

  • Pingback: Get Facebook “Like” Button for your blog « The Joe Lake Blog – joeylakey.com

  • Pingback: Facebook: il pulsante “Mi piace” anche su WordPress | Edit - Il blog di HTML.it

  • http://www.paciniflavio.com Flavio

    Great job! Thank you guys!