Fork me on GitHub
Post Format

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

Related Posts

  1. jQuery Social Media Share and Bookmark Plugin: jsShare
  2. jQuery Plugin for On-demand Search Box: SeacrhMeme
  3. Stylish jQuery Accordion Plugin (FREE): Akordeon
  4. jQuery Image Slider Plugin with Cool Transition Effects: Quake Slider
  5. jQuery Spin Button Plugin: Smart Spin

26 comments

  1. Pingback: Week of 10/5/12 – TDAS Creative Wiki

  2. Pingback: List of 20 New jQuery Plugins for Blog or Corporate Website | Web Graphics Images for Easy text Effects

  3. Pingback: Design District Auction » JQuery Plugins That Made Web Development Super

  4. Pingback: List of 20 New jQuery Plugins for Blog or Corporate Website | AnimHuT

  5. Pingback: jQuery | Pearltrees

  6. Pingback: What’s new for designers, October 2012 « sushil10018

  7. Pingback: What’s new for designers, October 2012 - mySMP Web Design

  8. Pingback: UK Web Design Now! » Post Topic » What’s new for designers, October 2012

  9. Pingback: What’s new for designers, October 2012 | Blue Sparrow Media

  10. Pingback: What’s new for designers, October 2012 « design-iphone-apps

  11. Pingback: What’s new for designers, October 2012 | Indoor Digital Billboards

  12. Pingback: What’s new for designers, October 2012 » We Love Brisbane – Website Design

  13. Pingback: What’s new for designers, October 2012

  14. Pingback: Что нового для дизайнеров, октябрь 2012 - Wombo Combo

  15. Pingback: What’s new for designers, October 2012 | CSS Tips

  16. Pingback: What’s new for designers, October 2012 | t1u

  17. Pingback: ▲D▲ What’s new for designers, October 2012 « dot dot dob tob tob

  18. Pingback: What’s new for designers, October 2012 | Webdesigner Depot

  19. Pingback: 30+ New Resources, Tools, Apps & Handpicked Goodies For Web Developers & Designers | CSS Tips

  20. Pingback: jQuery Floating Social Share Plugin with Custom Start/End Points | Daily Syntax

  21. Pingback: floatShare - A jQuery floating social share plugin - CodeVisually

  22. Pingback: jquery plugin | Pearltrees

Leave a Reply

Required fields are marked *.


− four = 2