Add Social Media Buttons Below Blogger Posts

So Far we added social media buttons below posts in different forms and today we have yet another cool design with our Flapper Icons in it. These social icons are arranged in symmetrical order and size with image opacity effect added to each by default. The social buttons go fade on mouse hover and stick to the bottom of all your posts thus increasing the traffic to your blog. The steps of installing it are really simple.

Live Demo

How To Add Social Media Sharing Icons In Blogger?

To add these icons below posts kindly follow these steps,

Go To Blogger > Design > Edit HTML

Backup your template

Click the "Expand Widgets Template" box

Search for this,

]]></b:skin>

and just above it paste the Opacity code below,

/*------------ MBT Image Opacity--------------*/

.Fadein img
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;

.Fadein:hover img
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;

5. Next search for this code,

<data:post.body/>

and just below it paste the following code,

<b:if cond='data:blog.pageType == "item"'>

<center>Thanks For Making This Possible! Kindly Bookmark and Share it. 
<a class='Fadein' expr:href='"http://technorati.com/faves?add=" + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' height='64px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW4L9zIl6ty_hgC26iWEW2NTp4nBuozfo_sVNreyWBA5AYgoHVsziBbCwxTBO5O6TliAyiLw-xFBwwRYwIqZPsFWQtwtRjknMtWkalnh8QLw9FuB9HNTN8dNNfouWixifVnZwLm1yiyjY/s400/TECHNORATI1.png ' width='64px'/></a>

<a class='Fadein' expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url' rel='external nofollow' target='_blank'><img alt='Digg This' height='80px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDU2TMmZx9rFWe2DWPkqS6ZkDul-bP-VkCq2uOuZC-KgRKgVMMvjzQiSbulCNlOVOALVZswgXebjL7Y4Aguhjh07Akx3FYJmVDjqtJMh4TM4sF-DUqjhyN5DnOeC4rWulKSoSo0cp9xec/s400/DIGG1.png ' width='80px'/></a>

<a class='Fadein' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' height='100px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi60_iZWzbGr8YJqzzZMEVZXcaHrBqvV_jNLZOpMTpUHDF8iIxI1stSW0Wq5-6f3hlQ9bmhYsNdp-6LYskLbovTJCsPQaPmHlNGGFeKXWcqxUDd7gy0y4qEnADUHsi68AuzTKO-Y4oG8ss/s400/stumble1.png' width='100px'/></a>

<a class='Fadein' expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' height='100px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG_-6eRPdL_OfEuDqt_YdUM7RE8F7woqX5kjabR8ym4tIzbt2u-05eolSyTY4N41NwviI3GH5kP0e9qgiIzZTYk9K3BEAYQh1uUGxyuHBHgjeAPqIv2Kl4v6F5K3jWTbpBdnSppsXg4Uc/s400/REDDIT1.png' width='100px'/></a>

<a class='Fadein' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook' height='80px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv-76QmbX0hfSOELL5htrogwz_RYAnbJrfioK1ifI68cCGUrQNZwUCl4yOYhk2NIX7E4bWSKSHonDLTiKpQBmXOfb192Ze7Rr8ycCmJRCWHP5JsGqt7cu28lXGPW_14_xfVWxVhhVnfjE/s400/FACEBOOK1.png ' width='80px'/></a>

<a class='Fadein' expr:href='"http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Twitter' height='64px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikWibkOQSmfFeJzv4o_s6OCrHhOlgHj6v__HQVeUAB-SwoCvvsBSSjbdcQuAvfN61LhNN0HS6ZIofvasi4dGo11n_v5KDwF_YD0qMebfTROczSPEwUHZuXyhSi1NWcY9GY6WQjYi21PHw/s400/TWITTER1.png' width='64px'/></a></center>

</b:if>

6. Save your template and you are done!

Visit your blogs to see a beautiful change. :) You may also like these social networking buttons and widgets,

Flapper Social Networking Widget

Social Networking Icons - Triangular style

Social Networking Icons - Circular Style

And Finally The Oval Style Social Icons

12
comments

PLEASE NOTE:

We have Zero Tolerance to Spam.

Chessy Comments and Comments with
'Links'
will be deleted immediately upon our review.

(function() {
var items = ['id': '4934134708380468321', 'body': 'Done :) Just added titles myself. And the img alt in Reddit is wrong :Px3cbr /x3ex3cbr /x3eBtw there is a news that Google has blocked all co.cc domains from search.', 'timestamp': '1309586531327', 'permalink': 'https://www.mybloggertricks.com/2011/07/add-social-networking-buttons-below.html?showCommentx3d1309586531327#c4934134708380468321', 'author': 'name': 'samsexy98', 'avatarUrl': '//1.bp.blogspot.com/_nZ5rmzFLGQU/TCLaIA50nWI/AAAAAAAAABA/ORiIyqTjXXk/S45-s35/Batman_Arkham_Asylum_1920x1080%2BHDTV%2B1080p.jpg', 'profileUrl': 'https://www.blogger.com/profile/13597329800723396260', 'displayTime': 'Jul 2, 2011, 11:02:00 AM', 'deleteclass': 'item-control blog-admin pid-1680143730', 'id': '5281211269501121475', 'body': 'Assalam-o-Alaikum Brother. I Tried To Find This Code That Is Below. But I Found Nothing. Whatx26#39;s Problem With Me???', 'timestamp': '1318170752380', 'permalink': 'https://www.mybloggertricks.com/2011/07/add-social-networking-buttons-below.html?showCommentx3d1318170752380#c5281211269501121475', 'author': 'name': 'Assees Dar', 'avatarUrl': '//lh3.googleusercontent.com/zFdxGE77vvD2w5xHy6jkVuElKv-U9_9qLkRYK8OnbDeJPtjSZ82UPq5w6hJ-SAx3ds35', 'profileUrl': 'https://www.blogger.com/profile/11470857188858888873', 'displayTime': 'Oct 9, 2011, 7:32:00 PM', 'deleteclass': 'item-control blog-admin pid-909321973', 'id': '1650199745746000547', 'body': 'Assalaam-O-Alaikum bro. This Didnx26#39;t Work For Me? What I Have To Do Now?', 'timestamp': '1323685237990', 'permalink': 'https://www.mybloggertricks.com/2011/07/add-social-networking-buttons-below.html?showCommentx3d1323685237990#c1650199745746000547', 'author': 'name': 'Assees Ahmed Dar', 'avatarUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsKwYq_2rTEEXHQdAEZSLGZWnYJRZU3NY0KteXu4ZXjx9ID8FiItfVAe3GFh_ISjfNjSmgAoTkFQL9IiAnQ92OzaqwJUgx_VjrJC7Ur6Ra8xQ8lBCX-adkJl-uSeAjQATPHiCgum8lq-g/s35/taj-mahal%255B1%255D.jpg', 'profileUrl': 'https://www.blogger.com/profile/04353237615105558729', 'displayTime': 'Dec 12, 2011, 3:20:00 PM', 'deleteclass': 'item-control blog-admin pid-579434502', 'id': '3485910699514752448', 'body': 'Can you help me how to change read more link to a beautifful x26quot;read morex26quot; button in wordpress', 'timestamp': '1324567126970', 'permalink': 'https://www.mybloggertricks.com/2011/07/add-social-networking-buttons-below.html?showCommentx3d1324567126970#c3485910699514752448', 'author': 'name': 'ravi', 'avatarUrl': '//lh3.googleusercontent.com/zFdxGE77vvD2w5xHy6jkVuElKv-U9_9qLkRYK8OnbDeJPtjSZ82UPq5w6hJ-SAx3ds35', 'profileUrl': 'https://www.blogger.com/profile/03375145289760893625', 'displayTime': 'Dec 22, 2011, 8:18:00 PM', 'deleteclass': 'item-control blog-admin pid-1464274550', 'id': '2779960221261521842', 'body': 'Can you help me how to change read more link to a beautifful x26quot;read morex26quot; button in wordpress', 'timestamp': '1324567737652', 'permalink': 'https://www.mybloggertricks.com/2011/07/add-social-networking-buttons-below.html?showCommentx3d1324567737652#c2779960221261521842', 'author': 'name': 'ravi', 'avatarUrl': '//lh3.googleusercontent.com/zFdxGE77vvD2w5xHy6jkVuElKv-U9_9qLkRYK8OnbDeJPtjSZ82UPq5w6hJ-SAx3ds35', 'profileUrl': 'https://www.blogger.com/profile/03375145289760893625', 'displayTime': 'Dec 22, 2011, 8:28:00 PM', 'deleteclass': 'item-control blog-admin pid-1464274550', 'id': '7163563931375960458', 'body': 'Hey!x3cbr /x3eBeen searching for awhile x26amp; I love this!x3cbr /x3eIsnt there a way to make this show up on the home page under the posts too? Something about removing x3cbr /x3ebut I am not sure. I am in no way skilled at this. Just a rumor I heard.x3cbr /x3ex3cbr /x3eThanks!', 'timestamp': '1326907311956', 'permalink': 'https://www.mybloggertricks.com/2011/07/add-social-networking-buttons-below.html?showCommentx3d1326907311956#c7163563931375960458', 'author': 'name': 'Monique', 'avatarUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQZJmwemTl1GqEM_LRIvFqKioP81WNKDkfJVUdrOcof1VMV-9jnGnhHCIg9ppy1pGMc91gNX0HuM4eTeGsF2UePu4PP8LUyJNPi_NgqJbcTADdMmmMZdnrVNFfl5-wtveP9ncdp60uR7o/s35/me.jpg', 'profileUrl': 'https://www.blogger.com/profile/09634178544793390871', 'displayTime': 'Jan 18, 2012, 10:21:00 PM', 'deleteclass': 'item-control blog-admin pid-426841878', 'id': '7118452827535752516', 'body': 'Thanks, It worked for me. My name is Muhammad also :) .I have some crawl errors in my blog: I wish you can help http://scienceuniverse101.blogspot.com/', 'timestamp': '1328531993259', 'permalink': 'https://www.mybloggertricks.com/2011/07/add-social-networking-buttons-below.html?showCommentx3d1328531993259#c7118452827535752516', 'author': 'name': 'aboabdullah.mosa', 'avatarUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicIVtO0eoFzT3VK8QFyM8Rup6IbQ4Y_YfFx5C1Zu6Ex_4sGVnFnleLhiRlYYAcVexTdf1rSeWyjl96N_vHGSObDYmp8739EYiNn6D4jxIdN9pgSnjH-_Wfpxo2doG6bkQAjqZX9Ph6PM8/s35/ems510.jpg', 'profileUrl': 'https://www.blogger.com/profile/03975442423731732945', 'displayTime': 'Feb 6, 2012, 5:39:00 PM', 'deleteclass': 'item-control blog-admin pid-984123913', 'id': '2983110695113703701', 'body': 'Can you please tell me the code for this if I want to make pinterest as well. Thank you :)', 'timestamp': '1335698848767', 'permalink': 'https://www.mybloggertricks.com/2011/07/add-social-networking-buttons-below.html?showCommentx3d1335698848767#c2983110695113703701', 'author': 'name': 'Noor', 'avatarUrl': '//2.bp.blogspot.com/-agguDt2TE24/T32NiUtl_zI/AAAAAAAAK0o/Fc6X6A6y87s/s35/hair.png', 'profileUrl': 'https://www.blogger.com/profile/10870448171535375987', 'displayTime': 'Apr 29, 2012, 4:27:00 PM', 'deleteclass': 'item-control blog-admin pid-1350829419', 'id': '4421646260380014430', 'body': 'Asalam Alaykum, I will be using images that are 22x22 and only pinterest, twitter and facebook oh and google+ and I want them over to the right. I have been trying to do this for days I would really appreciate if you could help me, thank you.', 'timestamp': '1335699954610', 'permalink': 'https://www.mybloggertricks.com/2011/07/add-social-networking-buttons-below.html?showCommentx3d1335699954610#c4421646260380014430', 'author': 'name': 'Noor', 'avatarUrl': '//2.bp.blogspot.com/-agguDt2TE24/T32NiUtl_zI/AAAAAAAAK0o/Fc6X6A6y87s/s35/hair.png', 'profileUrl': 'https://www.blogger.com/profile/10870448171535375987', 'displayTime': 'Apr 29, 2012, 4:45:00 PM', 'deleteclass': 'item-control blog-admin pid-1350829419', 'id': '1996285935983817971', 'body': 'Can you add a button for Google+1 ?x3cbr /x3eThanks!', 'timestamp': '1338758246578', 'permalink': 'https://www.mybloggertricks.com/2011/07/add-social-networking-buttons-below.html?showCommentx3d1338758246578#c1996285935983817971', 'author': 'name': 'Blog', 'avatarUrl': '//lh3.googleusercontent.com/zFdxGE77vvD2w5xHy6jkVuElKv-U9_9qLkRYK8OnbDeJPtjSZ82UPq5w6hJ-SAx3ds35', 'profileUrl': 'https://www.blogger.com/profile/10644654048444525103', 'displayTime': 'Jun 4, 2012, 2:17:00 AM', 'deleteclass': 'item-control blog-admin pid-832867618', 'id': '6906827489492469136', 'body': 'Great! Thanks', 'timestamp': '1348240628288', 'permalink': 'https://www.mybloggertricks.com/2011/07/add-social-networking-buttons-below.html?showCommentx3d1348240628288#c6906827489492469136', 'author': 'name': 'Osama Zia', 'avatarUrl': '//lh6.googleusercontent.com/-bqv_ugxi8F0/AAAAAAAAAAI/AAAAAAAAAF4/jVIBya91JIw/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/01655263714887033611', 'displayTime': 'Sep 21, 2012, 8:17:00 PM', 'deleteclass': 'item-control blog-admin pid-1595743739', 'id': '6583653403070988607', 'body': 'How to search for the x26quot;]]x26gt;x26quot; and the x26quot;x26quot; codes ?? there is a lot of stuff and I am not able to search them !! Help me !!', 'timestamp': '1355931398716', 'permalink': 'https://www.mybloggertricks.com/2011/07/add-social-networking-buttons-below.html?showCommentx3d1355931398716#c6583653403070988607', 'author': 'name': 'Sandeep Singh', 'avatarUrl': '//lh5.googleusercontent.com/-t-WeeuSfaJk/AAAAAAAAAAI/AAAAAAAAAb8/1dVodQi0Hlg/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/09273920191253648252', 'displayTime': 'Dec 19, 2012, 8:36:00 PM', 'deleteclass': 'item-control blog-admin pid-903238101'];
var msgs = 'loadMore': 'Load more...', 'loading': 'Loading...', 'loaded': 'No more!', 'addComment': 'Add comment', 'reply': 'Reply', 'delete': 'Delete';
var config = 'blogId': '8193278726666811965', 'postId': '4881448565096048110', 'feed': 'https://www.mybloggertricks.com/feeds/4881448565096048110/comments/default', 'authorName': 'M. Mustafa Ahmedzai', 'authorUrl': 'https://www.blogger.com/profile/11681339458447132019', 'baseUri': 'https://www.blogger.com', 'maxThreadDepth': 2;
// 0)
cursor = parseInt(items[items.length - 1].timestamp) + 1;

var bodyFromEntry = function(entry)
if (entry.gd$extendedProperty)
for (var k in entry.gd$extendedProperty)
if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved')
return '' + entry.content.$t + '';

return entry.content.$t;

var parse = function(data)
cursor = null;
var comments = ;
if (data && data.feed && data.feed.entry)
for (var i = 0, entry; entry = data.feed.entry[i]; i++)
var comment = ;
// comment ID, parsed out of the original id format
var id = /blog-(d+).post-(d+)/.exec(entry.id.$t);
comment.id = id ? id[2] : null;
comment.body = bodyFromEntry(entry);
comment.timestamp = Date.parse(entry.published.$t) + '';
if (entry.author && entry.author.constructor === Array)
var auth = entry.author[0];
if (auth)
comment.author =
name: (auth.name ? auth.name.$t : undefined),
profileUrl: (auth.uri ? auth.uri.$t : undefined),
avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
;

if (entry.link)
if (entry.link[2])
comment.link = comment.permalink = entry.link[2].href;

if (entry.link[3])
var pid = /.*comments/default/(d+)?.*/.exec(entry.link[3].href);
if (pid && pid[1])
comment.parentId = pid[1];

comment.deleteclass = 'item-control blog-admin';
if (entry.gd$extendedProperty)
for (var k in entry.gd$extendedProperty)
if (entry.gd$extendedProperty[k].name == 'blogger.itemClass')
comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
else if (entry.gd$extendedProperty[k].name == 'blogger.displayTime')
comment.displayTime = entry.gd$extendedProperty[k].value;

comments.push(comment);

return comments;
;
var paginator = function(callback) {
if (hasMore()) {
var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
if (cursor)
url += '&published-min=' + new Date(cursor).toISOString();

window.bloggercomments = function(data) {
var parsed = parse(data);
cursor = parsed.length

samsexy98Jul 2, 2011, 11:02:00 AM

Done :) Just added titles myself. And the img alt in Reddit is wrong :P

Btw there is a news that Google has blocked all co.cc domains from search.

ReplyDelete

Assees DarOct 9, 2011, 7:32:00 PM

Assalam-o-Alaikum Brother. I Tried To Find This Code That Is Below. But I Found Nothing. What's Problem With Me???

ReplyDelete

Assees Ahmed DarDec 12, 2011, 3:20:00 PM

Assalaam-O-Alaikum bro. This Didn't Work For Me? What I Have To Do Now?

ReplyDelete

raviDec 22, 2011, 8:18:00 PM

Can you help me how to change read more link to a beautifful "read more" button in wordpress

ReplyDelete

raviDec 22, 2011, 8:28:00 PM

Can you help me how to change read more link to a beautifful "read more" button in wordpress

ReplyDelete

MoniqueJan 18, 2012, 10:21:00 PM

Hey!
Been searching for awhile & I love this!
Isnt there a way to make this show up on the home page under the posts too? Something about removing
but I am not sure. I am in no way skilled at this. Just a rumor I heard.

Thanks!

ReplyDelete

aboabdullah.mosaFeb 6, 2012, 5:39:00 PM

Thanks, It worked for me. My name is Muhammad also :) .I have some crawl errors in my blog: I wish you can help http://scienceuniverse101.blogspot.com/

ReplyDelete

NoorApr 29, 2012, 4:27:00 PM

Can you please tell me the code for this if I want to make pinterest as well. Thank you :)

ReplyDelete

NoorApr 29, 2012, 4:45:00 PM

Asalam Alaykum, I will be using images that are 22x22 and only pinterest, twitter and facebook oh and google+ and I want them over to the right. I have been trying to do this for days I would really appreciate if you could help me, thank you.

ReplyDelete

BlogJun 4, 2012, 2:17:00 AM

Can you add a button for Google+1 ?
Thanks!

ReplyDelete

Osama ZiaSep 21, 2012, 8:17:00 PM

Great! Thanks

ReplyDelete

Sandeep SinghDec 19, 2012, 8:36:00 PM

How to search for the "]]>" and the "" codes ?? there is a lot of stuff and I am not able to search them !! Help me !!

ReplyDelete