You must have seen the drag to share functionality on Mashable that lets visitors share the content on popular social networks intuitively. Just drag one of the images in an article and you’ll be able to share the article on your favorite social network by dropping the dragged image over its icon. Even, Nettuts has written a nice tutorial on how to implement this functionality into your website using jQuery. But here is a much elegant solution to achieve the drag n share effect using jQuery with just a line or two of JavaScript code.
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
To add drag n share to a page, add reference to jquery and prettySociable in your page’s
Here’s the complete code you need to add into the
headtag. The plugin folder also includes images and css folders in addition to js folder. You’ll need them too as css folder contains styles necessary for drag n share elements and images folder contains icons for various social networks.Here’s the complete code you need to add into the
head tag.- <link rel="stylesheet" href="css/prettySociable.css" type="text/css" media="screen" charset="utf-8" />
- <script src="js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
- <!--[if lte IE 6]><script src="js/DD_belatedPNG.js" type="text/javascript" charset="utf-8"></script><![endif]-->
- <script src="js/jquery.prettySociable.js" type="text/javascript" charset="utf-8"></script>
The js folder also includes DD_belatedPNG.js which is used to fix PNG transparency issues in IE6 or older. You need to include that too.
Define Draggable Links
Now to add drag n share to your web page, add an anchor tag
<a href="#" > with another attribute rel="prettySociable".Initialize prettySociable
After you have added the rel attribute, you need to initialize the script. Add this single line of code, just above the
</body>- <script type="text/javascript" charset="utf-8">
- // Init prettySociable
- $.prettySociable();
- </script>
Check out your page in browser and you should get drag to share functionality working nicely.
Customizing the Default Settings
Customizing the Shared Information
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 thehref 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
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 toprettySociable function.
Here’s the complete settings object
- $.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 */
- });
The settings object is self explaining. You can specify which websites to use and also the icons to use for each website in the websites parameter.
You can enhance this drag n share script even further by using a shortened URL in the anchor tag’s href attribute.
P.S.: To get this script to work correctly in IE, you will need to set margin and padding valuesin the style-sheet for anchor elements which are draggable.
Comments
Post a Comment