Skip to main content

Adding Social Networking Buttons To Your Blog

Look carefully at the bottom of this post - and other posts in this blog. Right below "Topics", do you see "Share This Post!"? The "Share This Post!" section is what we call Social Networking. It lets your readers - hopefully those who have social networking memberships - bookmark your posts in the social networking services. In my blogs, we currently have De.licio.us, Digg, FaceBook, StumbleUpon, Technorati, and Twitter.

If one of your readers has a membership in one of those services, and wishes to share your post with other members, he / she has only to click on the icon, or the adjacent text link, and the selected service will bookmark the post (subject to the normal site bookmarking procedure, which varies by service).

In order to make that happen, the icon / shortcut contains code which automatically picks up the Title and / or URL of the post being viewed.

The code has to be part of the post template, to pick up the Title / URL, which are XML variables. This works only for a Layouts template, and requires manual installation into the template code. No HTML gadget here, and no GUI Page Elements wizard. Sorry.

You have to edit the template code, and insert this into the post footer, which is part of the post template.

Here is the current XML code involved in my "Share This Post!" paragraph. There are 12 sections of code, here - 6 buttons, and 6 text links - look at the "Share This Post!" section below this post. All 12 sections have to be part of one logical line, so they display as one line below each blog post (though possibly flowing onto another physical line, if the post column width requires). Note that if you wish to copy this code, you'll need to be very careful with your copying, and check afterwards (and remove) any gratuitous line breaks, which may or may not be present!

<p class='post-footer-line post-footer-line-3'>
<strong>Share This Post! </strong> <a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Del.icio.us'><img alt='Del.icio.us' border='0' height='16' src='http://3.bp.blogspot.com/_pzC_7PLtN-0/SXDK01IpJ6I/AAAAAAAAB-0/4AiDPosezwY/s400/De.licio.us+Icon.gif' width='16'/></a> <a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Del.icio.us'>Del.icio.us</a> <a expr:href='"http://www.digg.com/submit?url=" + data:post.url + "&title=" + data:post.title + "&phase=2"' target='_blank' title='Digg'><img alt='Digg' border='0' height='14' src='http://4.bp.blogspot.com/_pzC_7PLtN-0/SXDK08-GbMI/AAAAAAAAB-s/p5LMcEOR6Jk/s400/Digg+Icon.gif' width='16'/></a> <a expr:href='"http://www.digg.com/submit?url=" + data:post.url + "&title=" + data:post.title + "&phase=2"' target='_blank' title='Digg'>Digg</a> <a expr:href='"http://www.facebook.com/share.php?u=" + data:post.url' target='_blank' title='Facebook'><img alt='Facebook' border='0' height='16' src='http://2.bp.blogspot.com/_pzC_7PLtN-0/SXDK0jnR9vI/AAAAAAAAB-k/cB0CP-z6HSo/s400/Facebook+Icon.png' width='14'/></a> <a expr:href='"http://www.facebook.com/share.php?u=" + data:post.url' target='_blank' title='Facebook'>Facebook</a> <a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='StumbleUpon'><img alt='StumbleUpon' border='0' height='16' src='http://3.bp.blogspot.com/_pzC_7PLtN-0/SdqXhm2cUkI/AAAAAAAACG0/eJRZZc3lXzs/s320/StumbleUpon+Icon.gif' width='16'/></a> <a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='StumbleUpon'>StumbleUpon</a> <a expr:href='"http://technorati.com/cosmos/search.html?url=" + data:post.url' target='_blank' title='Technorati'><img alt='Technorati' border='0' height='16' src='http://4.bp.blogspot.com/_pzC_7PLtN-0/SXDK0QSE_YI/AAAAAAAAB-U/y-HDJyntbOE/s400/Technorati+Icon.gif' width='14'/></a> <a expr:href='"http://technorati.com/cosmos/search.html?url=" + data:post.url' target='_blank' title='Technorati'>Technorati</a> <a expr:href='"http://twitter.com/home/?status=Currently reading:" + data:post.url' target='_blank' title='Twitter'><img alt='Twitter' border='0' height='16' src='http://1.bp.blogspot.com/_pzC_7PLtN-0/SXDK0gJQmjI/AAAAAAAAB-c/AMQtMq7Cpcg/s400/Twitter+Icon.png' width='16'/></a> <a expr:href='"http://twitter.com/home/?status=Currently reading:" + data:post.url' target='_blank' title='Twitter'>Twitter</a>
</p>


Need I remind you to back up the template, before and after making this change?

You'll want to Edit Template HTML, and select "Expand Widget Templates". Find a section of code similar to:

<p class='post-footer-line post-footer-line-3'>
</p>


and add the above code, giving you:

<p class='post-footer-line post-footer-line-3'>
<strong>Share This Post! </strong> <a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Del.icio.us'><img alt='Del.icio.us' border='0' height='16' src='http://3.bp.blogspot.com/_pzC_7PLtN-0/SXDK01IpJ6I/AAAAAAAAB-0/4AiDPosezwY/s400/De.licio.us+Icon.gif' width='16'/></a> <a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Del.icio.us'>Del.icio.us</a>  <a expr:href='"http://www.digg.com/submit?url=" + data:post.url + "&title=" + data:post.title + "&phase=2"' target='_blank' title='Digg'><img alt='Digg' border='0' height='14' src='http://4.bp.blogspot.com/_pzC_7PLtN-0/SXDK08-GbMI/AAAAAAAAB-s/p5LMcEOR6Jk/s400/Digg+Icon.gif' width='16'/></a> <a expr:href='"http://www.digg.com/submit?url=" + data:post.url + "&title=" + data:post.title + "&phase=2"' target='_blank' title='Digg'>Digg</a> <a expr:href='"http://www.facebook.com/share.php?u=" + data:post.url' target='_blank' title='Facebook'><img alt='Facebook' border='0' height='16' src='http://2.bp.blogspot.com/_pzC_7PLtN-0/SXDK0jnR9vI/AAAAAAAAB-k/cB0CP-z6HSo/s400/Facebook+Icon.png' width='14'/></a> <a expr:href='"http://www.facebook.com/share.php?u=" + data:post.url' target='_blank' title='Facebook'>Facebook</a>  <a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='StumbleUpon'><img alt='StumbleUpon' border='0' height='16' src='http://3.bp.blogspot.com/_pzC_7PLtN-0/SdqXhm2cUkI/AAAAAAAACG0/eJRZZc3lXzs/s320/StumbleUpon+Icon.gif' width='16'/></a> <a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='StumbleUpon'>StumbleUpon</a>  <a expr:href='"http://technorati.com/cosmos/search.html?url=" + data:post.url' target='_blank' title='Technorati'><img alt='Technorati' border='0' height='16' src='http://4.bp.blogspot.com/_pzC_7PLtN-0/SXDK0QSE_YI/AAAAAAAAB-U/y-HDJyntbOE/s400/Technorati+Icon.gif' width='14'/></a> <a expr:href='"http://technorati.com/cosmos/search.html?url=" + data:post.url' target='_blank' title='Technorati'>Technorati</a>  <a expr:href='"http://twitter.com/home/?status=Currently reading:" + data:post.url' target='_blank' title='Twitter'><img alt='Twitter' border='0' height='16' src='http://1.bp.blogspot.com/_pzC_7PLtN-0/SXDK0gJQmjI/AAAAAAAAB-c/AMQtMq7Cpcg/s400/Twitter+Icon.png' width='16'/></a> <a expr:href='"http://twitter.com/home/?status=Currently reading:" + data:post.url' target='_blank' title='Twitter'>Twitter</a>
</p>


Note that this example puts the code into the third line of the footer. You're welcome to put your code into any line that you wish.

Just do it, Save Template, and test it, and backup the template, before and after making the change (yes, I said that above too!).

Comments

stephen r. said…
I am trying to utilize this code, but alas, it does not work for me.

The template I have has < div class='post-footer-line post-footer-line-3' instead of < p.... (no spaces after the < ... I just couldn't post it otherwise...)

I read something about this type of thing not working well with AdSense, so I disabled it, still nothing.

I would love to integrate this into my site, but am not a hard-core programmer and am having some difficulty. Please advise.

Thank you for this resource!

(PS - I did check for bogus line breaks) ;)
Chuck said…
Stephen,

This would be a great discussion item in BHF: How Do I?, or in Nitecruzr Dot Net - Blogging. We'll be posting a bit of code, and doing that here isn't done easily.

Popular posts from this blog

Custom Domain Migration - Managing The Traffic

Your blog depends upon traffic for its success.

Anything that affects the traffic to your blog, such as any change in the URL, affects the success of your blog. Publishing the blog to a custom domain, like renaming the blog, will affect traffic to your blog. The effects of the change will vary from blog to blog, because of the different traffic to every different blog.Followers. People who find your blog because of recommendations by other people.Search engines. Robotic processes which methodically surf your blog, and provide dynamic indexing to people who search for information.Subscribers. People who read your content from their newsfeed reader, such as the dashboard Reading List.Viewers. People who read your content from their browser.No two blogs are the same - and no two blogs will have the same combinations of traffic sources.

Stats Components Are Significant, In Their Own Context

One popular Stats related accessory, which displays pageview information to the public, is the "Popular Posts" gadget.

Popular Posts identifies from 1 to 10 of the most popular posts in the blog, by comparing Stats pageview counts. Optional parts of the display of each post are a snippet of text, and an ever popular thumbnail photo.

Like many Stats features, blog owners have found imaginative uses for "Popular Posts" - and overlook the limitations of the gadget. Both the dynamic nature of Stats, and the timing of the various pageview count recalculations, create confusion, when Popular Posts is examined.