jQuery Social Media Share and Bookmark Plugin: jsShare
Nobody can ignore the significance of social media on this age of communication and interactivity. Social media have made social interplay very straightforward and interactive, construct upon cellular applied sciences and web-base methods, social media are simply accessible to anybody gaining access to the web. Social media applications are used for sharing data in an interactive manner, these social media functions additionally present options(APIs) to share data from different functions. E.g. blogs, web pages, cellular functions and many others.
Contents
jsShare is a jquery plugin that helps you only share your contents with current social media services, all social media like FB, Twitter existing APIs for functions to share materials from different functions. jsShare encapsulates the inner sharing logic and supplies you neat and compact interface so as to add social media sharing performance to your internet pages and functions naturally. jsShare is rendered as a compact button by default; width is toggled upon clicking. jsShare additionally has a new fish eye animation impact for social media buttons, which might be turned off by setting worth of animate parameter to false.
jsShare plugin at present helps the next social media.
- Fb
- Google Buzz
- Stumble Upon
- Digg
- Scrumptious
- Reside Messenger
- animate: If actual fish eye impact will likely be enabled, default is true.
- ,’: Determines whether or not plugin will probably be expanded or collapsed initially, values for this parameter are ‘compact’ and ‘expanded’, default is ‘compact.’
- Pace: Velocity in milliseconds at which plugin collapses and expanded, default is 1000.
- Yoursitetitle: Title of your web site, default is ”.
- Yoursiteurl: Url of your website/weblog, default is ”.
- Yoursitename: Title of your website/weblog default is ”.
- Desc: Quick description that you just wish to seem on social media.
- Minwidth: Width when the plugin is collapsed, default is 40.
- Maxwidth: Width when the plugin is expanded, default is 250.
- fb: If true FB share button will likely be show, default s true.
- Twitter: If true Twitter share button will probably be shown, default s true.
- Digg: If true digg share button will likely show, default s true.
- Reddit: If true reddit share button will probably be shown, default s true.
- Stumbleupon: If true StumbleUpon share button will likely show, default s true.
- Messenger: If true dwell messenger share button will probably show, default s true.
- Scrumptious: If true scrumptious share button will likely show, default s true.
- Linkedin: If true linkedin share button will likely show, default s true.
- Googlebuzz: If true google buzz share button will probably show, default s true.
In your HTML file add the next within the head part.
- Add a reference to newest jQuery script
- Add a reference to jsShare.js file
- Add a reference to jsShare.css file
Add block ingredient(div) the place you need social media buttons to be added.
Now add the next code to your HTML file’s head part.
<script kind="textual content/javascript">
$(doc).prepared(perform() );
</script>
Right here is the entire code for instance above.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.zero 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.four.four.min.js" kind="textual content/javascript"></script>
<script src="jsShare.js" kind="textual content/javascript"></script>
<hyperlink href="jsShare.css" rel="stylesheet" kind="textual content/css" />
<script kind="textual content/javascript">
$(doc).prepared(perform() );
</script>
<type kind="textual content/css">
physique
#wrapper
#header
#header-contents
#demo
h1, h2, h3, h4
h2
h3
#demo p
</type>
</head>
<physique>
<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>
Unfold the phrase</p>
<div id="buttons">
</div>
<p>
Unfold the phrase</p>
<div id="buttons-expanded">
</div>
</div>
</div>
</physique>
</html>
- Overall
- Feature Availability
- Customization
- Design Quality
- Flexibility
Wow that was strange. I just wrote an really long comment butt after I clicked submit
mmy comment didn’t show up. Grrrr… well I’m not writing all that over again. Anyhow,
just wanted to say fantastic blog!
Feel free to urf to my blog: Williams
Hey There. I discovered your weblog the use of msn. That is a very smartly written article.
I’ll make sure to bookmark it and come back to learn more of your helpful
information. Thank you for the post. I will definitely comeback.
Cool plugin 🙂 Couple of ideas:
Twitter share should use the twitter intents functionality (new URL, and extra options such as VIA, Related, etc).
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.
Really….outstanding site and content listed here.
The publications on this website really are insightful!
! 😉 Any sort of RSS feed on this website???
I had been looking for constantly up to date posts relating to
social media.
Thanks…
Thanks..
very nice example.thanks a ton
Very nice example. Thanks.
Very nice share plugin. Thanks for plugin.
Thank You So Much It helps me to do my project.
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
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.
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
I have the same problem. Also under jquery mobile the page has to be refreshed to show.
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”);
}
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.
Hi friend,
Really nice blog. your post jQuery social media share and bookmark plugin
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?
you’ll see it within getButton function
Can someone please expand on the Google+ button?
$(”).appendTo(‘#SocialMediaButtons ul’);
will work as a dirty hack 🙂
$(”).appendTo(‘#SocialMediaButtons ul’);
will work, more than a bit dirty mind!
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 🙂
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
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
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
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
My problem was that I was loading Jquery twice. so just make sure its being loaded once and the image paths are correct
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.
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.
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.
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.
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.
Very nice plugin!
Would be great, if using an URL shortener for twitter.
Thanks.
wow very like this script
you have Live Messenger…. but not Myspace? lol uhhhhh…. don’t know what was going through your mind when you made that decision
I didn’t like the default icon 🙁 anyhow i’ll include Myspace as well 🙂
Thank you very much, very useful plugin
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