Social media button floating side widget

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

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– -->

9 thoughts on “Social media button floating side widget

  1. Divyanshu Asopa

    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
  2. Aimee Guerrero

    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
      1. Sandeep

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

Leave a Reply

Your email address will not be published. Required fields are marked *

Are you Robot? *

I don't look at blog comments very often (maybe once or twice a week), so if you have any questions related to multirotor please post it on this forum IntoFPV.com... You're likely to get a response from me faster on there.