jQuery Floating Social Share Plugin: floatShare
Is your website social-media enabled? If not, there are lots of causes to combine your website with common social media platforms like FB, Twitter, LinkedIn and so on. Nevertheless, the #1 reason that I all the time give for enabling social media in your website is that we live in the age of social media the place every little thing (recruitment, advertising, branding, gross sales and so on.) is converging quickly on social media platforms. Subsequently, it’s relatively cheap to join your exclusive content material to the social media platforms the place for all the online visitors to go.
Sufficient reasoning?
Let’s begin with the sensible stuff. In case you have not related your exclusive content material with social media platforms, you might be are only a step behind. All it’s good to do is add floatShare jQuery plugin on your website. It’s a free jQuery plugin that enables your site guests to share your exclusive content material on common social media platforms with a single- click on supplying you with excellent protection and viewers on some social media platforms. floatShare additionally gauges reputation of your exclusive content material by providing you with an abstract of complete ‘shares’ and ‘likes.’
floatShare is simple to combine and customize. It comes with three completely different sizes and types of social buttons. Constructed on jQuery, floatShare is suitable with all leading net browsers and work with cellular units as efficiently. The social buttons of floarShare have floating conduct – they float with content material as guests scroll up or down the web page. floatShare could be custom-made with completely different begin and finish factors.
Customizing floatShare
- pace: Scroll pace in milliseconds, default 500
- theme: Feel and appear for social media buttons. e.g. ‘default’,’massive’,’compact’,’icon’
- upperLimitElementId: Id for high excessive of the management
- lowerLimitElementId: Id for backside excessive of the management
- FB: Set true for FB button
- twitter: Set true for Twitter button
- StumbleUpon: Set true for StumbleUpon button
- LinkedIn: Set true for LinkedIn button
- google plus: Set true for Google Plus button
- your site title: Title of website/web page for share
- your site URL: URL of your website/webpage for share
- your site name: Title of your website/webpage for share
- desc: Description for share
- countReader: Location of depending reader php script
Utilizing floatShare
In your HTML file add the subsequent references within the head part.
- Add a reference to newest jQuery script
- Add a reference to fshare.js file
- Add a reference to fshare.css file
Add a block ingredient proper after the physique component and name the initializer to operate of floatShare.
Here’s a full working instance of floatShare
<!DOCTYPE html>
<html lang="en">
<head>
<hyperlink href="css/fshare.css" rel="stylesheet" sort="textual content/css" />
<script src="js/jquery-1.four.four.min.js" sort="textual content/javascript"></script>
<script src="js/fshare.js" sort="textual content/javascript"></script>
<script sort="textual content/javascript">
$(doc).prepared(operate () );
</script>
<model sort="textual content/css">
#wrapper
#header,#footer
#footer
#content material
</model>
</head>
<physique>
<div id="floating-bar"></div>
<div id="wrapper">
<div id="header">This can be a pattern header</div>
<div id="content material">
<div id="higher">scroll will begin from right here</div>
contents go right here
</div>
<div id="footer">
<div id="decrease">scroll will finish right here</div>
This can be a pattern footer</div>
</div>
</physique>
</html>
The thought for floatShare got here from Paul Andrew from speckyboy.com
Float Share Review
- Overall
- Feature Availability
- Customization
- Design Quality
- Flexibility
Muhammad,
You are cool bro.
Thanks for the code.
Great script, one question: how do I get it to float on the right side rather than the left side?
Just add this in your css #floating-bar{left: 92%!important;}
Thank you so much
Great! Thank!
that is interesting. should try