jQuery Floating Social Share Plugin: floatShare

Is your website social-media enabled? If not, there are many reasons to integrate your website with popular social media platforms like facebook, twitter, LinkedIn etc. However, the #1 reason that I always give in favor of enabling social media on your website is that we are living in the age of social media where everything (recruitment, marketing, branding, sales etc.) is converging rapidly on social media platforms. Therefore, it is quite reasonable to connect your web content to the social media platforms where all the web traffic is going.

Enough reasoning?

Let’s start with the practical stuff. If you have not connected your web content with social medial platforms, you are are just a step behind. All you need to do is add floatShare jQuery plugin on your website. It is a free jQuery plugin that allows your website visitors to share your web content on popular social media platforms with a single- click giving you good coverage and audience on multiple social media platforms. floatShare also gauges popularity of your web content by giving you a summary of total ‘shares’ and ‘likes’.

floatShare is easy to integrate and customize. It comes with three different sizes and styles of social buttons. Built on jQuery, floatShare is compatible with all major web browsers and work with mobile devices as well. The social buttons of floarShare have floating behavior – they float with content as visitors scroll up or down the page. floatShare can be customized with different start and end points.

Customizing floatShare

speed: Scroll speed in milliseconds, default 500
theme: Look and feel for social media buttons. e.g. ‘default’,'large’,'compact’,'icon’
upperLimitElementId: Id for top extreme of the control
lowerLimitElementId: Id for bottom extreme of the control
facebook: Set true for facebook button
twitter: Set true for twitter button
stumbleupon: Set true for stumbleupon button
linkedin: Set true for linkedin button
googleplus: Set true for googleplus button
yoursitetitle: Title of site/page for share
yoursiteurl: URL of your site/page for share
yoursitename: Name of your site/page for share
desc: Description for share
countReader: Location of count reader php script

Using floatShare

In your HTML file add the following references in the head section.

Add a reference to latest jQuery script
Add a reference to fshare.js file
Add a reference to fshare.css file

Add a block element right after the body element and call the initializer function of floatShare.
Here is a complete working example of floatShare


<!DOCTYPE html>
<html lang="en">
<head>

    <link href="css/fshare.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="js/fshare.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            $('#floating-bar').fshare({ theme: 'default', upperLimitElementId: 'upper', lowerLimitElementId: 'lower' });
        });
    </script>

	<style type="text/css">
	#wrapper{width:900px;height:1800px;border:solid 1px black;margin:auto;}
	#header,#footer{width:100%;background-color:yellow;height:100px;}
	#footer{height:600px;}
	#content{width:100%;height:1000px;}
	</style>
</head>
<body>
<div id="floating-bar"></div>
<div id="wrapper">
<div id="header">This is a sample header</div>
<div id="content">
<div id="upper">scroll will start from here</div>
contents go here
</div>
<div id="footer">
<div id="lower">scroll will end here</div>
This is a sample footer</div>
</div>
</body>
</html>

The idea for floatShare came from Paul Andrew from speckyboy.com

View Demo

Download Source

EGrappler

Development Resources for Entrepreneurs

jQuery Floating Social Share Plugin: floatShare

Customizing floatShare

Using floatShare

Related Posts

21 comments

Leave a Reply Cancel reply

Premium WordPress/HTML Themes