Fork me on GitHub
Post Format

jQuery Social Media Share and Bookmark Plugin: jsShare

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.

jQuery minimal social media share plugin

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.

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>

Related Posts

  1. jQuery Pagination Plugin: Smart Paginator
  2. jQuery Spin Button Plugin: Smart Spin
  3. RSS Driven Dynamic jQuery News Slider Plugin: Dynamic News
  4. jQuery SmartIt Plugin: CSS3 2D Transformation
  5. jQuery Content Slider :jsCarousel

42 comments

  1. Abu Mohmmad Shoyeb

    01/07/2013 @ 7:46 am

    Dear,

    Thanks for your nice effort. It is working fine my asp.net website. Will you please tell me, how do I show Thumbelina images when I will share my site.

    Thanks for your advance co-operations.

    Reply
  2. Pingback: Webblog360 50+ All-Purspose jQuery Plugins for Perfect Web Development

  3. Pingback: jQuery | Pearltrees

  4. Pingback: Thursday Roundup 11 | EGrappler

  5. Help.
    I’m trying to use this in a mobile jqmobi app using appmobi xdk.
    i’ve followed the instructions.
    1. added the two script and one link tags in the head section
    2. added the special jsshare script tag
    3. added the tag calling the buttons.

    I see the only the ‘+’ button and the animation of bar expansion but no buttons in them.
    My path to the scripts I believe to be ‘./jsShare.js’ (i’m working in my local dev machine).
    my icons are in the ‘images’ folder and are visible.

    Any thoughts?
    Appreciate it.
    PM99

    Reply
      • Thanks for replying Muhammad,
        Yes, i have the images folder in the same place as my html file.

        BTW. I’m developing for mobile. Your demo works great in a desktop browser, but I just opened it in iOs safari and while the buttons load, they do not open a page when clicked.

        So I’m wondering if this is strictly for a desktop platform? Anybody else trying to use this in a mobile platform?

        Thanks for your time.
        PM99

        Reply
  6. Pingback: Jquery Mídias Sociais ( Jquery Share ) | Aprenda como fazer word press, site no wordpress, site com wordpress, blog do wordpress, template para wordpress, temas pra wordpress, love wordpress, themes wordpress download, layouts para wordpress, slide show

  7. Pingback: Partager dans les réseaux sociaux : jsShare | ZUC Blog

  8. Pingback: jsShare - jquery Social Media Share plugin | Smashzine

  9. Pingback: Free Useful jQuery Plugins and Tutorials

  10. The message board swallowed up the “img”s in my original post. Here it is again.

    The plugin doesn’t work out of the box if referenced from a web page rendered by servlet or just resides in a folder that doesn’t contain the jsShare folder. The problem is that all social media icons have hard-coded “src” attributes. Instead, the “img”s should have IDs assigned and “img”s URLs should be configured in the CSS files so that they can be easily overridden, e.g.:
    img#facebook {
    src: url(“images/facebook.png”);
    }

    Reply
  11. I tried this application It works fine.but I don’t want image. I want to get the facebook login page directly
    please tell me the solution,
    Thanks in advance.

    Reply
  12. I need some help implementing this. All but three of the images aren’t showing… where do the script reference the images or where is it pulling from so I can correct it?

    Reply
  13. This is a wonderful plugin, thanks :)

    I had some issues with the yoursiteurl and yoursitetitle being overwritten by the document url and title so I made the following amendments to lines 44 and 45 of jsShare.js:

    .replace(‘{ADDRESS}’, encodeURIComponent((settings.yoursiteurl==””?location.href:settings.yoursiteurl)))
    .replace(‘{TITLE}’, encodeURIComponent((settings.yoursitetitle==””?document.title:settings.yoursitetitle)))

    INSTEAD OF

    .replace(‘{ADDRESS}’, encodeURIComponent((location.href))
    .replace(‘{TITLE}’, encodeURIComponent(document.title))

    Just in case it’s something you want to look into :)

    Reply
  14. Very nice!! Works out of the box. A quick question. As I’ve turn off the animation, is there any way to replace the small icons with biggers?

    Thank you
    Maria

    Reply
  15. Very nice and works out of the box (at least for me). Just a question. I’ve turn off animation. Is there any way to replace the small icons with bigger ones?

    Thank you
    Maria

    Reply
  16. hi buddy I got it working. it didn’t work because in function.php it was loading jquery. once i deleted that it worked fine.

    so if anyone is using the BLANK-Theme as a template and cant get this to work. open up function.php and delete the Jquery function inside.

    Thanks for this great plugin my site is pretty much finished just a few updates will probably be made over the next few weeks check it out I have a forum on there too so sign up and get people to join.

    thanks

    Reply
    • hi buddy – how did you fix that? I am having same problem with images/buttons. I am using this plugin in an asp.net user control. I have tried all image paths but just buttons/images dont show up. All i am doing is referening jQuery at the top of the page but it doesnt work. Any help please

      Reply
  17. Pingback: jQuery & CSS Social Media Functions

  18. Hey buddy im still having problems, I have the plugin in the header of my site works great for a static site but on my blog (wordpress) it doesn’t show and I have tried http://www.riak.uk.com/wp-content/blah/blah/images/

    tried just /images/

    tried /wp-content/blah/blah/images/

    Nothing seems to work. If i had hair long enough I would pull it out. I will be really grateful for your help on this.

    Reply
  19. Does this work with wordpress? my whole site works in wordpress but I cant get this plugin to load. The javascript loads fine. Maybe im missing something but i dont think so it worked on my static site. Please help me.

    Reply
    • This is a jQuery plugin it can be plugged into any web site. For wordpress it wont attach to posts automatically, you have to add to each post manually.
      Im also working on wordpress version of this plugin.

      Reply
  20. you have Live Messenger…. but not Myspace? lol uhhhhh…. don’t know what was going through your mind when you made that decision

    Reply
  21. Pingback: Integradorweb.com » Blog Archive » Agrega a tu sitio iconos de Social Media con jQuery

  22. Nice plugin!!!

    Just a quick observation. The icons vanish as soon as i click the + button. There should be some animation..
    i.e; they should hide one by one as the bar collapses. and similarly they should show up one by one as the bar expands. Hope you agree. One thing more; the “+” symbol should be changed to “-” when the bar is in expanded state.

    Thanks,
    Arfan Baig

    Reply

Leave a Reply

Required fields are marked *.


8 − five =