Add Facebook Like to Blogger

This article teaches you how to 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.

Steps

Creating a Like Button

  1. Go to https://developers.facebook.com/docs/plugins/like-button. You can use any modern web browser, such as Chrome or Safari.
  2. Scroll down to Like Button Configurator. It’s in the third section of the page.
  3. Enter your blog’s address into the “URL to Like” box.
  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. Select a button style from the “Layout” menu. You’ll see a preview of each style when its selected.
  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. Select a size from the “Button Size” menu. The button preview beneath the configurator will show you what each size looks like.
  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. Click Get Code. Now you’ll see two boxes containing HTML code you must paste into different areas of Blogger.

Adding the Code to Your Template

  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. Click Template. It’s on the left side of the screen, near the bottom of the menu.
  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. Click Edit HTML. It’s just beneath the preview image of your blog.
  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. Paste the code into your Blogger HTML code. The code must be pasted after the line that begins with <body, 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. Replace every “&” in the pasted code with “&amp;”. 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&amp;version=v2.8"”
  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 &amp;.

Adding the Button to Your Layout

  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. Click Layout back in Blogger. It’s on the left side of the Blogger dashboard, just above “Template.”
  3. Click the Add a Gadget button where you want the button to appear.
    • In most cases, you’ll want the button to appear in a header or footer.
  4. Select HTML/JavaScript. You’ll have to scroll down a little bit to find it.
  5. Type facebook under “Title.”
  6. Paste the copied code into the “Content” box. You can do this by clicking into the box and pressing Control+V or ⌘ Command+V.
  7. Click Save. Now you’ll see a gadget box called “facebook.”
    • Click Preview at the top right corner of the page to make sure the button appears where it should. If you don’t like the location, you can drag the “facebook” box to one of the other sections in your layout.
  8. Click Save Arrangement. It’s at the top right corner of the screen. Now, when someone enjoys your blog, they can easily share it with all of their Facebook friends.


Things You'll Need

  • Blogger account
  • Facebook account

Related Articles

Sources and Citations

  1. ↑ http://www.niemanlab.org/2011/02/like-share-and-recommend-how-the-warring-verbs-of-social-media-will-influence-the-news-future/
  2. ↑ https://vimm.com/like-vs-share-facebook/
  3. ↑ https://developers.facebook.com/docs/plugins/like-button
Retrieved from "https://kipkis.com/index.php?title=Add_Facebook_Like_to_Blogger&oldid=349918"