August 13, 2011

How To Add Large Share Buttons To Your Blog Posts

Social networking now plays a major role in getting traffic to a blog and it all becomes better when your readers can easily share or bookmark your blog posts on their favourite social network.
This post explains how to add large share buttons to your blog posts. This includes facebook, twitter, digg, delicious and the whole rest of them.

1. Log in to your blogger account, click on design, then edit html.

2. Always remember to back up your template so you can restore it in case something goes wrong.

3. Click on Expand widget template

4. Press CTRL + F and search for this code:


<data:post.body/>


If you're using a magazine style template or have more than one of this code in your template, locate the one that actually contains the post body on blog post pages. If you're confused about the right one to use, search for this code instead:


<div class='post-footer-line post-footer-line-2'/>


5. Just below that, paste this code:



<div style='border: 1px #3b5998; background-color: #eff3fa;'><div align='center'><b:if cond='data:blog.pageType == &quot;item&quot;'><strong>&#9829; CONSIDER SHARING THIS POST WITH YOUR FRIENDS IF YOU LIKE IT &#9829;</strong> <br/> <a class='opacity' expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Share this post Facebook'><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQUzYjOFqpUibvsR_qoM5qzC9WqsMT1E6waXg_ml9wsePHGinn60pD0sg06REnYt2vR0xB4Frbwy3ds5ZznSvEo-SzZGvY-ZCqGo_W3C3x5exaMQlY63L9EIsua8mtp3KCAOJiondNcg/s1600/facebook_icn.png'/></a> <a class='opacity' expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Tweet About This Post'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO_mnAq1K7Fu8ZPuHBtP_914gePHAXVpyY8O7XYTA-D0akUnFVzrTM5_Sc87C8bJ87wc0OqzGynHKaenUcWm80JYyh7QCwdw50pgSnba7MO9QcGr29CpY_tGDRWM-cV8JF-XqXDQ0onQ/s1600/twitter_icn.png'/></a> <a class='opacity' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='StumbleUpon This Post'><img alt='StumbleUpon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSTXkl4G1maIpv49I0t4XZ2RgnvAiR4-_vSCJbcTZxMP-yQ756LvotP-DwDBj6iRXlZuUhOylDYFGOuTEBnU_ZqzYeoloPlleJidyOkrFdg0egwDdCh-6fy6CbSqpUK-fFeIF-FfsBsw/s1600/stumbleupon_icn.png'/></a> <a class='opacity' expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Digg This Post'><img alt='Digg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiULm1t2MzWzAX-Ghh6m_UsQJvtyyeL334CovK8Szzw9piZnPMZL6IiEkCHpyULk4QkOXnMZoFK4XaOiSJyfmIv5Ae95N_MZ9LLyEG6FLiR6THU3PCl-1jwwXfbi8KjWHBo5_tyYncrZA/s1600/digg_icn.png'/></a> <a class='opacity' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Add to Delicious'><img alt='Delicious' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipSXtqddTzhhIOfoSDsT2lJg4lZbxW3TYPNjAOmXOHhZ3riq5aEMXHRf3701UJI4CPeAntZ6zhl35Tl_ZLdooTreCVgi3nmqRFxbb8gPRh2OEud7P_updHBrLOg_7y1ou_wtHHQA1aWA/s1600/delicious_icn.png'/></a> <a class='opacity' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Reddit this post'><img alt='Reddit' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwe3JDqT6NRB-hyHnuowoPOQuoYLjkINz0E0Uek_l_KXXneTJqxRteUwDj-0jeRD9a0GWuHzjvS1BUGc2kbqwuyD1H8Ogj2g7xtn5fD1mUqUQCvn5Erf4iEzMqPm8vD8kRwyWrUOnEZA/s1600/reddit_icn.png'/></a> <a class='opacity' expr:href='&quot;http://www.technorati.com/faves?add=&quot; + data:post.url' target='_blank' title='Add this to Technorati Favs'><img alt='Technorati' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8QilHUS0p8Y5OwRfQrKHD-0IocqzLI0tOx8icReLaD3jax77qzdigj8jUuvJYWF2LwkHtZFREvb5p6NNxW3B1ANkdLLCH6bCZ5PEu7lN3x72QMkfkhpi_HndDp-buKryT7byrWiFBrg/s1600/technorati_icn.png'/></a> <a class='opacity' expr:href='&quot;http://www.mixx.com/submit?page_url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Mixx it'><img alt='Mixx' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyJryWLgFP8dkgqSN_1hVViUF-0gs5a80xSONfdapnEm2nL9FLrNxOzye3Z3NHFwc7pNHnj30cpa5Z60SENCyNSw3VxGGT1AtBRG22ZvkZoVU0CC_yoUvlwBJwD6Y6rtGOrI9cp_P0rg/s1600/mixx_icn.png'/></a> <a class='opacity' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Share on Linkedin'><img alt='Linkedin' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUbJwL_idNLg1TjyMvULizTGbSUjwxRFm0Itqr-oRGxOWofhcXc_XFKplBNhxfIOJX_JeH7SVz0KxtbJ6Wq60QAeJhBZCNpvlWqES7dD3nrXkN4iJ_nM9_6wt7X7Nj8wx0slVG2fW4ug/s1600/linkedin_icn.png'/></a><br/><small>[<a href='http://www.doncaprio.com/2011/04/add-facebook-large-share-button.html'>Get this Widget</a>]</small></b:if></div></div>



6. Save your template.

Now check any of your blog template and you can now see the large share buttons with facebook, twitter, digg, delicious, reddit, technorati, linkedin, mixx and stumbleupon.



You can as well style the icons with css.




Stay Connected With Free Updates

Subscribe via Email

11 comments:

Sandra Wilkes says:

I love this but can't get it to work. I copy-paste the code in the correct place (Blogger) but when I preview it's not there...no change. Any ideas? Thanks.
Sandra

Don Caprio says:

I checked your blog just now and it's there. It's only gonna show on blog posts, not on the homepage. It's working quite fine

BAZYLI says:

i love it.. Easy to work. thank you for share.- by SEO news and tips

newsReader says:

thanks. it works good. you don't have the google +1 button on it. it would it was there.
http://google-plus-network.blogspot.com

newsReader says:

how do you remove it from the blog/tamplate?.

Don Caprio says:

You need to only locate the code and delete it. thanks...gonna add the google + soon

Egbuna Ferdinand says:

i so much love this,keep it up d Doni so much love this,keep it up d Don

Unknown says:

Please @ Doncaprio add the google+ sharing button na

Don Caprio says:

You can use this share buttons with google plus instead

http://www.doncaprio.com/2011/09/sidebar-floting-share-buttons-large.html

It's even more efective than the one posted here

google plus social network says:

Thnks alot for this

THYAGU says:

very usefull dude.. thnxx love ur blog....

www.thyagu7.blogspot.com

Post a Comment

100% Uptime, Unlimited Space, Unlimited Bandwidth