featured2

Simple Drag to Share Plugin

By -

We’ve all seen the brilliant functionality on Mashable where news stories and interesting articles can be shared to social networking sites; the functionality is driven by the images and links accompanying the articles; you click and hold on an image and can then drag it into a toolbar to share it. It’s brilliant and intuitive, and in this article I’m going to show you how we can replicate this behavior with jQuery

This is how the plugin looks in action
56

View a demo of the plugin here: View Demo

Let’s get Started!

Get the prettySociable Plugin

To implement this functionality, you will need the prettySociable jQuery plugin written by Stéphane Caron. Download and extract the plugin, it contains everything you need to get up and running with drag n share.

Include the required files

[html]

[/html]

“To support transparency in IE6, you also need to add the following line (the script is included in the package)”

To get this script to work correctly in IE, you will also need to set margin and padding values in the style-sheet for anchor elements which are draggable.

[html]

[/html]

Initialize the plugin

[html]

[/html]

Define Draggable Links

Now to add drag n share to your web page, add an anchor tag <a href="#"> with another attribute rel="prettySociable"

Customizing the Default Settings

When you add rel=”prettySociable” on an anchor tag with its href=”#”, this will share the URL of the current web page and use the title and meta description in head tag to display the tooltip on drag.

But if you need to share a different URL instead of the current web page, specify a URL in the href attribute. Also you can customize the tooltip information which is shown on dragging. You can specify custom title and description in the rel attribute in this way.
rel="prettySociable;title:custom title;excerpt:custom excerpt;"

Customizing the Sharing Panel

“To disable websites you don’t want to activate sharing for, simply add the following line(s) after prettySociable initialization depending on which service you want to disable.”

[html]

[/html]

By default prettySociable supports eight social networks but you can customize the social networks and their icons to your requirement. For that you’ll need to pass a settings object to prettySociable function.

Here’s the complete settings object:
[javascript]
$.prettySociable({
animationSpeed: ‘fast’, /* fast/slow/normal */
opacity: 0.90, /* Value between 0 and 1 */
share_label: ‘Drag to share’, /* Text displayed when a user rollover an item */
share_on_label: ‘Share on ‘, /* Text displayed when a user rollover a website to share */
hideflash: false, /* Hides all the flash object on a page, set to TRUE if flash appears over prettySociable */
hover_padding: 0,
websites: {
facebook : {
‘active’: true,
‘encode’:true, // If sharing is not working, try to turn to false
‘title’: ‘Facebook’,
‘url’: ‘http://www.facebook.com/share.php?u=’,
‘icon’:’images/prettySociable/large_icons/facebook.png’,
‘sizes’:{‘width’:70,’height’:70}
},
twitter : {
‘active’: true,
‘encode’:true, // If sharing is not working, try to turn to false
‘title’: ‘Twitter’,
‘url’: ‘http://twitter.com/home?status=’,
‘icon’:’images/prettySociable/large_icons/twitter.png’,
‘sizes’:{‘width’:70,’height’:70}
},
delicious : {
‘active’: true,
‘encode’:true, // If sharing is not working, try to turn to false
‘title’: ‘Delicious’,
‘url’: ‘http://del.icio.us/post?url=’,
‘icon’:’images/prettySociable/large_icons/delicious.png’,
‘sizes’:{‘width’:70,’height’:70}
},
digg : {
‘active’: true,
‘encode’:true, // If sharing is not working, try to turn to false
‘title’: ‘Digg’,
‘url’: ‘http://digg.com/submit?phase=2&url=’,
‘icon’:’images/prettySociable/large_icons/digg.png’,
‘sizes’:{‘width’:70,’height’:70}
}
//add more social networks here
},
tooltip: {
offsetTop:0,
offsetLeft: 10
},
popup: {
width: 900,
height: 500
},
callback: function(){} /* Called when prettySociable is closed */
});
[/javascript]

Use CSS for further styling, pointer style for instance and have fun. i’ll see you on another tutorial. Ciao

Share Your Thoughts

Copyright © 2011, 2016 - BWD MEDIA
Web Design & Digital Marketing Agency
Call Now Enquire