There are lot of social sharing plugins already shared on the web, i have seen social sharing buttons while i was reading article on Google's website Think With Google, i was really inspired with functionality of that plugin. Since i'm not frontend developer, i have found a great framework materialize to develop that social sharing button as i seen on Google's Website. The Looks great on desktop as well as a pretty good use on smartphones.
Check out the demo below pen on codepen.
I will show the basic work of the plugin you have to put it to work at your own :)
Note that you have to import jQuery before importing materialize.js! Generally it is good option to import javascript files at the end of the body to reduce page load time.
1. The Basic HTML Markup something like this.
<!DOCTYPE html>
<html>
<head>
<!-- FontAwesome-->
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
<!--materialize.css-->
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css" media="screen,projection"/>
<!-- optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<!-- Jquery & materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
</body>
</html>
2. The HTML markup FAB Sharing Buttons would be something like this:
<div class="fixed-action-btn click-to-toggle">
<a class="btn-floating btn-large cyan">
<i class="fa fa-share-alt" aria-hidden="true"></i>
</a>
<ul>
<li><a href="#" class="btn-floating white"><i style="color: red;" class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="" class="btn-floating white"><i style="color: red;" class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="#" class="btn-floating white"><i style="color: red;" class="fa fa-pinterest" aria-hidden="true"></i>
</a></li>
<li><a href="#"class="btn-floating white"><i style="color: red;" class="fa fa-google-plus" aria-hidden="true"></i></a></li>
</ul>
</div>
You can customize the look and feel of the buttons by playing with CSS , In case of any error during installation (in the code above) of the script or having trouble while editing, please don't hesitate to let us know, we will do the job free (it will just cost you one smile for us). Peace and blessing bodies..!!
We hope you have enjoyed the above plugin! If you feel Materialize has helped you out and want to about the framework just visit official website.
on
No comments Post Yours!
Post a Comment