Social media slide next to a website
How to build social media buttons to slide up and down next to your website?
Basically, it is a floating menu that contain social media buttons like Facebook, Twitter, Google Plus, just to name a few.
Keep in mind I’m putting this together into my WordPress website without a plugin, without jquery, and only CSS. So, it’s light weight and you should be able to use the same code on any site with or without WordPress.
Setp 1
Add this code into your HTML document. I place it on my header.php file after the body tag. It is crucial to place this code to the correct position inside your HTML structure. You might have to try placing the code in different locations inside your HTML structure to see where the buttons are showing up on your site. Once you find the best place for the code, go ahead and add the CSS.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <div class="social"><!-- Start social -->
<div class="social-content"><!-- Start social-content -->
<div class="share_buttons_wrapper"><!-- Start share_buttons_wrapper -->
<div class="share_buttons_single_page"><!-- Start share_buttons_single_page -->
<div class="wdt_button_fb">
<!-- Start Facebook -->
<div id="fb_share_1">
<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_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="false" data-layout="box_count" data-width="40" data-show-faces="true"></div>
</div>
</div><!-- End Facebook -->
<div class="wdt_button_google"><!-- Start Google Plus -->
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="tall"></g:plusone>
<!-- Place this render call where appropriate -->
<script type="text/javascript">
(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><!-- End Google Plus -->
<div class="wdt_button_twitter"><!-- Start Twitter -->
<a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
</div><!-- End Twitter -->
</div><!-- End share_buttons_single_page -->
</div><!-- End share_buttons_wrapper -->
</div><!-- End social-content -->
</div><!-- End social --> |
This is where I got the code for the Facebook Like Button, Google Plus 1, and Twitter.
Step 2
Here is the code for CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | .social {
margin: 10px 0 0 0;
padding:0;
position:fixed;
}
.share_buttons_wrapper {
right:90px;
position: absolute;
width: auto;
}
.share_buttons_single_page{
background: #FFFFFF;
border: 1px solid #FFFFFF;
border-right: none;
border-radius: 3px 3px 3px 3px;
box-shadow: -2px 0 10px #000000;
margin: 0 0 10px 10px;
padding: 0px 1px 10px 10px;
position: absolute;
text-align: left;
}
/* code for pages */
.share_buttons_single_page.fixed {
position: fixed;
top:20px;
}
.FBConnectButton_Text {
margin-left:12px !important;
padding:2px 3px 3px !important;
}
.wdt_button {
padding-top: 10px;
clear: both;
}
/* Center Facebook button */
.wdt_button_fb {
padding-top: 10px;
clear: both;
}
/* Center Google +1 button */
.wdt_button_google {
padding-top: 14px;
margin-left: -2px;
clear: both;
}
/* Center Twittoer button */
.wdt_button_twitter {
padding-top: 14px;
margin-left: -5px;
clear: both;
} |
Step 3
That’s it. Done! Just make sure to place the HTML code at the best spot and then play around with the CSS for it’s position and style.
Leave me a comment below this page if you got stuck or you have something better.
comment