Thursday, July 07, 2011

Adding Share Buttons To Your Posts

Blogger has created a wealth of standardized templates, and out in the Blogosphere you can find a wealth of Blogger XML templates (Some of my favorites places are in the right sidebar). But I've noticed that a lot of them don't activate the Share Buttons for posts. You can see mine at the bottom of this post.
This code is built into all XML templates, so all you have to do is activate it. First off let's go check to see if you have the function turned on. Go to your Design Tab. The Page Elements page opens by default. See the edit button on the Blog Post box (#1) in the image to the left here?
When you click there it will open up a "Configure Post" box. That has a plethora of things that you can turn off and on for your posts, and at the bottom of the page it allows you to organize how they are laid out on the page. (Now sometimes that part doesn't work at planned, so that's the reason for the res of this post.)

Once you have the Share Buttons checked as in the image to the right, go check your blog page. If you see the little list of boxes that I have at the top of this post...or below my signature...then you're good to go! If not *sigh* then we have some more work to do. We're going into the template HTML.

I know...I know ...this is not for the faint at heart, but I have confidence that you can do it, if you follow the instructions to the letter. First thing, click the Design Tab, Then click on the Edit HTML tab. (You will see that marked as #2 in the image above.

When the box of code opens you are going to check the little link above the box that says "Expand Widget Template.  Now right here I must stop you and say, before messing with your template... "BACKUP A COPY" of your template to your computer. Right click on the code box and "select all", then open a NotePad doc (NOT Word.doc) and paste the template into NotePad and save it on your computer where you can find it in case you have a catastrophic failure of your brain connecting with your fingers on the keyboard :-). that we have that out of the way...use Ctrl-F to open a Find box at the bottom of your screen like in the picture to the right. What we are going to look for is the post-footer lines (designated lines at the bottom of a post). There are usually 3 of them. Write  post-footer-line post-footer-line-3 in the Find box (like I have circled in green.) It will actually find and highlight those words. Those words are ABOVE the words that are highlighted in blue because I skipped that picture to save space. When you find the footer-line 3...or 2...or 1 (You can experiment where you stick it in those three lines), you are going to insert this section of code:

<span class="post-share-buttons">< b:include data="post" name="shareButtons">< /b:include ></span>

Then insert the code right where I stuck it in the picture. (The piece of code is in blue.)

Now...another important point...Click the PREVIEW button to see the change. If the preview shows the Share buttons at the bottom of the post, then close the preview and click Save Template.

If the preview does not open...or the buttons are not there when the preview does DISCARD Edits.

And start again. If you get me.



Post a Comment