How to Add a Facebook Like Button or Like Box

by Posted on

The Easiest Way to Add a Facebook Button to Your WordPress Site

In this post, I’ll explain the differences in the Facebook Like Button and the Facebook Like Box. I will also explain the step-by-step process of adding this functionality to your website using WordPress as an example.

Button vs Box

 
The Facebook Like Button is used for visitors of your website to ‘like’ a particular post, page, site or any other criteria a website has to offer. This is done by assigning a URL to ‘like’. Do not confuse this with a ‘Share’ button which allows Facebook users to share a post, video etc. with their Facebook friends.


I am currently using the Socialize plugin on the Ask Adam League that is running on WordPress.

The Facebook Like Button has some great advantages. It allows users of the Facebook community to ‘like’ something which in turn shares that something and broadcasts it out to all of their Facebook friends via their News Feed. Also, this something that they like will remain on their profile for other people to see and visit.

The Facebook Like Box on the other hand allows visitors to ‘Like’ a Facebook Fan Page. It also has other functions such as showing the faces of people on Facebook who like the Fan Page and it can also display the latest post on the Fan Page.

Important:

An interesting note here is that you can use the Facebook Like Button as a Facebook Like Box but only a Facebook Like Box can be used as a Facebook Like Box. This is how it works. In the Facebook Like Box Generator you are prompted to add a Facebook Page URL in the respective field pigeonholing the developer into using the Facebook API strictly for users to ‘like’ a Facebook Page. However, in the Facebook Like Button Generator the user is allowed to add any URL they want. This makes it possible for users to ‘like’ the corresponding page that the developer is suggesting. How a Facebook Like Button can be used as a Facebook Like Box is simple; add a Facebook URL to the URL field and how you are on your way to making a Facebook Like Button that when clicked will allow a Facebook user to ‘like’ your Facebook page. For example, the Ask Adam League currently has a Facebook Like Button on the site. When clicking on this Like Button, the visitor will be Liking the Facebook Fan page for the Ask Adam League. They will also be able to see other friends of theirs that like the Ask Adam League Facebook Fan Page.

How to Add a Facebook Like Button to a WordPress Site

Adding either the Facebook Like Box or Button is very similar so instead of writing War and Peace here I’ll show you the steps for the Like Button.
Notes: These steps include using the code from the Facebook Developers website and not a WordPress plugin as I’ve found many of the plugins to be confusing or very spotty with their functions.
These steps will show you how to add a Facebook Like Box to your WordPress sidebar using a text widget; the simplest way I have found to add the Like Button.

Generate the Code:

  1. Go to the Facebook Like Button generator. This is where you will set the parameters for your Facebook Like Button and generate the code for your WordPress widget.
  2. The first step for generating the code is to get the URL for your page. I will choose to use the Ask Adam League Facebook page in this example since I want my site visitors to ‘like’ my Facebook page. Just visit the page and grab the full URL there and paste it into the ‘URL to Like’ field. (I’ve noticed that Firefox 3 on my Mac did not generate the Like Button example. It wasn’t until I updated to Firefox 4 that this happened).
  3. Select the different parameters for your Like Button such as pixel width and color scheme. You can also toggle on or off Faces which just displays the faces of the users who like your page.Click ‘Get Code’ and you’ll be presented with two different types of code; iFrame and XFBML. XFBML works for me (I’ll let the coder community explain the differences).
  4. Copy the XFBML code.

Insert the Code:

  1. Login to your WordPress CMS and go to ‘Widgets’ under the ‘Appearance’ pulldown on the right.
  2. Here you’ll have all of your widgets available that can be installed in your sidebar. If you don’t know what these do just think of them as little applications that do things on your sidebar.
  3. Grab the ‘Text’ widget and drag-and-drop it to anywhere you want the Facebook Like Button to be with all of your other widgets on the sidebar respectively. (if there is currently a text widget on your sidebar that you would like to install the Facebook Like Box code to with some other code there will be no problem at all).
  4. Crack open the Text widget by clicking on the pulldown. Your text widget will open up exposing the field where you will enter the code.
  5. Paste the code that you copied from the code generator.
  6. Click ‘save’.
  7. Bring up the page(s) that has your new Facebook Like Button to check it out.

Yeah yeah. I know we only have 12 people who like us on Facebook. Give us a sec.
Now anyone that visits your site will be able to like your Facebook Fan page. You can follow these same steps with the Facebook Like Box generator to make a Like Box if you wish.

Send me a comment if you guys have any questions. Good luck!

Note: My first time adding the Like Button it took almost 2 hours for it to show up on my page. Whether it took the Facebook API a million years to work or whatever else was going on I do not know.

Published by Donald Sinatra

11,483 Replies to “How to Add a Facebook Like Button or Like Box”

  3. It’s in fact very difficult in this full of activity life to listen news on Television, therefore I only use internet for that reason, and get the most up-to-date news.

    Here is my page … craft activities (Dulcie)

  9. Everything is very open with a really clear explanation of the issues.
    It was truly informative. Your website is very useful.
    Many thanks for sharing!

  10. Prepare to work diligently in your quest for several weeks.
    What this means is that if you want to move left or right, you will simply tilt your phone left
    or right. All in all Android Invaders provides a retro gaming experience that will last just for
    that reason.

    Check out my web page – The Greedy Cave Hack (https://Www.Facebook.Com)

  16. ｛ヒト肝細胞培養液｜肝細胞エキス｝を配合した｛化粧品｜スキンケア｝で｛効果｜効き目｝がある｛おすすめ｜人気｝ランキングを紹介しています。

  19. I like looking through an article that can make men and women think.
    Also, many thanks for allowing for me to comment!

  24. Hß‹wever, with an increase of Spanish speaking people comes an increase in the volume of those who don’t know English.
    Listening to their explanations can help ᥱnable you to understand whatever documents you are dealing with.
    Furthermore, students share their accommodation with
    all the teachers, so that they will need to use English Ñ–n any
    respect times.

    My site; Tworzenie Stron

  25. Woah! I’m really digging the template/theme of this website.
    It’s simple, yet effective. A lot of times it’s challenging to get that “perfect balance” between usability and
    visual appeal. I must say you have done a superb job with this.
    Also, the blog loads extremely quick for me on Safari.
    Exceptional Blog!

  26. Hello There. I found your blog using msn. This is a really well written article.
    I’ll make sure to bookmark it and return to read more of your useful information. Thanks for the
    post. I will certainly return.

  28. Hey I am so delighted I found your site, I really found you by error, while
    I was looking on Aol for something else, Nonetheless I am here
    now and would just like to say thanks a lot for a marvelous post and a all round interesting
    blog (I also love the theme/design), I don’t have time to browse it
    all at the moment but I have bookmarked it and also added your RSS feeds,
    so when I have time I will be back to read more, Please do keep up the excellent b.

    My web site :: Buy Gold Bullion

  33. Does your website have a contact page? I’m having problems locating it
    but, I’d like to shoot you an email. I’ve got some creative
    ideas for your blog you might be interested in hearing.
    Either way, great blog and I look forward to seeing it expand over time.

  35. Today, I went to the beach front with my children. I found a sea shell and gave it to my 4 year old daughter and said “You can hear the ocean if you put this to your ear.” She placed the shell to her
    ear and screamed. There was a hermit crab inside and it pinched her ear.
    She never wants to go back! LoL I know this is
    totally off topic but I had to tell someone!

    my web page :: dildos

  39. You actually make it seem so easy with your presentation but I find this topic to be actually something
    that I think I would never understand. It
    seems too complicated and very broad for me. I’m looking forward for your next post, I’ll try to get the
    hang of it!

    My website :: click here

  41. Howdy very nice site!! Man .. Excellent ..
    Superb .. I will bookmark your website and take the feeds also?
    I am glad to find a lot of helpful information here in the publish, we’d like
    work out more techniques in this regard, thank you for sharing.
    . . . . .

  42. Are eager for a look at Sony Pictures Entertainment’s Passengers.”
    With merely over three months until its theatre introduction, the studio has yet to release significantly about the highly anticipated sci-fi movie.

    Also visit my web site … passengers movie

  48. I’m really inspired along with your writing skills and also
    with the format to your blog. Is that this
    a paid subject matter or did you modify it your self? Either way keep
    up the excellent high quality writing, it’s rare to look a nice blog
    like this one these days..

  49. Have you ever thought about adding a little bit more than just your articles?

    I mean, what you say is important and all. Nevertheless just imagine if you added some great images or video clips to give your posts more,
    “pop”! Your content is excellent but with pics and videos, this site could undeniably be
    one of the greatest in its field. Great blog!

Leave a Reply