How To Add Like Button (Like / Share) To Blogspot / Blogger

How To Add Like Button (Like / Share) To Blogspot / Blogger? read now:

Step 1 How To Add Like Button (Like / Share) To Blogspot / Blogger

If you want to simplify, skips to the step 8. 

Otherwise go to the creation of the Facebook Like button page.

Step 2

1. In "URL to Like" put only http://exemplo.com (we already handle this)
2. Disable "Send Button" (otherwise it will be more complex insert the Like button - is not explained in this tutorial)
3. Customize the remaining several options as required

Step 3

Click on "Get Code" tab and choose the "IFRAME".

In this step, if not an authorized developer will receive a message similar to: "Only authorized developers can be added to this application ...". You can do this confirming via mobile phone (cellular) or credit card (if using this technique, it is always better to use a virtual card).

Step 4

The window appears, copy the contents of the top text box.

Step 5

Paste the code in Notepad.

Step 6

With some care (wrong and will not work character), make the following substitutions:

1. src = for expr: src = '
2. http://exemplo.com by  "+ Date: + post.url"
3. height = ?? "by height = ??" '

for example:

Original code:

<iframe scrolling = "no" frameborder = "0" style = "border: none; overflow: hidden; width: 450px; height: 35px;" allowTransparency = "true"> </ iframe>

Changed code:

<iframe allowTransparency = 'true' expose: src = '& quot; http: //www.facebook.com/plugins/like.php href = & quot; + Date: post.url + frameborder = "0" scrolling = 'no' style = 'border: none; overflow: hidden; width: 450px; height: 35px; '> </ iframe>

Step 7

Let Notepad aside for now ...

Step 8

Go to the Blogger control panel.

Step 9

Click on "Design" of the desired blog.

Step 10

Click the "Edit HTML" (Edit HTML).

Powered image by: masyadi.com

Step 11

Make a template of the current backup (in case something goes wrong). To do this, click "Transfer complete model" (Download full template).

Step 12

Ensure that "Expand widget templates" (Expand widget templates) is active.

Step 13

Find text <div class = 'post-footer "> in the text box. 

(To do this CTRL + F and search for that text.)

Step 14

Enter the code has changed from Step 6 or if you have changed the code, copy it from Notepad.

Step 15

Soon after the text  <div class = 'post-footer ">, paste the copied code.

Step 16

Test the changes by clicking on "Preview".

If there are errors or are not confident, click "Cancel Changes" and stop there. Make your questions in the comments if this happens.

17th Step

When satisfied, click "Save Template" and see the results on your blog!. Good .. this took some work but worth it!

Tweet

Sign up here with your email address to receive updates from this blog in your inbox.