Aside

“SNV Facebook Like Button” Plugin

Plugins 114 Comments »

Well, I’ve gone and done it – I wrote my first WordPress plugin.  I’m super stoaked on how easy it was, and I may end up doing some more work in the future.

And, for my first number, I tackled the same problem I did in my last post: the new Facebook “like” button.

The way I had inserted was too complicated, and required editing of the core plugin.

Not anymore.

Introducing the “Facebook Like Button” plugin.

Basically, it does one thing, and one thing well: It lets you insert the new Facebook like button either under the content of your blog post, above your comments and other social plugins (bookmarks, etc) or insert it manually via a function/template tag.

Simply activate the plugin and head over to the options menu to control the various options (color scheme, width, height, etc) of the plugin, then sit back and watch as your friends “like” your content.

When a person likes a post, by the way, it ends up in their Recent Activity Stream.

Download Version 1.6 of the Facebook Like Plugin

And, as always, feedback is much, much appreciated :)

Version 1.6 adds a whole host of options, from height, width, margin, the verbiage, and more.  It makes the process so much easier than just filling in option menus.  Please enjoy!

Changelog:

0.1a – initial release.
0.2a – fixed spacing issue both above and below
1.0: first stable release – added function to add to a template manually (thanks Amber Weinberg!)
1.5 – added the rest of the options FB gives you (minus the button type – I like the faces, and that’s specifically what I designed this plugin to do).
1.6 – for some reason 1.5 couldn’t be downloaded so 1.6 is just a clone to resync the plugin repository.

  • http://nicholaswyoung.com nicholaswyoung

    Nice. Yeah – it looks like Facebook’s new features are all quite simple to integrate. That’s important if they want quick uptake…

    I’m excited to see where this plugin goes. Have you got it in the directory yet?

    • http://www.studionashvegas.com studionashvegas

      I submitted it last night once I tested it on a few of my development
      sites. I’ll know in the next day or two if it got accepted.

      There’s a few things I want to add/change, but I’ll wait until its in the
      repository so I can push changes quicker.

  • http://nicholaswyoung.com nicholaswyoung

    Nice. Yeah – it looks like Facebook's new features are all quite simple to integrate. That's important if they want quick uptake…

    I'm excited to see where this plugin goes. Have you got it in the directory yet?

  • http://www.studionashvegas.com studionashvegas

    I submitted it last night once I tested it on a few of my development
    sites. I'll know in the next day or two if it got accepted.

    There's a few things I want to add/change, but I'll wait until its in the
    repository so I can push changes quicker.

  • http://twitter.com/NVanReece Nancy VanReece

    Oh so easy to install and use! Thank you Mitch!

  • http://www.attentionmax.com maxkalehoff

    Thanks for writing this. Awesome! Just what I was looking for (via Rex Hammock). I just installed it. Do you know why it creates such a large space between the button other items that follow (like your Disqus comment section, or ShareThis section, etc.)? Seems the same thing is happening on your blog and mine.

    • http://www.studionashvegas.com studionashvegas

      I’m fixing that right now – once I do i’ve got access to the plugin directory and will upload an official version :)

      • http://www.attentionmax.com maxkalehoff

        You’re awesome.

  • http://twitter.com/NVanReece Nancy VanReece

    Oh so easy to install and use! Thank you Mitch!

  • http://www.attentionmax.com maxkalehoff

    Thanks for writing this. Awesome! Just what I was looking for (via Rex Hammock). I just installed it. Do you know why it creates such a large space between the button other items that follow (like your Disqus comment section, or ShareThis section, etc.)? Seems the same thing is happening on your blog and mine.

  • http://www.davemadethat.com Dave Delaney

    Nice work Mitch! I’ve added this to my blog.

  • http://www.davemadethat.com Dave Delaney

    Nice work Mitch! I've added this to my blog.

  • http://www.brandbreakout.com John Morgan

    Great work Mitch! This is a much needed plugin.

  • http://www.mikepauljr.com/ Mike Paul

    Nice job! Easy install, seems to be working great!

  • http://www.mikepauljr.com/ Mike Paul

    Nice job! Easy install, seems to be working great!

  • http://www.studionashvegas.com studionashvegas

    I'm fixing that right now – once I do i've got access to the plugin directory and will upload an official version :)

  • http://www.attentionmax.com maxkalehoff

    You're awesome.

  • http://www.themarryblogger.com/ Stu Gray

    Mitch –

    I was literally looking for something like this two days ago…I am trying it out at Themarryblogger.com! Thanks!! (I put the regular ‘like’ button in my sidebar, and then added your plugin) I might take the like off of the sidebar totally.

    • http://www.studionashvegas.com studionashvegas

      Make sure you grab the new version from the repository and delete the one if
      it’s not “SNV Facebook Like Button” – that way I can get you updates :)

      Mitch

  • http://www.themarryblogger.com/ Stu Gray

    Mitch –

    I was literally looking for something like this two days ago…I am trying it out at Themarryblogger.com! Thanks!! (I put the regular 'like' button in my sidebar, and then added your plugin) I might take the like off of the sidebar totally.

  • http://www.studionashvegas.com studionashvegas

    Make sure you grab the new version from the repository and delete the one if
    it's not “SNV Facebook Like Button” – that way I can get you updates :)

    Mitch

  • http://www.facebook.com/willoobrien Willo O’Brien

    I had first thought it might show up on my profile page, in the feed, but it doesn’t. Also interesting that you can’t see the other people who Liked it. Anyway – very cool… I may give it a whirl on my blog.

  • http://www.facebook.com/willoobrien Willo O'Brien

    I had first thought it might show up on my profile page, in the feed, but it doesn't. Also interesting that you can't see the other people who Liked it. Anyway – very cool… I may give it a whirl on my blog.

  • http://thoushallblog.com Yan Susanto

    I’m not too sure how it is done but at posterous.com, when you’ve “like” something and hover it, you’re able to “share” it on your wall which is pretty cool if you ask me. This feature isn’t available by default.

    Anyway, cool plugin, Mitch!

    Yan

  • http://thoushallblog.com Yan Susanto

    I’m not too sure how it is done but at posterous.com, when you’ve “like” something and hover it, you’re able to “share” it on your wall which is pretty cool if you ask me. This feature isn’t available by default.

    Anyway, cool plugin, Mitch!

    Yan

    • http://www.studionashvegas.com studionashvegas

      Yan,

      I have that tab in my “sexy bookmarks” already – I think this new like
      feature is going to just be for the activity stream for the moment, but i’m
      not sure – it’s still really new.

  • http://www.amberweinberg.com Amber Weinberg

    Is there a way to insert it manually? It’s auto inserting to my content on the hompage and portfolio. :)

    • http://www.studionashvegas.com studionashvegas

      Thanks to you, there is now!

      • http://www.amberweinberg.com Amber Weinberg

        well then can I getta w00t?

  • amberweinberg

    Is there a way to insert it manually? It's auto inserting to my content on the hompage and portfolio. :)

  • http://MohammedAltaee.com Mohammed Al-Taee, PMP

    Can you give us the option to move the button up near the RT tab?

    http://AltaeeBlog.com

    Thanks,

    • http://www.studionashvegas.com studionashvegas

      Sure, i’ll put that in the notes for a future release – the option of before
      the content or after the content (it’s my first plugin, so I need to figure
      out exactly how to do it :)

      Mitch

  • http://AltaeeBlog.com Mohammed Al-Taee

    Can you give us the option to move the button up near the RT tab?

    http://AltaeeBlog.com

    Thanks,

  • http://www.amberweinberg.com Amber Weinberg

    Someone just jacked your plugin. I got a notice that there was an “upgrade” for it, and when I upgraded, it became a completely different version from a guy named Ahmed….and the author goes to his site.

    • http://www.studionashvegas.com studionashvegas

      Nah, that was my fault. Before it went into the repository i had it named
      something different. Now, I had to rename it “SNV Facebook Like Button”.
      Delete the old one and install the new one through the plugin installer :)

      • http://www.amberweinberg.com Amber Weinberg

        Ah ok that really freaked me out LOL> I was actually in the middle of editing your plugin so you could manually insert it where you wanted to but I lost it when I upgraded (wasn’t paying attention LOL) I’ll shoot you the code if you want it if I redo it :)

        • http://www.studionashvegas.com studionashvegas

          Sweet – I’ll add you in as a contributed when I update the SVN next
          time :-)

          Mitch

      • http://shotgunconcepts.com Chris Houchens

        this is really a nice plugin. Very easy and looks good.
        You say you can move it?
        I’ve installed it (http://shotgunconcepts.com) and I’d like to move it below my sociable buttons for a tighter look.
        I’ve looked in the options/setting for a place to move — or do you have to go in and edit the code?

        • http://www.studionashvegas.com studionashvegas

          You have to edit the code – there’s a template tag we created in the options
          menu that will let you drop it in wherever you want.

  • amberweinberg

    Someone just jacked your plugin. I got a notice that there was an “upgrade” for it, and when I upgraded, it became a completely different version from a guy named Ahmed….and the author goes to his site.

  • Pingback: Social Media Just Got “All Up In” Your Online Shopping – p.s. How To Get Your Own FB “Like” Button

  • http://www.studionashvegas.com studionashvegas

    Nah, that was my fault. Before it went into the repository i had it named
    something different. Now, I had to rename it “SNV Facebook Like Button”.
    Delete the old one and install the new one through the plugin installer :)

  • http://www.studionashvegas.com studionashvegas

    Yan,

    I have that tab in my “sexy bookmarks” already – I think this new like
    feature is going to just be for the activity stream for the moment, but i'm
    not sure – it's still really new.

  • http://www.studionashvegas.com studionashvegas

    Sure, i'll put that in the notes for a future release – the option of before
    the content or after the content (it's my first plugin, so I need to figure
    out exactly how to do it :)

    Mitch

  • amberweinberg

    Ah ok that really freaked me out LOL> I was actually in the middle of editing your plugin so you could manually insert it where you wanted to but I lost it when I upgraded (wasn't paying attention LOL) I'll shoot you the code if you want it if I redo it :)

  • http://www.studionashvegas.com studionashvegas

    Sweet – I'll add you in as a contributed when I update the SVN next
    time :-)

    Mitch

  • http://www.amberweinberg.com Amber Weinberg

    I’ve got the plugin finished, I’ve even added an option in the admin menu to insert it manually or automatically. Where do you want me to send it to?

  • amberweinberg

    I've got the plugin finished, I've even added an option in the admin menu to insert it manually or automatically. Where do you want me to send it to?

  • http://www.studionashvegas.com studionashvegas

    Thanks to you, there is now!

  • amberweinberg

    well then can I getta w00t?

  • http://theheatweb.com christian

    hi! I’m actually using another Facebook “Like” plugin from AJ blog and I’m quite satisfied with it but the problem with his plugin is that the Like also appears in the pages like “Contact” which I don’t like. How about this plugin? Will it just appear on my posts?

    • http://www.studionashvegas.com studionashvegas

      It does, actually, but that’s a great idea for a feature (hide on pages).
      Thanks for the comment – i’ll see what I can do!

      Mitch

    • http://www.studionashvegas.com studionashvegas

      Actually, there is a way to make it show up only on posts – if you edit your
      single.php (and index.php) you can drop in the code that will allow you to
      manually insert the like button (it’s a function/template tag). Change the
      Automatic setting in your options menu to Manual and pull the code below
      it… copy that code wherever you want it displayed, and it should drop it
      right in.

  • http://theheatweb.com christian

    hi! I'm actually using another Facebook “Like” plugin from AJ blog and I'm quite satisfied with it but the problem with his plugin is that the Like also appears in the pages like “Contact” which I don't like. How about this plugin? Will it just appear on my posts?

  • http://www.studionashvegas.com studionashvegas

    It does, actually, but that's a great idea for a feature (hide on pages).
    Thanks for the comment – i'll see what I can do!

    Mitch

  • http://www.studionashvegas.com studionashvegas

    Actually, there is a way to make it show up only on posts – if you edit your
    single.php (and index.php) you can drop in the code that will allow you to
    manually insert the like button (it's a function/template tag). Change the
    Automatic setting in your options menu to Manual and pull the code below
    it… copy that code wherever you want it displayed, and it should drop it
    right in.

  • http://www.adventure-travel-reviews.com/ Lily

    Hi there, I want to use your plugin to add the ‘Like’ on the same line as other text. When I called it from my php template files it puts it underneath.

    Basically I want the button to show next to “# Comments” on my site: http://www.adventure-travel-reviews.com/ (show just the like button and the count and not the Facebook faces)

  • Anonymous

    Dude, your plugin worked like I expected, and saved my from editing my theme. Easy. Thanks!

  • http://twitter.com/lukerumley Luke Rumley

    Dude, your plugin worked like I expected, and saved my from editing my theme. Easy. Thanks!

  • http://www.facebook.com/Meg.Margy.Crockett Margaret Crockett

    I am wondering if your facebook like button works in regular websites not just blogs. A non-profit I work with is trying to encourage more on-line participation by putting at least one “like” button on our website. Instructions don’t work for us. Not sure how easy it will be to get a fix from Facebook. Thanks! Meg

    • http://www.studionashvegas.com studionashvegas

      You can insert the button directly with facebook’s code – there’s a site on facebook’s network that lets you do all of the customization items I put in but through their site – it generates the iframe code for you.

  • http://www.facebook.com/Meg.Margy.Crockett Margaret Crockett

    I am wondering if your facebook like button works in regular websites not just blogs. A non-profit I work with is trying to encourage more on-line participation by putting at least one “like” button on our website. Instructions don't work for us. Not sure how easy it will be to get a fix from Facebook. Thanks! Meg

  • http://twitter.com/lukerumley Luke Rumley

    Dude, your plugin worked like I expected, and saved my from editing my theme. Easy. Thanks!

  • http://www.facebook.com/Meg.Margy.Crockett Margaret Crockett

    I am wondering if your facebook like button works in regular websites not just blogs. A non-profit I work with is trying to encourage more on-line participation by putting at least one “like” button on our website. Instructions don't work for us. Not sure how easy it will be to get a fix from Facebook. Thanks! Meg

  • http://www.studionashvegas.com studionashvegas

    You can insert the button directly with facebook's code – there's a site on facebook's network that lets you do all of the customization items I put in but through their site – it generates the iframe code for you.

  • http://shotgunconcepts.com Chris Houchens

    this is really a nice plugin. Very easy and looks good.
    You say you can move it?
    I've installed it (http://shotgunconcepts.com) and I'd like to move it below my sociable buttons for a tighter look.
    I've looked in the options/setting for a place to move — or do you have to go in and edit the code?

  • http://www.studionashvegas.com studionashvegas

    You have to edit the code – there's a template tag we created in the options
    menu that will let you drop it in wherever you want.

  • http://twitter.com/brandonchicago Brandon Andersen

    Thanks for the plugin Mitch! I appreciate the control panel you created. You might want to give users the option to turn the images off as well. “show-faces=true/false”

    Thanks again!

    • http://www.studionashvegas.com studionashvegas

      Good call – I think that’s an addition I need to make.

      Mitch

  • http://www.ekaterinawalter.com Ekaterina Walter

    Mitch, activated your plugin, but it doesn’t work for me. am i supposed to manually edit html? i don’t see any other options when i click ‘edit’…

  • http://twitter.com/brandonchicago Brandon Andersen

    Thanks for the plugin Mitch! I appreciate the control panel you created. You might want to give users the option to turn the images off as well. “show-faces=true/false”

    Thanks again!

  • http://www.studionashvegas.com studionashvegas

    Good call – I think that's an addition I need to make.

    Mitch

  • ekaterinawalter

    Mitch, activated your plugin, but it doesn't work for me. am i supposed to manually edit html? i don't see any other options when i click 'edit'…

    • http://www.studionashvegas.com studionashvegas

      Sorry for the delay in replying to this – been at a conference. You should have it automatically added to your theme, but if not you can add it manually using the theme editor and the shortcode provided in the theme options.

  • http://goinglikesixty.com GoingLikeSixty

    Very cool. Thanks. Simple install!
    Does deselecting actually remove the “like?” Seems that one needs to be logged in to FB for it to “like?”

  • http://goinglikesixty.com GoingLikeSixty

    Very cool. Thanks. Simple install!
    Does deselecting actually remove the “like?” Seems that one needs to be logged in to FB for it to “like?”

  • Pingback: Agregar el botón “Me gusta” de Facebook a un theme de WordPress

  • Pingback: Well, how do you Like that?

  • Anonymous

    How do you get the icon to be at the side of each post instead of below?? How do I remove the icon from the bottom of each page on my WordPress blog???

    Thanks

    SB

  • FashionistaNYC

    How do you get the icon to be at the side of each post instead of below?? How do I remove the icon from the bottom of each page on my WordPress blog???

    Thanks

    SB

  • Pingback: Do You Like? Tell Facebook.

  • Pingback: One Lily Web Solutions | Simple. Bold. Beautiful.

  • Pingback: Knoxville “Is there an app for that?” // The Cool People Care Nonprofit Resource Blog

  • http://the-glycemic-index-guide.com Andy

    Hey Mitch … thanks for creating the facebook ‘like button’ plugin … I’m a little confused however, and it’s probably me …. being relatively new to using wordpress etc (but I’m learning something every day!!). Just installed the plugin to one of my websites (http://the-glycemic-index-guide.com) … but nothing has happened yet?? Can anyone advise?

  • http://www.portlandmyway.com jolynne

    Thanks for doing this. Is there any way I can have this show up on all my previous posts?

    • http://www.studionashvegas.com studionashvegas

      IT should show up on all posts instantaneously. If it doesn’t show up
      right away, try saving your settings to see if that “triggers” the
      plugin.

  • http://www.portlandmyway.com jolynne

    Thanks for doing this. Is there any way I can have this show up on all my previous posts?

  • http://www.studionashvegas.com studionashvegas

    IT should show up on all posts instantaneously. If it doesn't show up
    right away, try saving your settings to see if that “triggers” the
    plugin.

  • http://www.evolvedmommy.com Stephanie

    YAY! You made it idiot proof. Thanks a ton!

  • henry

    I installed the plug-in but I don’t see a Like button anywhere on my site. Is this supposed to be a widget? Short-code? How do you make the button appear?

    • http://www.studionashvegas.com studionashvegas

      Try updating the settings – sometimes it takes that to kick-start the
      plugin. I’m still working on a fix for it.

  • henry

    I installed the plug-in but I don't see a Like button anywhere on my site. Is this supposed to be a widget? Short-code? How do you make the button appear?

  • http://www.studionashvegas.com studionashvegas

    Try updating the settings – sometimes it takes that to kick-start the
    plugin. I'm still working on a fix for it.

  • Ozh

    The code of this plugin sucks. I’ve just posted a comment on Think Vitamin but I thought it’d be more appropriate here.

    First lines of the plugin:

    //plugin defaults
    add_option ( ‘width’, ‘450′ );
    add_option ( ‘height’, ‘70′ );
    add_option ( ‘font’, ‘arial’ );
    add_option ( ‘verb’, ‘like’ );
    add_option ( ‘padding-vert’, ‘0′ );
    add_option ( ‘padding-horz’, ‘0′ );
    add_option ( ‘color-scheme’, ‘light’ );

    FAIL.

    Not only you should add all the options in *one array* instead of 7 individual records, but what is the point in issuing 7 extra SQL requests on every page request to re-save those values???

    • http://www.studionashvegas.com studionashvegas

      Thanks for your (albeit non-constructive) comment. I had mentioned
      above that this was my first plugin, and I’m very open to any
      suggestions on how to fix it and make it better seeing as how I know
      it’s a little rough around the edges. If you’d like to make any
      suggestions, please do so (that goes for anyone else).

  • Ozh

    The code of this plugin sucks. I've just posted a comment on Think Vitamin but I thought it'd be more appropriate here.

    First lines of the plugin:

    //plugin defaults
    add_option ( ‘width’, ‘450′ );
    add_option ( ‘height’, ‘70′ );
    add_option ( ‘font’, ‘arial’ );
    add_option ( ‘verb’, ‘like’ );
    add_option ( ‘padding-vert’, ‘0′ );
    add_option ( ‘padding-horz’, ‘0′ );
    add_option ( ‘color-scheme’, ‘light’ );

    FAIL.

    Not only you should add all the options in *one array* instead of 7 individual records, but what is the point in issuing 7 extra SQL requests on every page request to re-save those values???

  • http://www.studionashvegas.com studionashvegas

    Thanks for your (albeit non-constructive) comment. I had mentioned
    above that this was my first plugin, and I'm very open to any
    suggestions on how to fix it and make it better seeing as how I know
    it's a little rough around the edges. If you'd like to make any
    suggestions, please do so (that goes for anyone else).

  • http://twitter.com/tracyberna Tracy Berna

    I already read that you’re fixing the big space that happens below the button, and I would click “like” on that if I could. :) Now my question is: on the blog where I’m using this, one of the posts says “13 people like this” but it only shows one picture (specifically, mine). Shouldn’t all the pictures be showing? Or will it only show pictures of people who are logged in? If so, do I have a choice to show the pictures even when they’re not? I think the smiling faces of lots of people who like the post would be better advertising for its popularity than just a number (but if I can’t control it, I s’pose that’s okay too.)

    • http://www.studionashvegas.com studionashvegas

      It will only show people who are friends of yours. If 13 people like
      it, and 2 of them are friends, it will only show two faces. That’s
      facebook’s security at work :)

      mitch

      • http://twitter.com/tracyberna Tracy Berna

        Cool. Thanks. :)

  • http://twitter.com/tracyberna Tracy Berna

    I already read that you're fixing the big space that happens below the button, and I would click “like” on that if I could. :) Now my question is: on the blog where I'm using this, one of the posts says “13 people like this” but it only shows one picture (specifically, mine). Shouldn't all the pictures be showing? Or will it only show pictures of people who are logged in? If so, do I have a choice to show the pictures even when they're not? I think the smiling faces of lots of people who like the post would be better advertising for its popularity than just a number (but if I can't control it, I s'pose that's okay too.)

  • http://www.studionashvegas.com studionashvegas

    It will only show people who are friends of yours. If 13 people like
    it, and 2 of them are friends, it will only show two faces. That's
    facebook's security at work :)

    mitch

  • http://twitter.com/tracyberna Tracy Berna

    Cool. Thanks. :)

  • http://sonrie-a-desconocidos.blogspot.com SonrieRD

    delete this =]

  • http://www.facebook.com/people/Ra-A-Ramirez/723748848 Ra A. Ramírez

    delete this =]

  • http://www.facebook.com/profile.php?id=840750397 Zafer Durmuş

    I have installed it on http://www.unili.com and it works well. thx

  • http://www.facebook.com/profile.php?id=840750397 Zafer Durmuş

    I have installed it on http://www.unili.com and it works well. thx

  • http://www.social-media-design.com/ Lori Randall Stradtman

    Hi Mitch! I absolutely love this plug-in, have used it for months, and now somehow it’s showing up on Pages again. I’m sure it’s something I did, but would you please tell me now to omit Pages from the “likes?” Thanks!!

  • http://www.social-media-design.com/ Lori Randall Stradtman

    Hi Mitch! I absolutely love this plug-in, have used it for months, and now somehow it’s showing up on Pages again. I’m sure it’s something I did, but would you please tell me now to omit Pages from the “likes?” Thanks!!

  • http://www.milosraonic.ca/blog/ WACB

    This is an excellent plugin. Easy to use for a beginner like myself, and it goes in manually very easily unlike the 4 other plugins I tried before (they would add a bunch of white space, etc). I just installed on the lightword theme at milosraonic.ca/blog and the only thing is I can’t figure out how to allow people to “like” the entire site. If I place it in the sidebar it just likes whichever post is at the bottom of the page, and if I place it in idividual posts it works for those. If anyone has any insight into how to put this in the sidebar, footer, header, etc. so folks can like the entire website instead of an individual post – please email me at ace@milosraonic.ca … Thanks! — WACB

  • http://www.studionashvegas.com studionashvegas

    WACB,

    This plugin automatically pulls the last global post value so it won’t
    work for site wide liking. Your best bet is to visit the developer
    page on Facebook – you can enter a URL and generate the box manually -
    all this plugin does is enter the variables into the correct spots :)

  • http://www.stellaanokam.com Stella | Learn Blogging

    I found this page from the ‘visitindiana’ blog, while looking for a Facebook like plugin. Thanks man, good job – you were highly recommended and I’m giving this a shot.

  • danieljohnsonjr

    Hey Mitch, is it possible to update this plugin so that if a featured image is included in a post, it uses that as the image? I believe the fb tag is og:image

  • danieljohnsonjr

    Hey Mitch, is it possible to update this plugin so that if a featured image is included in a post, it uses that as the image? I believe the fb tag is og:image