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.
- Google Buzz
- Stumble Upon
- Digg
- Delicious
- 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>
18/12/2012 @ 2:17 am
Very nice example. Thanks.
Pingback: jQuery | Pearltrees
23/10/2012 @ 12:32 am
Very nice share plugin. Thanks for plugin.
07/08/2012 @ 2:46 pm
Thank You So Much It helps me to do my project.
Pingback: Thursday Roundup 11 | EGrappler
18/05/2012 @ 4:33 am
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
18/05/2012 @ 4:53 am
You need to put the images folder in the same directory where you’ve placed you html file. I’ll add another parameter later to pass exact path to images directory.
18/05/2012 @ 2:01 pm
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
10/09/2012 @ 2:58 pm
I have the same problem. Also under jquery mobile the page has to be refreshed to show.
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
Pingback: Partager dans les réseaux sociaux : jsShare | ZUC Blog
Pingback: jsShare - jquery Social Media Share plugin | Smashzine
Pingback: Free Useful jQuery Plugins and Tutorials
02/02/2012 @ 4:45 pm
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”);
}
20/12/2011 @ 1:38 pm
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.
07/11/2011 @ 10:16 pm
Hi friend,
Really nice blog. your post jQuery social media share and bookmark plugin
13/08/2011 @ 12:18 am
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?
16/08/2011 @ 9:08 pm
you’ll see it within getButton function
02/08/2011 @ 6:44 pm
Can someone please expand on the Google+ button?
28/09/2011 @ 1:01 pm
$(”).appendTo(‘#SocialMediaButtons ul’);
will work as a dirty hack
28/09/2011 @ 1:03 pm
$(”).appendTo(‘#SocialMediaButtons ul’);
will work, more than a bit dirty mind!
22/06/2011 @ 11:31 pm
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
11/06/2011 @ 5:15 am
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
10/06/2011 @ 5:23 pm
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
07/06/2011 @ 9:53 pm
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
13/06/2011 @ 6:57 pm
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
05/08/2011 @ 12:09 pm
My problem was that I was loading Jquery twice. so just make sure its being loaded once and the image paths are correct
Pingback: jQuery & CSS Social Media Functions
29/05/2011 @ 5:53 pm
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.
30/05/2011 @ 12:05 pm
can you show me the link where you are using the plugin, it would be easy for me to figure out the exact problem and suggest the solution.
06/06/2011 @ 10:50 am
Im trying to use it here http://www.riak.uk.com/blog/
it is finding the CSS and Javascript file. just not loading the button or images.
17/05/2011 @ 9:56 pm
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.
18/05/2011 @ 4:17 am
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.
06/05/2011 @ 10:00 am
Very nice plugin!
Would be great, if using an URL shortener for twitter.
Thanks.
05/05/2011 @ 9:53 am
wow very like this script
30/04/2011 @ 11:40 am
you have Live Messenger…. but not Myspace? lol uhhhhh…. don’t know what was going through your mind when you made that decision
01/05/2011 @ 6:42 am
I didn’t like the default icon
anyhow i’ll include Myspace as well 
29/04/2011 @ 8:04 pm
Thank you very much, very useful plugin
Pingback: Integradorweb.com » Blog Archive » Agrega a tu sitio iconos de Social Media con jQuery
25/04/2011 @ 11:38 am
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