Add Social Share Buttons Below and Above Post in Blogger

Friends, you have definitely visited several contents around the internet, Right? Then you might have noticed that almost all such articles, have a social sharing option (in the form of buttons) right below blog post title, and at the end too.

Now these do come with default theme settings in Blogger, unfortunately they are so tiny in size and appear only at the end of the post, that familiar chances are the visitor not finding it and leave the page as he/she was unable to share it.

Other than that, several blogs/websites have gained organic traffic from Social Media itself, as there these sites can locate a huge community that redirect to their site. No only that, with rapid depending of people like Sharing posts via Facebook/ WhatsApp/ Twitter etc, share buttons just add to the taste of visitor.

How to Add Social Share Buttons Below and Above Post in Blogger?

In this article I have shown how to add rounded share buttons to blogger blogspot. FYI, you can check the demo of these buttons right away by sharing this article among your friends, via the  share buttons above the post.

However, needs vary from people to people. Keeping that in mind, I'm offering you a help. If you feel there should be some other links, feel free to comment below.

How to add custom social sharing buttons?

These steps that follow contain requires a little knowledge about HTML coding.
[Also, before proceeding kindly take a backup of your theme.]

STEP 1. Login to your Blogger dashboard and click on Theme menu.
STEP 2. Click on Edit HTML.
STEP 3. Click at any blank space inside the code box and click Control+F.
STEP 4. In the search field type <head> and hit Enter.
STEP 5. Now copy this code from below and paste it inside the <head> tag. (If you find this anyway, then skip this step)

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

Copy the above code below <head>

STEP 6. Next search for </head> & copy and paste the below CSS codes above the </head> tag.

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
/*--------------------------------------------
 Rounded Social Media Share Buttons for Blogger. Designed by: https://www.techgydbysm.com
-----------------------------------------------*/
.mobileshare a{background:#3a579a;color:#fff;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:#fff;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:#fff;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:#fff;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:#fff;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}

Paste this CSS code above </head>


STEP 7. With these steps being done, you have now two choices in hand. If you want to place this button below the Post title or at the end of the post.

How to Add Social Share buttons below post title?

Search for this code <div class='post-header-line-1'/> and copy and paste the below HTML codes below the above syntax. Again search for the syntax if you find these codes again; then copy and paste the HTML codes below the syntax.

Code:

<b:if cond='data:blog.pageType == "item"'>
<div>
<p>
<strong>Share this:</strong></p>
<mobileshare class='mobileshare'>
 <a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='nofollow' target='_blank' title='Facebook Share'> <i class='fa fa-facebook'/></a></mobileshare>
<mobileshare1 class='mobileshare1'>
 <a expr:href='"https://plus.google.com/share?url=" + data:post.url + "&t=" + data:post.title' target='_blank' title='Google Share'><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 @TechGydbySM - "' rel='nofollow' target='_blank' title='Tweet This'><i class='fa fa-twitter'/></a></mobileshare2>
<mobileshare3 class='mobileshare3'>
 <a expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.thumbnailUrl + "&description=" + data:post.title' target='_blank' title='Pin It'> <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>
</b:if>

Paste it above...


How to Add Social Share buttons at the end of the post?

Search for this code <div class='post-footer'> and copy and paste the HTML codes below the above syntax. Again search for the above code, if you find again the copy and paste the HTML codes again below the above syntax.

If you cannot find these codes in your theme then search for this code <div class='post-footer-line post-footer-line-1'>

Code:

<b:if cond='data:blog.pageType == "item"'>
<div>
<p>
<strong>Share this:</strong></p>
<mobileshare class='mobileshare'>
 <a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='nofollow' target='_blank' title='Facebook Share'> <i class='fa fa-facebook'/></a></mobileshare>
<mobileshare1 class='mobileshare1'>
 <a expr:href='"https://plus.google.com/share?url=" + data:post.url + "&t=" + data:post.title' target='_blank' title='Google Share'><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 @TechGydbySM - "' rel='nofollow' target='_blank' title='Tweet This'><i class='fa fa-twitter'/></a></mobileshare2>
<mobileshare3 class='mobileshare3'>
 <a expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.thumbnailUrl + "&description=" + data:post.title' target='_blank' title='Pin It'> <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>
</b:if>

Paste it below...

Here, change the Twitter handle to your blog's official handle. Now this method depends on the template your website has.

Social Share Buttons below Post and after Post


For the template on my website, I had to find <data:post.body/> in both the above cases and paste it above the syntax. That's it guys. This will add custom social share buttons to your website.

Video Tutorial:



If you want to be connected with TechGyd for such interesting articles, do subscribe to newsletter.

0 Comments

Post a Comment

Read Comment Policy before commenting.