Thursday, April 12, 2012

Adding a Facebook "Like" Button (Timeline) on a Blogger Blog

I got my "Like" Facebook link up and running on my blogger blog yesterday (this was no small feat since I'm so technologically challenged).  Anyway, I have received a few e-mails on how to do this.  So, I'm going to try to walk you through this.  (These instructions assume you have already created a Facebook Page.)



  • To make things easier, open facebook in one tab and open blogger in another tab. (This way you are ready to toggle between both sites later on)
  • Go to the facebook page you created  (there should be an Admin Panel at the top of your page).
  • Look to the lower right corner and there should be a block that says "Page Tips".
  • "Page Tips" has two main options that you can toggle between them by hitting the next button.  You want "Discover Resources & Tips" and click on it.
  • The next screen has 3 main categories:  
    • Develop Your Page
    • Connect With People
    • Additional Resources
  • Under "Connect With People" you want "use social plugins".  Click on this
  • The first option at the top of this page is "Like Button".  Click on this
  • Now here is the first place where I got so confused.  The first box asks "URL to like".  What they are asking for is the internet address for your facebook page.  So just go to your facebook page and cut and paste the address that appears at the top of your computer screen.
  • Next you will go down and decide the rest of button options (pictures, etc).  Once you have made your selections, click on "Get Code".
  • Here is the second place where I got so confused.  There will be 2 boxes of code.  You do need both of them.  Here's what I did.
    • On blogger you want to go to "design" blog.  Then on the layout where you can add gadgets, you want to add "HTML/Java script" gadget.  
    • Then, I added the title "Follow On Facebook".
    • The big empty box that looks like you would write text you want to copy and paste the two pieces of code facebook gave you.  I copied and pasted the contents of the first box (much more code) and then spaced down a couple of lines and copied and pasted the second piece of code  (This way if there was a problem I knew which code came from which box on Facebook).
  • Then when I saved my design and viewed my blog it worked!  I was the first one to LIKE my page just to verify it worked.

Let me know if this helps!


4you

6 comments:

Amy - while wearing heels said...

This is good to know. I'll definitely have to remember this when I decide to add a like button to my page. Thanks for taking the time to provide a tutorial for this!

King of $aving said...

Stopping by from the Link It Up Thursday Party! http://kingofsaving.com

Jill @Two Yellow Birds Decor said...

I have always wondered how to do this! I am going to have to try and add it to mine! Thanks so much for the tutorial! Thanks for sharing at Thursday's Temptation.
Jill

Facebook Covers said...

Huge of time to search Facebook Covers releated keyword. You have good posting. Keep update.

Anonymous said...

You have provided a fantastic resource.
my site: Picture Booth Adelaide

Kim P. said...

Thank you so much for this...i just wasted so much time on HTML'ers sites trying to figure it out, and you just explained it so much simpler - thank you!

RaisingBabesNaturally.blogspot.com