Submit your widget
HomeMenu & NavigationGreat Social Media Share and Bookmark Plugin With jQuery

Great Social Media Share and Bookmark Plugin With jQuery

Created 13 years ago   Views 24470   downloads 6801    Author egrappler
Great Social Media Share and Bookmark Plugin With jQuery
View DemoDownload
111
Share |

No one can ignore the importance of social media in this age of communication and interactivity. Social media have made social interaction very easy and interactive, build upon mobile technologies and web-base techniques, social media are easily accessible to anyone having access to internet. Social media applicatione are used for sharing information in interactive manner, these social media applications also provide features(APIs) to share information from other applications. E.g. blogs, web sites, mobile applications etc.

jsShare Social media share plugin

jsShare is a jquery plugin that helps you easily share your contents with popular social media applications easily, all social media like facebook, twitter provide APIs for applications to share contents from other applications.  jsShare encapsulates the internal sharing logic and provides you neat and compact interface to add social media sharing functionality to your web pages and applications easily. jsShare is rendered as compact button by default, width is toggled upon clicking. jsShare also has a cool fish eye animation effect for social media buttons, which can be turned off by setting value of animate parameter to false.

jsShare plugin currently supports the following social media.

  • Facebook
  • Twitter
  • Google Buzz
  • Stumble Upon
  • LinkedIn
  • Digg
  • Delicious
  • Reddit
  • Live Messenger
jsShare Plugin Parameters
  • animate: If true fish eye effect will be enabled, default is true.
  • initialdisplay: Determines whether plugin will be expanded or collapsed initially, values for this parameter are 'compact' and 'expanded', default is 'compact'.
  • speed: Speed in milliseconds at which plugin collapses and expanded, default is 1000.
  • yoursitetitle: Title of your site, default is ''.
  • yoursiteurl: Url of your site/blog, default is ''.
  • yoursitename: Name of your site/blog default is ''.
  • desc: Short description that you want to appear on social media.
  • minwidth: Width when the plugin is collapsed, default is 40.
  • maxwidth: Width when the plugin is expanded, default is 250.
  • facebook: If  true facebook share button will be display, default s true.
  • twitter: If  true twitter share button will be display, default s true.
  • digg: If  true digg share button will be display, default s true.
  • reddit: If  true reddit share button will be display, default s true.
  • stumbleupon: If  true stumbleupon share button will be display, default s true.
  • messenger: If  true live messenger share button will be display, default s true.
  • delicious: If  true delicious share button will be display, default s true.
  • linkedin: If  true linkedin share button will be display, default s true.
  • googlebuzz: If  true gooblebuzz share button will be display, default s true.
Using jsShare Plugin

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

  • Add a reference to latest jQuery script
  • Add a reference to jsShare.js file
  • Add a reference to jsShare.css file

Add add block element(div) where you want social media buttons to be added.

<div id="buttons">
            </div>

Now add the following code to your HTML file’s head section.

<script type="text/javascript">
       $(document).ready(function() {
           $('#buttons').jsShare({ maxwidth: 370 });
       });
   </script>

Here is the complete code for the example above.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Compact Social Media Share Plugin</title>
 
    <script src="jquery-1.4.4.min.js" type="text/javascript"></script>
 
    <script src="jsShare.js" type="text/javascript"></script>
 
    <link href="jsShare.css" rel="stylesheet" type="text/css" />
 
    <script type="text/javascript">
        $(document).ready(function() {
            $('#buttons').jsShare({ maxwidth: 360 });
            $('#buttons-expanded').jsShare({ initialdisplay: 'expanded', maxwidth: 360 });
        });
    </script>
 
    <style type="text/css">
       body
        {
            margin: 0;
            padding: 0;
            font-family: Myriad Pro, Arial, Tahoma;
            background: #FFFFFF url(images/pixel.jpg);
        }
        #wrapper
        {
            width: 100%;
            height: 100%;
        }
        #header
        {
            width: 100%;
            height: 80px;
            background-color: #f6f6f6;
            border-bottom: solid 1px gray;
            opacity: 0.7;
        }
        #header-contents
        {
            width: 700px;
            height: 80px;
            margin: auto;
            text-align: center;
        }
        #demo
        {
            width: 700px;
            margin: auto;
            height: 78px;
            text-align: center;
            padding-top: 140px;
        }
        h1, h2, h3, h4
        {
            padding: 0;
            margin: 0;
            font-weight: normal;
        }
        h2
        {
            color: #68BDCC;
            font-size:25pt;
        }
        h3
        {
            color: Gray;
            font-size: 12pt;
        }
        #demo p
        {
            text-align: left;
            color: #b5B5B5;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="header">
            <div id="header-contents">
                <h1>
                    Minimal Social Share Plugin</h1>
                <h2>
                    jQuery Compact Social Media Share Plugin</h2>
            </div>
        </div>
        <div id="demo">
            <p>
                Spread the word</p>
            <div id="buttons">
            </div>
  <p>
                Spread the word</p>
            <div id="buttons-expanded">
            </div>
        </div>
    </div>
</body>
</html>

The article source:http://www.egrappler.com/jquery-social-media-share-plugin-jsshare/

You might also like