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!
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:
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– -->
my button won’t align to the left and also where do the script go??
Thanks for sharing, i’ve been try this one :D
Wow worked for me i implemented on my website..
Thanks for this tutorial..
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..
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.
deleted.
Testing – just logged in using Weibo
Hi!
hiii Oscar,
Can you please share the full code for floating buttons so that i can use it directly in my file