How to Add Facebook Like to Blogger

Last Updated: April 5, 2024 Tested

This wikiHow 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.

Part 1

Part 1 of 3:

Creating a Like Button

Go to https://developers.facebook.com/docs/plugins/like-button . You can use any modern web browser, such as Chrome or Safari.
It’s in the third section of the page.

Advertisement
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.
You’ll see a preview of each style when its selected.
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]
X
Research source} ”
The button preview beneath the configurator will show you what each size looks like.
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]
X
Research source}
Now you’ll see two boxes containing HTML code you must paste into different areas of Blogger.

Advertisement

Part 2

Part 2 of 3:

Adding the Code to Your Template

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.
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 .
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]
X
Research source}
- 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 “ & ”. 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
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 & .
Advertisement

Part 3

Part 3 of 3:

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 .
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.
You’ll have to scroll down a little bit to find it.
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.
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.

Advertisement

Community Q&A

Search

Add New Question

Question

How do I add social media share buttons under posts in Blogger?

Community Answer

Click the "Layout" link on your Blogger dashboard, then click "edit" at the bottom of the box called "Blog Posts." You can choose to show or hide all social media buttons by clicking the checkbox next to "Show Share Buttons."

Thanks! We're glad this was helpful.
Thank you for your feedback.
If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
Yes No

Not Helpful 0 Helpful 14
Question

There is no template below layout, Instead there is theme. Ant ideas?

Osama Shahzad

Community Answer

Template has been renamed as theme. You can find the "Edit HTML" option in theme now.

Thanks! We're glad this was helpful.
Thank you for your feedback.
If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
Yes No

Not Helpful 1 Helpful 7

Ask a Question

200 characters left

Include your email address to get a message when this question is answered.

Submit

Video

Things You'll Need

Blogger account
Facebook account

You Might Also Like

[1]

[2]

[3]

How to Add Facebook Like to Blogger

Steps

Creating a Like Button

Adding the Code to Your Template

Adding the Button to Your Layout

Community Q&A

Video

Things You'll Need

You Might Also Like

References

About this article

Reader Success Stories

Is this article up to date?

You Might Also Like

Explore Categories