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. Ok thanks for this article. I have to ask though when you use the Like Button as a Like Box (by putting in the URL of your facebook fan page), does it have the same effect when someone clicks like that the Like Box would? When you click Like on a Like Box, you like the facebook fan page, it goes out to your friends that you did this, and you also receive updates in your feed whenever there is an update to that fan page. Would someone get the updates continuously if they did it through a Like Button (with facebook fan page URL)?

  4. Great blog! Is your theme custom made or didd you download it ffrom somewhere?

    A design like yours with a few simple adjustements would really make my blog
    jump out. Pleasee let me knkw where you got your theme.
    Kudos

    Feel free to visit my blog; die cheap jerseys

  5. Nice post. I used to be checking constantly this blog and I am inspired!
    Very useful info specially the last phase 🙂 I care for
    such information much. I used to be seeking this certain info for a very long time.
    Thank you and good luck.

  7. Nicе post. I was cheсking constantly this bloig and I’m impresseԁ!
    Very helpful info specially the lаst part :
    ) I care for sucfh info mucɦ. I was seeking this particular informatijоn for a long time.
    Thank yoᥙ and good ⅼuck.

  9. I was recommended this blog through my cousin. I’m now
    not sure whether this put up is written through him as no one else recognise such designated about my problem.
    You’re incredible! Thanks!

  10. Hello Web Admin, I noticed that your On-Page SEO is is missing a few factors, for one you do not use all three H tags in your post, also I notice that you are not using bold or italics properly in your SEO optimization. On-Page SEO means more now than ever since the new Google update: Panda. No longer are backlinks and simply pinging or sending out a RSS feed the key to getting Google PageRank or Alexa Rankings, You now NEED On-Page SEO. So what is good On-Page SEO?First your keyword must appear in the title.Then it must appear in the URL.You have to optimize your keyword and make sure that it has a nice keyword density of 3-5% in your article with relevant LSI (Latent Semantic Indexing). Then you should spread all H1,H2,H3 tags in your article.Your Keyword should appear in your first paragraph and in the last sentence of the page. You should have relevant usage of Bold and italics of your keyword.There should be one internal link to a page on your blog and you should have one image with an alt tag that has your keyword….wait there’s even more Now what if i told you there was a simple WordPress plugin that does all the On-Page SEO, and automatically for you? That’s right AUTOMATICALLY, just watch this 4minute video for more information at. Seo Plugin

  11. Depression, anger, moodiness, insomnia, and lack of well-being aree common criticisms of postmenopausal women.

    Stop byy my homepage :: testosterone therapy side effewcts (Lucinda)

  16. Le plus captivant c’est qu’on peut programmer 13 heures à l’avance le début
    de la cuisson, comme ça, pas besoin de se réveiller tôt le matin pour préparer votre
    petit déjeuner, il faut le façonner et le programmer avant de
    vous coucher le soir et c’est son bip sonore indiquant la fin de la cuisson qui va vous réveiller le
    matin.

  17. Internet search engine Ranker is certified for a single PC.
    Nonetheless you are complimentary to mount the very same license on another computer system as long as the program is not running
    concurrently.

    my website; top seo

  18. Le Fytter Rider RI-10X est un vélo de bicycling performant,
    assurant un confort de pédalage exceptionnel grâce à sa lourde roue d’inertie de 24 kg.
    Spécialement conçu pour un usage intensif, sa construction robuste supporte un poids
    maximal de 135 kg. Il dispose d’un grand écran LCD affichant 7
    fonctions essentielles au bon suivi de la séance.

  20. Bienvenue dans la gamme d’aspirateurs robots LG.
    LG invente l’aspirateur robot qui s’oriente tout seul et guarantee un nettoyage rapide et
    précis de votre logis.

  34. Definitely, what a magnificent website and enlightening posts,
    I surely will bookmark your website.Best Regards!

    my blog post; is real estate a good investment (Jocelyn)

  38. Heya i am for the first time here. I found this board and
    I to find It truly useful & it helped me out much. I’m hoping to present one thing again and aid others like you aided me.

    Here is my webpage real estate investment banking (Anya)

  39. Pour voyager en low price, les valises de cabines souples entrent
    parfaitement dans les dimensions limites exigées par les compagnies
    comme Ryanair, Aerlingus ou encore Easyjet , principales compagnies aériennes low cost en Europe.

  49. Therre are side effects, but for me quality of life us
    more significant that diration of life.

    Herre is my webpage besat anti aging supplement regimen – Elba –

  50. Changing from completely dry natural herb to oils is done quickly
    by placing the given oil jar into the chamber and also holding the unit in an upright setting while heating and drawing.

    Also visit my web page; best vaporizer for weed; Frieda,

Leave a Reply