Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How to Add Facebook Like to Blogger

add a clickable Facebook “Like” button to your Blogger (blogspot.com) website. After building the button in the Like Button Configurator, you’ll just need to copy and paste two bits of Code into your Blogger dashboard, making one quick edit for compatibility.

Part1
EditCreating a Like Button

  1. Image titled Add Facebook Like to Blogger Step 1
    1
    Go to https://developers.facebook.com/docs/plugins/like-button. You can use any modern web browser, such as Chrome or Safari.
  2. Image titled Add Facebook Like to Blogger Step 2
    2
    Scroll down to Like Button Configurator. It’s in the third section of the page.
  3. Image titled Add Facebook Like to Blogger Step 3
    3
    Enter your blog’s address into the “URL to Like” box.
  4. Image titled Add Facebook Like to Blogger Step 4
    4
    Enter your desired plugin width into the “Width” box. Most Blogger users can leave this box blank, as the default width (450 px) works fine. Note that this is the width of the entire plugin, not the Like button itself.
  5. Image titled Add Facebook Like to Blogger Step 5
    5
    Select a button style from the “Layout” menu. You’ll see a preview of each style when its selected.
  6. Image titled Add Facebook Like to Blogger Step 6
    6
    Select an action from the “Action Type” menu. By default, your button will say “Like.” If you prefer, you can change it to say “Recommend.” When someone clicks the button, their Facebook followers will see “(person’s name) Recommends this.[1]
  7. Image titled Add Facebook Like to Blogger Step 7
    7
    Select a size from the “Button Size” menu. The button preview beneath the configurator will show you what each size looks like.
  8. Image titled Add Facebook Like to Blogger Step 8
    8
    Check or uncheck the “Include Share Button” box. If the box is checked, a button that says “Share” will appear next to the Like button on your blog. If someone clicks this button, they’ll have the opportunity to enter some of their own text before sharing the link with their Facebook friends.[2]
  9. Image titled Add Facebook Like to Blogger Step 9
    9
    Click Get Code. Now you’ll see two boxes containing HTML code you must paste into different areas of Blogger.

Part2
EditAdding the Code to Your Template

  1. Image titled Add Facebook Like to Blogger Step 10
    1
    Sign in to https://www.blogger.com. Use another tab or browser window, as you’ll need to copy and paste the code from Facebook to Blogger.
  2. Image titled Add Facebook Like to Blogger Step 11
    2
    Click Template. It’s on the left side of the screen, near the bottom of the menu.
  3. Image titled Add Facebook Like to Blogger Step 12
    3
    Back up your blog template. Always make a backup when editing your blog’s HTML code directly.
    • Click the Backup / Restore button at the top right corner of the page.
    • Click Download Template.
    • Enter a name for your file, e.g. “blog template backup.”
    • Click Save.
  4. Image titled Add Facebook Like to Blogger Step 13
    4
    Click Edit HTML. It’s just beneath the preview image of your blog.
  5. Image titled Add Facebook Like to Blogger Step 14
    5
    Copy the code from the first box of the Facebook Like Button Configurator. It’s the code in the top box, under “Step 2.”
    • You can copy the text by highlighting it, then pressing Control+C or  Command+C.
  6. Image titled Add Facebook Like to Blogger Step 15
    6
    Paste the code into your Blogger HTML code. The code must be pasted after the line that begins with , preferably on the very next line.[3]
    • To give yourself a place to paste code, click before the first character of the line after the body tag, then press  Enter or  Return.
    • Click the blank line, then press Control+V or  Command+V to paste.
  7. Image titled Add Facebook Like to Blogger Step 16
    7
    Replace every “&” in the pasted code with “&”. Don’t include the quotation marks.
    • For example, “//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8” becomes “//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8"”
  8. Image titled Add Facebook Like to Blogger Step 17
    8
    Click Save Template.
    • If you accidentally skipped an “&,” you’ll see an error that says “Error Parsing XML” just above the code. Go back to the pasted code, find the &, and replace it with &.
  1. Image titled Add Facebook Like to Blogger Step 18
    1
    Copy the second box of code from the Like Button Configurator. You’ll have to return to your other browser window or tab to find it. This is the code in the box beneath “Step 3.”
    • You can copy the text by highlighting it, then pressing Control+C or  Command+C.
  2. Image titled Add Facebook Like to Blogger Step 19
    2
    Click Layout back in Blogger. It’s on the left side of the Blogger dashboard, just above “Template.”
  3. Image titled Add Facebook Like to Blogger Step 20
    3
    Click the 


This post first appeared on IT SOLUTIONS, please read the originial post: here

Share the post

How to Add Facebook Like to Blogger

×

Subscribe to It Solutions

Get updates delivered right to your inbox!

Thank you for your subscription

×