Social media button floating side widget

by Oscar

Are you looking for a social media side bar widget for your website? Here it is!button

Some of the links on this page are affiliate links. I receive a commission (at no extra cost to you) if you make a purchase after clicking on one of these affiliate links. This helps support the free content for the community on this website. Please read our Affiliate Link Policy for more information.

I was looking for some sort of Social Media widget for my websites, but they tend to be either not free, or not working/outdated. So I decided to make a up to date one, and share it!

sidebar wdiget

Installation:

Simply copy the code into your HTML page, anywhere within the <body> tag, and the widget should appear on the right hand side of your page. Of course you can change the position, size, look of the widget by editing the CSS code.

You also need to modify the URLs to your own website for facebook/Google Plus/Twitter .

For those who are using blogs on blogger, Wordpress etc, you can also have this by creating a custom Text box on the sidebar, and copy the code into the text area. For example in wordpress:

create_custom_text

Here is the code:

<!-- SideBar Floating Share Buttons by oscarliang.net Code Start --> <style> #social-widget { position:fixed; top:25%; right:10px; border: 1px solid black; width:70px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; background-color:#eff3fa; z-index:998; } #social-widget .sbutton { margin: 5px; } </style> <div id='social-widget' title="Share This With Your Friends"> <!-- Facebook --> <div class="sbutton"> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div class="fb-like" data-href="https://www.facebook.com/oscarliangnet" data-send="false" data-layout="box_count" data-width="80" data-show-faces="false"> </div> </div> <!-- Twitter --> <div class="sbutton"> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.oscarliang.net/" data-count="vertical">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </div> <!-- Google Plus --> <div class="sbutton"> <div class="g-plusone" data-size="tall" data-href="http://oscarliang.net"></div> <script type="text/javascript"> window.___gcfg = {lang: 'en-GB'}; (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> </div> <br/> <!-- Please keep below intact --> <a href="https://oscarliang.com/social-media-share-button-floating-widget/" title="Get this Social Media Tool Bar for you own website" target="blank"> <div style="clear: both;font-size: 9px;text-align:center;color:red;"> Get this Widget </div> </a> </div> <!-- SideBar Floating Share Buttons by oscarliang.net Code End– -->

Leave a Comment

By using this form, you agree with the storage and handling of your data by this website. Note that all comments are held for moderation before appearing.

9 comments

Dave Young 15th March 2015 - 6:04 pm

my button won’t align to the left and also where do the script go??

Reply
Bagus Frayoga 14th December 2014 - 9:36 am

Thanks for sharing, i’ve been try this one :D

Reply
Amit 9th November 2013 - 5:34 am

Wow worked for me i implemented on my website..
Thanks for this tutorial..

Reply
Divyanshu Asopa 30th July 2013 - 12:14 pm

Can you tell me how to align the floating bar to the left? Just change the text in the line.. “#social-widget {
6
position:fixed;
7
top:25%;
8
right:10px;
9
border: 1px solid black;
10
width:70px;

is not working for mee..

Reply
Aimee Guerrero 15th May 2013 - 2:23 am

Hi, I would like to know the code of your floating social media here in this blog. The ICONS only. Thanks! :) Hope to know more from you. I really appreciate this post.

Reply
Oscar 30th July 2013 - 2:40 pm

deleted.

Reply
梁小航OSCAR 25th February 2013 - 10:45 pm

Testing – just logged in using Weibo

Reply
Oscar Liang 26th February 2013 - 12:06 am

Hi!

Reply
Sandeep 31st March 2016 - 12:14 pm

hiii Oscar,
Can you please share the full code for floating buttons so that i can use it directly in my file

Reply