Editorial Staff
Social media share buttons allow your visitors to signal that they like your content, thus count as social signals towards your overall SEO.
It is a paramount feature to help visitors promote your content and drive more exposure from social media.
In this article, I’ll show you how to add a social media share buttons on blogger as well customizing it to fit your design preference.
Table of Content
Remove blogger default social sharing buttons
Blogger provides icons for social posts at the bottom of each blog post, but it is not as attractive as expected, which made us resort to better alternatives. Moreover, you wouldn’t want two social sharing buttons appear under every blog post.
To hide/remove blogger default social media share button go to Blogger → layout → edit blog posts → and at last, disable the ‘Show share buttons’ .
Now that’s done, we move on to adding awesome font.
Add awesome font
Awesome font may already exist in your blogger theme code so make sure to search for it by hitting CTR + F and search for ‘awesome’ if the font source code already exist, then you can skip this step. If not you can add it by going to Theme → Edit HTML and search for ‘</head>‘ and place the following code directly above it.
<link crossorigin = 'anonymous' href = 'https: //maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' integrity = 'sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNAFoD2VBEVlGOfQNAFoD2VLSBEA' stylesheet '/>
Add social media sharing buttons code
- Search for <data:post.body/>, and you will likely find more than one tag.
- All you have to do is place a word under each tag to define it, for example the first tag put test-1 under it, the second test-2, the third test-3, and so on (likely the second one is most appropriate).
- After that, save the template and preview one of your blog posts and locate and place the share buttons on social networking sites according to what you found .
- After determining the location, go back to the template and remove the words that you entered, keeping only the correct one.
- If you want to add social sharing icons on top of your posts, all you have to do is add the below code above or below the correct <data:post.body/>.
You can add it by going to Theme → Edit HTML and search for ‘</head>‘ and place the following code directly above it.
<p style = 'font-size: 20px; font-weight: bold; font-family: & quot; Droid Arabic Kufi & quot ;, sans-serif;'>Share this:</p>
<div class = 'share_button'>
<a class = 'xosocial' expr: href = '& quot; https: //twitter.com/share? url = & quot; + data: post.url + & quot; & amp; title = & quot; + data: post.title 'rel =' nofollow 'target =' _ blank 'title =' Tweet This'> <i class = 'fa fa-twitter fa_icon_share' /> </a>
<a class = 'xosocial' expr: href = '& quot; https: //www.facebook.com/sharer/sharer.php? u = & quot; + data: post.url + & quot; & amp; title = & quot; + data: post.title 'rel =' nofollow 'target =' _ blank 'title =' share This'> <i class = 'fa fa-facebook fa_icon_share' /> </a>
<a class = 'xosocial' expr: href = '& quot; https: //www.pinterest.com/pin/create/button/? url = & quot; + data: post.url + & quot; & amp; t = & quot; + data: post.title 'target =' _ blank 'title =' Pin This On Pinterest '> <i class =' fa fa-pinterest fa_icon_share '/> </a>
<a class = 'xosocial' expr: href = '& quot; https: //www.linkedin.com/shareArticle? url = & quot; + data: post.url + & quot; & amp; t = & quot; + data: post.title 'target =' _ blank 'title =' Share This On Linkedin '> <i class =' fa fa-linkedin fa_icon_share '/> </a>
<a class = 'xosocial' expr: href = '& quot; https: //www.digg.com/submit? url = & quot; + data: post.url + & quot; & amp; t = & quot; + data: post.title 'target =' _ blank 'title =' Submit URL On Digg '> <i class =' fa fa-digg fa_icon_share '/> </a>
<a class = 'xosocial' expr: href = '& quot; https: //www.stumbleupon.com/submit? url = & quot; + data: post.url + & quot; & amp; t = & quot; + data: post.title 'target =' _ blank 'title =' Submit URL On Stumbleupon '> <i class =' fa fa-stumbleupon fa_icon_share '/> </a>
</div>
Add CSS code
- Search for the tag ]]></b:skin>
- And add the following codes directly above it
.share_button {}
.share_button a {color: white}
.fa_icon {
padding: 9px;
font-size: 26px;
width: 45px;
text-align: center;
text-decoration: none;
border-radius: 50%;
}
.fa-facebook {
background: # 3B5998;
color: white;
}
.fa-twitter {
background: # 55ACEE;
color: white;
}
.fa-google {
background: # dd4b39;
color: white;
}
.fa-linkedin {
background: # 007bb5;
color: white;
}
.fa-youtube {
background: # bb0000;
color: white;
}
.fa-instagram {
background: # 125688;
color: white;
}
.fa-pinterest {
background: # cb2027;
color: white;
}
.fa-snapchat-ghost {
background: # fffc00;
color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.fa-skype {
background: # 00aff0;
color: white;
}
.fa-android {
background: # a4c639;
color: white;
}
.fa-dribbble {
background: # ea4c89;
color: white;
}
.fa-vimeo {
background: # 45bbff;
color: white;
}
.fa-tumblr {
background: # 2c4762;
color: white;
}
.fa-vine {
background: # 00b489;
color: white;
}
.fa-foursquare {
background: # 45bbff;
color: white;
}
.fa-stumbleupon {
background: # eb4924;
color: white;
}
.fa-digg {
background: black;
color: white;
}
.fa-reddit {
background: # ff5700;
color: white;
}
.fa-rss {
background: # ff6600;
color: white;
}
Customize the design of the social sharing icons
After completing all the above mentioned steps, you are now ready to customize the appearance of the icons. Choose one of the following three social sharing button styles and copy/paste the chosen css above ]]></b:skin>.
Style 1
.fa_icon_share {
padding: .5%;
font-size: 30px;
width: 9%;
text-align: center;
text-decoration: none;
}
Style 2
.fa_icon_share {
padding: 1.5%;
font-size: 25px;
width: 5%;
text-align: center;
text-decoration: none;
}
Style 3
.fa_icon_share {
padding: 1.5%;
font-size: 25px;
width: 5%;
text-align: center;
text-decoration: none;
border-radius: 25px;
}
