Facebook Slide Out Share Button for Blogger

Posted On // 11 comments
Facebook Share Button
It has been long time since I have not posted a new widget so here is a much awaited Facebook Slide Out Share button for Blogger blogs.

This widget has many features such as -
  • Lightweight Size
  • Compact Design
  • Supports all Major Browsers
  • Attractive and Elegant
  • Made with CSS3 and beautiful transitions.
  • Shown only on Post pages
The live demo of this widget can be seen by clicking the below button.

Live Demo



Once you have seen the demo, to add this widget in your blog you can use the following methods -


Method 1 : One Click Installation


You can add this slide out share button to your blogger blog with the click of a button. To add this widget just click the below button and choose the blog in which you want to add this widget.



Save the layout and you are done. The slide out share button will be on your blog and would be shown on all the post pages.


Method 2 : Adding Manually


Many people would like to add and customize the code on their own. If so, you can copy the below code and paste it in the HTML/JavaScript widget.

<b:if cond='data:blog.pageType == "item"'>
<style>
/* Widget by AllBloggerTricks.com */
#fixed-share {background: none repeat scroll 0 0 #4C6699;border-bottom: 3px solid #30476F;bottom: 60px;box-shadow: 0 8px 8px #888888;font-family: Arial;font-size: 16px;padding: 15px 30px 15px 15px;position: fixed;right: -147px;text-align: left;text-transform: uppercase;transition: all 1s ease 0s;z-index: 10;}
#fixed-share:hover {right: 0}
#fixed-share:hover > #share-box {right: 147px}
#share-box {background: none repeat scroll 0 0 #4C6699;bottom: 72px;box-shadow: 0 8px 8px #888888;height: 40px;position: fixed;right: 1px;text-align: center;transition: all 1s ease 0s;width: 40px;}
</style>
 <div id="fixed-share">
 <div id="share-box">
<img src="http://s10.postimg.org/s1a8ghl6t/Fb_Logo.png" />
</div>
<span>Support Us<br/> <script>(function(d){ var js, id =
'facebook-jssdk'; if (d.getElementById(id)) {return;} js =
d.createElement('script'); js.id = id; js.async = true; js.src =
"//connect.facebook.net/en_US/all.js#xfbml=1";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>  <fb:share-button expr:href='data:post.url'
type='button_count'/> </fb:share-button>
</span></div>
<!-- Widget  by AllBloggerTricks.com -->
</b:if>

After adding, save the widget and template.

You are done now. Now you and your visitors can see this awesome Facebook Share button on your blogger blog.

11 comments

25 December 2013 at 07:36

Thanks for sharing button. I was looking for this a while

Reply
Aishawarya Author
31 December 2013 at 08:03

Thanks for the information.Your killer contents was quite what to say..excellent.even i starts with blogging tricks sometimes will be blank out there. so any way keep posting killer contents.

Reply
Cindy Zhang Author
31 January 2014 at 15:37

can you do this for twitter or g+?

Reply
TechFPD Author
1 February 2014 at 23:39

coool.

you are the best man :D

Reply
Amrita Author
4 February 2014 at 09:04

Thank you for dropping here an outstanding article again...

Reply
Sherin Author
9 February 2014 at 19:45

thanks for dropping this kind of articles... seems like a visitors locking contents everywhere here..

Reply
23 February 2014 at 10:20

di sini gan kumpulan widget terlengkap

Reply
Alisha Author
27 February 2014 at 05:00

I am looking for this widget. Thank you very much for sharing.

Reply
7 March 2014 at 11:40

thaaankyou :)

Reply
14 June 2015 at 10:03

Thanx. its Cool..

Reply
Almunai Author
8 November 2015 at 12:26

Thanks for share

Reply

Post a Comment

Please do not spam here. All comments will be moderated.
Don't You Think this Awesome Post should be shared ??
| Facebook Slide Out Share Button for Blogger |