How to Add Facebook Like to Blogger
Go to https://developers.facebook.com/docs/plugins/like-button., Scroll down to Like Button Configurator., Enter your blog’s address into the “URL to Like” box. , Enter your desired plugin width into the “Width” box., Select a button style from the...
Step-by-Step Guide
-
Step 1: Go to https://developers.facebook.com/docs/plugins/like-button.
You can use any modern web browser, such as Chrome or Safari. -
Step 2: Scroll down to Like Button Configurator.
It’s in the third section of the page. ,, 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.” , 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., Now you’ll see two boxes containing HTML code you must paste into different areas of Blogger. , 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. , 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. , 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. , The code must be pasted after the line that begins with <body, preferably on the very next line.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. , 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"” , 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 &. , 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.” , 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. , 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. -
Step 3: Enter your blog’s address into the “URL to Like” box.
-
Step 4: Enter your desired plugin width into the “Width” box.
-
Step 5: Select a button style from the “Layout” menu.
-
Step 6: Select an action from the “Action Type” menu.
-
Step 7: Select a size from the “Button Size” menu.
-
Step 8: Check or uncheck the “Include Share Button” box.
-
Step 9: Click Get Code.
-
Step 10: Sign in to https://www.blogger.com.
-
Step 11: Click Template.
-
Step 12: Back up your blog template.
-
Step 13: Click Edit HTML.
-
Step 14: Copy the code from the first box of the Facebook Like Button Configurator.
-
Step 15: Paste the code into your Blogger HTML code.
-
Step 16: Replace every “&” in the pasted code with “&”.
-
Step 17: Click Save Template.
-
Step 18: Copy the second box of code from the Like Button Configurator.
-
Step 19: Click Layout back in Blogger.
-
Step 20: Click the Add a Gadget button where you want the button to appear.
-
Step 21: Select HTML/JavaScript.
-
Step 22: Type facebook under “Title.”
-
Step 23: Paste the copied code into the “Content” box.
-
Step 24: Click Save.
-
Step 25: Click Save Arrangement.
Detailed Guide
You can use any modern web browser, such as Chrome or Safari.
It’s in the third section of the page. ,, 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.” , 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., Now you’ll see two boxes containing HTML code you must paste into different areas of Blogger. , 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. , 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. , 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. , The code must be pasted after the line that begins with <body, preferably on the very next line.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. , 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"” , 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 &. , 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.” , 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. , 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.
About the Author
Catherine James
Dedicated to helping readers learn new skills in organization and beyond.
Rate This Guide
How helpful was this guide? Click to rate: