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.
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.
- 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
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
The idea for floatShare came from Paul Andrew from speckyboy.com