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”

  1. Good day! I just want to offer you a huge thumbs
    up for your great information you have right here on this post.
    I will be returning to your blog for more soon.

    My web blog … prestamosydineroya.com (Tamie)

  5. Exceptional post but I was wanting to know if you could write a litte more on this topic?
    I’d be very thankful if you could elaborate a little bit more.
    Thank you!

  10. Hey there! I know this is kind of off topic but I was wondering if you
    knew where I could locate a captcha plugin for my comment form?

    I’m using the same blog platform as yours and I’m having
    problems finding one? Thanks a lot!

    Have a look at my web-site; Web tax accountant

  12. Thank you for the blog post. Thomas and I are saving to get a new book
    on this subject and your writing has made us all
    to save our own money. Your ideas really responded to all our inquiries.

    In fact, over what we had acknowledged in advance of the
    time we came across your superb blog. I actually no longer nurture doubts and a troubled mind because you have attended to our own needs here.
    Thanks

    Look into my blog post home business (http://www.reichgluecklichgesund.de)

  13. 乾癬の症状が頭皮にまで出てしまっている方向けにページを書きました。
    乾癬を自宅で手軽に治す方法を紹介しています。
    ぜひご覧になって下さい。

  15. I’m truly enjoying the design and layout of your
    website. It’s a very easy on the eyes which makes it much more pleasant for me to come here and visit
    more often. Did you hire out a developer to create your theme?
    Superb work!

    Here is my web-site tax professionals (fencraft.de)

  16. All you have to be committed to doing is lifting some items that may be a tad heavy and putting some elbow into it.

    The primary aspect in choosing the right furniture is not to look only at the outer appearance before deciding.
    Whether the property is taken care of by the owner or a property manager,
    open a conversation about how maintenance is handled.

  18. Thanks a bunch for sharing this with all
    folks you actually recognise what you’re talking approximately!
    Bookmarked. Kindly also discuss with my website =).
    We may have a link exchange contract among us

    My weblog; star wars tee

  19. Hello! I know this is kinda off topic but I was wondering if you knew where
    I could locate a captcha plugin for my comment form?

    I’m using the same blog platform as yours and
    I’m having trouble finding one? Thanks a lot!

    my website :: wedding preparations (http://fisilti.biz/index.php?do=/blog/606/where-to-donate-your-car-best-car-donation-tax-deduction-tips/add-comment)

  21. Thanks for every one of your labor on this web page.
    Betty really loves managing internet research and
    it’s really easy to see why. Almost all notice all concerning the compelling way
    you render very important tips on the website and increase contribution from other people on the subject matter plus my
    girl has been understanding a lot of things. Take advantage
    of the rest of the year. Your performing a wonderful job.[X-N-E-W-L-I-N-S-P-I-N-X]I am really impressed together with your
    writing talents as smartly as with the format on your weblog.
    Is that this a paid subject or did you customize it yourself?

    Either way stay up the nice quality writing,
    it is uncommon to see a nice weblog like this one today.

    Visit my webpage: perfect wedding gown

  24. 貸金業者の即日借り入れは、非常に便利なキャッシングです。以前に比べ、消費者金融を気軽に活用するユーザーが増加しています。短い間だけキャッシングする場合、金利も少額ですむのが支持を集める理由です。

  27. hi!,I really like your writing so a lot! proportion we communicate more about your article on AOL?
    I require a specialist on this area to unravel my problem.

    May be that’s you! Having a look ahead to look you.

    Also visit my website; tax return online – arautoscolombia.com –

  28. Thank you for your website post. Thomas and I are already saving for a new publication on this matter and your blog post
    has made all of us to save our own money. Your ideas really responded all our problems.
    In fact, in excess of what we had known in advance of the time we came upon your fantastic
    blog. My partner and i no longer nurture doubts along with a troubled mind because you have
    clearly attended to our needs right here. Thanks

    my web page – online tax [dsoulcampus.dothome.co.kr]

  29. I have to thank you for the efforts you’ve put in penning this site.
    I’m hoping to see the same high-grade content by you in the future as well.
    In truth, your creative writing abilities has motivated me to
    get my very own website now 😉

  30. It’s a pity you don’t have a donate button! I’d certainly donate
    to this outstanding blog! I suppose for now i’ll settle for
    bookmarking and adding your RSS feed to my Google account. I
    look forward to fresh updates and will share this site with my Facebook group.

    Talk soon!

  31. キャッシングなどの借金に苦しんでいるなら、債務整理をして生活をリセットすることをおすすめします。また、長年借りている借金には時効があることも覚えておいてください。詳しくはこちらのブログもご覧ください。

  33. ” Your students will begin to see that sometimes poetry resembles life, even their own lives. The Academy Award-winning actress mostly flies single-engine Cessnas and Cirruses. Celebrity gossip now involves all the trappings of journalism that give it a distinct edge of credibility.

  34. Hey There. I discovered your weblog the usage of msn. This is
    a really neatly written article. I’ll be sure to bookmark it and come back to read more of your useful information.
    Thanks for the post. I’ll definitely return.

  37. Write more, thats all I have to say. Literally,
    it seems as though you relied on the video to make
    your point. You definitely know what youre talking about, why waste your intelligence
    on just posting videos to your site when you could be giving us something informative to read?

  43. While that makes itt harder for the company too cross-promote Titans in its other games,
    itt could take sales from rivals, according to Michasel Pachter,
    an analyst with Wedbush Securities in Los Angeles who rates the stock a
    buy.

  44. Hey I know this is off topic but I was wondering if you knew of any widgets I could add to my blog
    that automatically tweet my newest twitter updates.

    I’ve been looking for a plug-in like this for quite some
    time and was hoping maybe you would have some experience with something
    like this. Please let me know if you run into anything.
    I truly enjoy reading your blog and I look forward to your new updates.

    Feel free to surf to my web page :: auto insurance rate comparison

  48. オチンチンを大きくするために必要なことは、いかにして海綿体に貯蔵される血液の量を増やすかということです。ペニスという器官は筋肉で出来ているわけではなく、海綿体というスポンジのような構造になっているのです。筋膜などはありますが、イメージ的にはほとんど血の塊といっても過言ではないのです。性的な興奮を覚えたときに海綿体が血液で満たされ、膨張して硬くなる。これが勃起という現象ですが、このとき海綿体の血流量をいかに増やすか、いかに膨張率を上げるのかがペニス増大のカギになるのです。しかも大量に血液量を増やす必要はなく、ほんの数10ccくらい増やすことに成功すれば、男性器は見違えるほど成長するのです。そのためのサプリメントであり増大ポンプでありミルキングというわけです。

  50. Can I simply say what a comfort to find someone that really understands what they’re discussing over the internet.
    You actually realize how to bring a problem to light and make it important.
    More and more people ought to look at this and understand this side of the story.

    It’s surprising you are not more popular given that you most certainly have the gift.

    Feel free to surf to my webpage :: prayer request

Leave a Reply