PlainShare - Social Media Share Buttons For Blogger Blog

It's been a while since I last posted on bloggingprince.com, and I know many of my followers missed my juicy themes and widgets. PlainShare - Crafted and created with simplicity plus functionality in mind, social sharing is a great way to increase daily pageviews and having share buttons on each post is essential for a blog.

Blogger BlogSpot has default built-in share buttons but these share buttons are too ugly except for the ones with the new themes. Therefore nearly everyone wants to change to a stylish share button that performs better than the default buttons.



See Demo
Preview Buttons


These rounded stylish on hover share button widget designed by me is meant to fill up the gap which blogger refused to fill. Other cool share buttons will be posted soon including share buttons with animations and share buttons with a counter.

Features Of This Share Button

1. Fast Loading

For a set of share button built plainly on HTML, CSS and FontAwesome then you don't expect it to ever slow down your blog. Fast loading blogs have an SEO percentage over slow blogs, this is the reason while these rounded share buttons bring you super fast user experience.

2. Works With AMP.

I have tested these share buttons on my new AMP blogger theme and it worked great with AMP. it passed the verification test for all pages it was placed. This tells you that this share button can work anywhere. It is simple but extremely functional.

3. Well Timed Animations

You might have noticed the new web moving towards animations, material designing, and awesome theme graphics. Let your site not be left out! PlainShare social media sharing widget brings in awesome on hover animations. Loads fast and it gets a delayed animation.

If you have knowledge of CSS3 then you will understand what I mean by delayed on hover animations.

4. Place Anywhere.

PlainShare can be used anywhere in a blogger blog. You can place it below post title, above post title, below every post. on the homepage and virtually anywhere you feel you need share buttons. Simply add the codes and see it work.

5. Easy To Install.

It is just a work of CSS and HTML, therefore, placing it in your blog will be very easy. Only a few lines of codes the share buttons will start working instantly. Works on mobile, laptops and anything that has a screen and can surf the web.

FallBacks Of PlainShare

1. No Customization Option

The colors in PlainShare are static or fixed, you can not change it unless you have knowledge of CSS. Though the default colors look great, there might be a need to make a customization to the colors which you can not do, but I will try to explain below how you can get it done.

How To Setup PlainShare Share Buttons On Blogger

First thing first is to install the CSS.

Adding PlainShare CSS

Go to themes >> Edit HTML >> Using CTRL + F search for "]]><b:skin>" and paste the below code just above "]]><b:skin>".

/* PlainShare By BloggingPrince.com*/
.share-buttons{display:inline}
.fb-share,.lk-share,.tw-share,.gp-share,.print-share,.wp-share,.pin-share{vertical-align:middle;transition-duration:1s;width:40px;height:40px;border:1px solid #ddd;color:rgba(0,0,0,.44);border-radius:50%;cursor:pointer;text-align:center;display:inline;padding:5px;margin-right:5px;font-size:18px}
.fb-share{padding-left:11px;padding-right:7px;padding-top:6px}
.tw-share{padding-right:7px;padding-left:8px}
.gp-share{padding-right:2px;padding-left:9px}
.print-share{padding-right:8px;padding-left:8px}
.wp-share,.pin-share{padding-left:8px;padding-right:8px}
.fb-share:hover,.tw-share:hover,.gp-share:hover,.wp-share:hover,.print-share:hover,.pin-share:hover{color:#000;border:1px solid #000}
.print-share a{transition-duration:1s;color:rgba(0,0,0,.44)}
.fb-share a:hover,.tw-share a:hover,.gp-share a:hover,.wp-share a:hover,.pin-share a:hover,.print-share a:hover{color:#000}
.fb-share a,.tw-share a,.gp-share a,.lk-share a .print-share a,.wp-share a,.pin-share a{color:rgba(0,0,0,.44);transition-duration:1s}
.lk-share .fa{color:rgba(0,0,0,.44);padding-right:4px;padding-left:4px}

Add PlainShare Below Every Post

In the same Editor, search for <div class="post-footer"> . Paste the below code just below <div class="post-footer">.

<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'>
<div class='fb-share'><a expr:href='&quot;   http://www.facebook.com/share.php?v=4&amp;   src=bm&amp;   u=&quot; + data:post.url + &quot;   &amp;   t=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share on Facebook!'><span><i class='fa fa-facebook'/></span>
  </a></div>
<div class='tw-share'><a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot; via @ObhiabaBlog - &quot;' rel='nofollow' target='_blank' title='Share on Twitter!'> <span><i class='fa fa-twitter'/></span></a></div>
<div class='gp-share'><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share on Google Plus!'> <span><i class='fa fa-google-plus'/></span>
  </a> </div>
<div class='pin-share'><a expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.title' rel='nofollow' target='_blank' title='Pin it!'><span><i class='fa fa-pinterest'/></span></a></div>
  </b:if>

Add PlainShare Below Post Title

In the same Editor, search for <div class="post-header">. Paste the below code just below <div class="post-header">.

<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'>
<div class='fb-share'><a expr:href='&quot;   http://www.facebook.com/share.php?v=4&amp;   src=bm&amp;   u=&quot; + data:post.url + &quot;   &amp;   t=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share on Facebook!'><span><i class='fa fa-facebook'/></span>
  </a></div>
<div class='tw-share'><a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot; via @ObhiabaBlog - &quot;' rel='nofollow' target='_blank' title='Share on Twitter!'> <span><i class='fa fa-twitter'/></span></a></div>
<div class='gp-share'><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share on Google Plus!'> <span><i class='fa fa-google-plus'/></span>
  </a> </div>
<div class='pin-share'><a expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.title' rel='nofollow' target='_blank' title='Pin it!'><span><i class='fa fa-pinterest'/></span></a></div>
  </b:if>

Customization

Replace via @ObhiabaBlog with your twitter username.

What Next?

Save the code in the Editor and visit your blog to see the share buttons displaying. Works on both mobile and desktop themes. If you wish to show it on Mobile themes, read my guide on showing any widget in mobile theme but first, make sure you switch to Custom or responsive theme.