How to add social media share buttons to blogger

In this post i am gonna tell you how to add social media share buttons to blogger. Now-a-days Social media platform play a major role to provide more traffic for any website.

Now i am going to tell you an essay way to add these social share button to blogger. These share buttons are made with html and css, so they don't affect the page load time at all. You can add these social buttons below the post titles or below the post footer.

Steps to add these share buttons to blogger:-

(Before going to editing your theme, its important to backup your theme because if you did any mistake your completely theme will be changed, if you do backup your theme you can restore it afterwards)

1. Go to blogger > Theme > Backup your theme

2. Click on Edit Html button

3. Now search for <head> and copy and paste the below font awesome code below the <head> (If you have already used this code then avoid adding this code twice)

4. Now you have to add these css code. Just search for </head> and just above it copy and paste the below codes

CSS codes:-

<b:if cond='data:blog.pageType == "item"'>
 <style type='text/css'>
 /*------------------------------------------------------------
 Horizontal Social Media Share Buttons for Blogger
 Designed by:: https://sandeep980.blogspot.in
Icons:: FontAwesome
 ------------------------------------------------------------*/

.mobileshare {
 text-align: center;
 }
 .mobileshare a {
 background: #3a579a;
 color: white;
 display: inline-block;
 font-size: 20px;
 width: 35px;
 height: 35px;
 line-height: 35px;
 margin: 0 2px 6px;
border-radius: 50%;
margin-left: 15px;
 }
 .mobileshare a:hover{
 background: #314a83;
 }
 
.mobileshare1 {
 text-align: center;
 }
 .mobileshare1 a {
 background: #df4a32;
 color: white;
 display: inline-block;
 font-size: 20px;
 width: 35px;
 height: 35px;
 line-height: 35px;
 margin: 0 2px 6px;
border-radius: 50%;
 }
 .mobileshare1 a:hover{
 background: #be3f2b;
 }
.mobileshare2 {
 text-align: center;
 }
 .mobileshare2 a {
 background: #00abf0;
 color: white;
 display: inline-block;
 font-size: 20px;
 width: 35px;
 height: 35px;
 line-height: 35px;
 margin: 0 2px 6px;
border-radius: 50%;
 }
 .mobileshare2 a:hover{
 background: #0092cc;
 }
.mobileshare3 {
 text-align: center;
 }
 .mobileshare3 a {
 background: #cd1c1f;
 color: white;
 display: inline-block;
 font-size: 20px;
 width: 35px;
 height: 35px;
 line-height: 35px;
 margin: 0 2px 6px;
border-radius: 50%;
 }
 .mobileshare3 a:hover{
 background: #ae181a;
 }
.mobileshare5 {
 text-align: center;
 }
 .mobileshare5 a {
 background: #34af23;
 color: white;
 display: inline-block;
 font-size: 20px;
 width: 35px;
 height: 35px;
 line-height: 35px;
 margin: 0 2px 6px;
border-radius: 50%;
 }
 .mobileshare5 a:hover{
 background: #hover-color;
 }
</style>
 </b:if>

5. Now you need to add the html part in your theme. Below i have mentioned the both ways either add these share buttons below post title or below the post footer.

Add social share buttons below post title:-
Now search for this code line <div class='post-header-line-1'/> in your theme and just below it copy and paste the html part codes. If the code lines appear more then one then paste the Html part codes after second appearance.

Add social share buttons below post footer:-
Search for this code line <div class='post-footer'> in your theme and just below it copy and paste the html part codes. If the code lines appear more then one then paste the Html part codes after second appearance.

If you unable to find this above code then search for this code line <div class='post-footer-line post-footer-line-1'> and just below it copy and paste the html part codes as mentioned. If the code lines appear more then one then paste the Html part codes after second appearance.

Html part codes:-

<div>
<p>
<strong>Share this:</strong></p>
<mobileshare class='mobileshare'>
 <a expr:href='"   http://www.facebook.com/share.php?v=4&   src=bm&   u=" + data:post.url + "   &   t=" + data:post.title' onclick='window.open(this.href,"   sharer"   ,"   toolbar=0,status=0,width=626,height=436"   );   return false;' rel='nofollow'> <i class='fa fa-facebook'/></a></mobileshare>
<mobileshare1 class='mobileshare1'>
 <a expr:href='"http://plus.google.com/share?url=" + data:blog.url' onclick='javascript:window.open(this.href,"   "   ,"   menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600"   );   return false;   ' rel='nofollow'><i class='fa fa-google-plus'/></a></mobileshare1>
<mobileshare2 class='mobileshare2'>
 <a expr:href='"https://twitter.com/intent/tweet?url=" + data:blog.url + "&text=" + data:post.title + " via @sandeep980blog - "' onclick='window.open(this.href,"   sharer"   ,"   toolbar=0,status=0,width=626,height=436"   );   return false;' rel='nofollow'><i class='fa fa-twitter'/></a></mobileshare2>
<mobileshare3 class='mobileshare3'>
 <a data-pin-config='beside' expr:href='"   http://pinterest.com/pin/create/button/?url=" + data:post.url + "   &media=" + data:blog.postImageUrl + "&description=" + data:post.title' onclick='window.open(this.href,"   sharer"   ,"   toolbar=0,status=0,width=626,height=500"   );   return false;' rel='nofollow'> <i class='fa fa-pinterest'/></a></mobileshare3>
<mobileshare5 class='mobileshare5'>
 <a class='whatsapp' expr:href='"whatsapp://send?text="+ data:post.title + " " + data:post.url' href='whatsapp://send?text=http://webdevelopmentscripts.com' onclick='window.parent.null' rel='nofollow' target='_top' title='Share to whatsapp'><i class='fa fa-whatsapp'/></a></mobileshare5>
</div>

Editing Part:-

Now you need to edit in the html part is my twitter user name @blog just replace with your own twitter user name.

5. Now save your theme and choose custom mobile theme, you are done. Visit your blog page and see this live

7 Comments

byodbuzz066 February 2019 at 12:10
Filament
In a single WordPress plugin, Filament contains a group of useful features including Flare, a social share button plugin that makes it easy for others to share your blogpost on Twitter, Facebook, Buffer, and more—even spots like Hacker News and Reddit. Other Filament apps include: MailChimp subscribe form, Google Analytics tracking, all-in-one profiles, code management, and share highlighter.
pslv seoa106 February 2019 at 17:41
Filament
In a single WordPress plugin, Filament contains a group of useful features including Flare, a social share button plugin that makes it easy for others to share your blogpost on Twitter, Facebook, Buffer, and more—even spots like Hacker News and Reddit. Other Filament apps include: MailChimp subscribe form, Google Analytics tracking, all-in-one profiles, code management, and share highlighter.
byodbuzz069 February 2019 at 14:01
Filament
In a single WordPress plugin, Filament contains a group of useful features including Flare, a social share button plugin that makes it easy for others to share your blogpost on Twitter, Facebook, Buffer, and more—even spots like Hacker News and Reddit. Other Filament apps include: MailChimp subscribe form, Google Analytics tracking, all-in-one profiles, code management, and share highlighter.
byodbuzz0612 February 2019 at 16:03
Filament
In a single WordPress plugin, Filament contains a group of useful features including Flare, a social share button plugin that makes it easy for others to share your blogpost on Twitter, Facebook, Buffer, and more—even spots like Hacker News and Reddit. Other Filament apps include: MailChimp subscribe form, Google Analytics tracking, all-in-one profiles, code management, and share highlighter.
byodbuzz0616 February 2019 at 11:30
Filament
In a single WordPress plugin, Filament contains a group of useful features including Flare, a social share button plugin that makes it easy for others to share your blogpost on Twitter, Facebook, Buffer, and more—even spots like Hacker News and Reddit. Other Filament apps include: MailChimp subscribe form, Google Analytics tracking, all-in-one profiles, code management, and share highlighter.
byodbuzz069 March 2019 at 13:42
Filament
In a single WordPress plugin, Filament contains a group of useful features including Flare, a social share button plugin that makes it easy for others to share your blogpost on Twitter, Facebook, Buffer, and more—even spots like Hacker News and Reddit. Other Filament apps include: MailChimp subscribe form, Google Analytics tracking, all-in-one profiles, code management, and share highlighter.
Santanu Mondal11 June 2019 at 15:39
wow... what a great blog, this writter who wrote this article it's realy a great blogger, this article so inspiring me to be a better personpcos diet plan menu indian

Ticker

How to add social media share buttons to blogger