Monday , 20 November 2017
Ever Wonder How your Favorite Blogs Got That Groovy FaceBook “Like” Button on Their Blogger Blog? It’s a Snap!

Simple How-To – Adding a Facebook “Like” Button to a Blogger Blog

 

Like me - royal blue

Like me - royal blue

Ever Wonder How your Favorite Blogs Got That Groovy FaceBook “Like” Button on Their Blogger Blog?

It’s a Snap!

 

1. Go to your fan page

2. click on “Edit Info” (upper right)

3. click on “Marketing” on the left side

4. click on “Add a Like Box to your Website”

5. Put your pages link/ address in the box titled “Facebook Page URL”

6. Tweak the settings

Mine is 175 width, in order to line up with my other widgets

I chose light because Dark is a black background, too dark for my blog

I chose not to “show stream” because it looked too busy for my blog

I chose “show faces” because I like to see my friends

I chose “show header” because you can click and go to my FB page

 

7. Hit:  ”get code”

8.  Copy either “iframe” or “xfbml” code.  I used “xfbml” and it worked. That is all I know about this step. This is the only scary step.

8. Go to your blog , sign in and click on “design”. (I use the new Blogger Platform, I am not sure of the steps to get to “design” on the older format.

9. You will see your boxes with “add a gadget”, click on one.

10. Click on “HTML/JavaScript,” (8 down from top)

11. Title it (that’s up to you)

12. Paste the content that you copied in the “content” section and save.

13 Check your blog and see where it ended up. Give it a few seconds to load

14. You can go back in to design and move it around. You just drag that “widget” to wherever you want it.

 

Easy peazy, you did it! 

Related Posts Plugin for WordPress, Blogger...

10 comments

  1. I went to mine but there is no marketing button on the left side :(

  2. Hello! Thanks for the info – I had been wondering how to do this. Unfortunately, it didn’t quite work for me. At step 3 there was no “Marketing” tab on the left side. For me it was:

    3.Click on “Resources” on the left side.

    4.Under “Connect with People” click on “Use Social Plugins”.

    5.From there choose the first tab which is the “like” button, or other buttons you may want.

    The subsequent steps are exactly the same and I was successful in getting a button on my webpage by following them – so thanks so much!

    I don’t know why my Facebook layout was different. Your steps sound so much easier then mine were!

  3. <~another w/o a marketing tab to choose. :(

  4. Looks like if you go to…
    Resources… then Use Social Plug Ins it will take you to a page where the first option is to Like Button.

    Looks like you will have to ‘verify’ your page by way of cell phone text or credit card. Here is the link to verify your page:
    http://www.facebook.com/help/?faq=17580

    Once this is done you can then go back to the original page & re submit, you will then get the FXBML code to use…

    Continue on there from step 7 of this tutorial post.

    Wallah! Done. I have a button now. I am going to tweak it a bit, but at least I have it on my blog now.

    Thank you so much!

    http://summerraynebows.blogspot.com/

  5. Hi!

    Great info. Thanks!
    Here’s another thing I would really like to know how to do: How to get the “Like” or “Share on FB” and “Tweet this” on every blog post so people can easily share my post if they want to.

    I believe this is something other people could benefit from too. Can you help us out?
    Thanks!

    Kisses,
    Cris

  6. Thanks Casey Marie for the added info!! Not quite “easy peasy”, but it’s done! Thanks for the post!

  7. Thanks for the info! I have mine in place.

    Check out my blog
    http://paintingpam.blogspot.com

  8. I am not using Blogger. Instead I use WordPress.com & unable to add any LIKE button. Can anyone help? Thanks, Judi

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>