Add Mashable Like "Drag To Share" To Blogger Blogs

You would have observed a unique bookmarking tool being used at Mashable: "Drag To Share". In 'Drag To Share', when you hover your mouse on some links (usually images), a message is displayed is to drag and share the page.


Script in Action - LIVE DEMOS:
  • Check out "Drag and Share" on Mashable (drag the image in the post)
  • "Drag to Share" is a project by No Margin For Errors, check out the demo on their project-page.
  • Now see a working demo on a Blogger blog: Hot Orange Template [Drag the image of the orange to see the sharing options]

If you are impressed with the widget, then Add "Drag To Share" to your Blogger blog:

STEP #1

Log in to Blogger, go to Layout -> Edit HTML

Now find this code:
</head>

And immediately BEFORE/ABOVE it, paste this code:
<!--DRAG-TO-SHARE-STARTS-->
<link charset='utf-8' href='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/prettysociable.css' media='screen' rel='stylesheet' type='text/css'/>
<script charset='utf-8' src='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/jquery-1.3.2.min.js' type='text/javascript'/>
<!--[if lte IE 6]><script src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/dd_belatedpng.js" type="text/javascript" charset="utf-8"/>
<![endif]-->
<script charset='utf-8' src='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/jquery.prettysociable.js' type='text/javascript'/>
<!--DRAG-TO-SHARE-STOPS-http://bloggerstop.net-->

Now find this code in the template:
</body>

And immediately ABOVE/BEFORE it, paste this code:
<!--DRAG-TO-SHARE-STARTS-->
<script charset='utf-8' type='text/javascript'>
$.prettySociable();
</script>
<!--DRAG-TO-SHARE-STOPS-->

Save The Template.

STEP #2

IMPORTANT: Now whenever you want to apply this hack to any of your images/hyperlinks (links), then add a rel="prettysociable" attribute to the "a" tag. (You can edit your previous posts to add this attribute to your images).

For example, a link (hyperlink) with this hack will look like this:
<a href="http://www.google.com/" rel="prettysociable">Link To Google</a>

and a linked image with this hack will look like this:
<a href="http://www.google.com/" rel="prettysociable"><img src="http://www.google.co.in/intl/en_com/images/logo_plain.png" /></a>

STEP #3

Download and save the files used in this tutorial as a backup on your PC [Download Link]

Credits: No Margin For Errors

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Previous
Next Post »

28 comments

Write comments
January 13, 2010 2:21 PM delete

your demo where is it ? on orange hot ?
hmmm...its a high style (professional) hack :X

Reply
avatar
January 13, 2010 2:32 PM delete

Yeah thats the demo on a Blogger blog.
Thanks for the kind feedback Beben :)

Reply
avatar
January 14, 2010 1:39 PM delete

Sorry not related. Big Favor please.

Can you take a look at my site http://lists2day.blogspot.com and see why there's a thick dark gray line before my footer? I tried to set all borders to zero and white but it still shows.

I guess templates are made that way. But is there a way that I can get rid of it? Thanks!

Reply
avatar
January 14, 2010 3:29 PM delete

Hi Divya.. I haven't even read anything of the post, but wanted to tell you something weird..

Someone send/sent me a e-mail saying he wanted a link exchange, but the weird thing is that he said I was the owner of Bloggerstop...

Take a look:

http://www.imagengratis.org/images/wtfdmwv9e.png

Just checked and there is no link to your web :-/

You may want to check it out, so take the time to read, and give me (If you want), any mail you may want to send you that weird thing xD

Now, time to read the post.. :))

Reply
avatar
January 15, 2010 7:09 AM delete

Hey Daniel, that was really kinda weird. Anyways thanks for passing the information :)
It's alright, I don't have to reply to that mail, you may delete it if you want.

Reply
avatar
January 17, 2010 10:06 AM delete

hi
wonderful post and hack.
i have appyled the drag and show pagenr hack.
oly the pahe nr. hack shows and that is kind of od looking to. it only shows 2 pages. www.desiarchive.blogspot.com)
can u take a look and tell wats wrong. have done step to step as u haven showen

Reply
avatar
January 17, 2010 11:47 AM delete

@TruthSeeker

In the pagination hack, you have not edited the no. of posts to be shown in the next page (by deafult it is set at 10). You have total 12 posts, 2 posts on page 1 (homepage) and so in the next page (page-2) other 10 posts are being shown. If you want to have more pages in the pagination hack, then set the number to 2/3.

And to apply this "Drag to Share" hack to your images, you have to edit your previous posts and add that rel="prettysociable" attribute to your images.

Reply
avatar
January 17, 2010 11:23 PM delete

You have copied this stuff from the bellow link

http://iblogerz.blogspot.com/2009/12/drag-to-share-social-bookmarking.html

Published Date 12/2009

better Give Some Credits To Author

Reply
avatar
January 18, 2010 8:21 AM delete

I Have downloaded, modified and used the files from "no margin for errors", I Have linked to them twice in the post and clearly mentioned them as the authors.
You can check the javascript file for the editing I Have done (pictures hosted to my personal account.)

AND FOR YOUR KIND INFORMATION YOU HAVE NOT CREDITED THE ACTUAL AUTHOR OF THID WIDGET (i.e no margin for errors), WHICH IS A VIOLATION OF THEIR COPYRIGHTS, which I'm sure you wouldn't even have read before publishing your post.

Reply
avatar
January 18, 2010 9:16 AM delete

@Player (a.k.a. iblogerz.blogspot.com)

Not only have you published that "drag to share" post without giving credits to the author, you have also published the article "Popular posts widget - new and working" COPIED ENTIRELY from BloggerStop.net without giving an active link to me !!!
Previously I was like this :-L
Now I'm x(

Reply
avatar
January 18, 2010 11:44 PM delete

Ok . I understand what you are trying to say.
it was my mistake that i argued with you without knowing the truth. and i apologize for it. sorry For that

Reply
avatar
January 22, 2010 12:11 AM delete

Hi Divya,

Excellent write up, and it looks awesome in the demo. But somehow it is not working for me. I tried it in one of my posts in my blog. I am using the attribute "prettysociable" along with other attributes like imageanchor="1" style="margin-left, 1em, margin-right, 1em.
Is it OK? Any idea why it is not working?? Any help will be much appreciated. Thank you

Manuel Jose

Reply
avatar
January 22, 2010 12:23 AM delete

@Manue,

I just checked your blog, but couldn't find the code in it. Leave the code as it is, and let me check it for errors.

Reply
avatar
January 22, 2010 5:14 AM delete

@Divya

Oops, sorry about that. Since it was not working I had removed all the code. Now I have once again put the code in my blog. And I had put the "prettysociable" attribute tags in pictures of this particular post.
http://techdrivein.blogspot.com/2010/01/5-multimedia-apps-for-ubuntu-you-cant.html

I guess you can check it now. And thank you for your really quick response too. Really appreciate it :-)

Reply
avatar
January 22, 2010 8:50 AM delete

Hi Manuel,

I have checked your blog, coding is perfect.
The problem is jquery.com has updated the jquery-file to 1.4 from 1.3, a week back.

Anyways thanks to you, I have updated the post with a new link. copy and use the new code. It'll definitely work this time.

Reply
avatar
January 22, 2010 9:24 PM delete

i have done as mentioned but its not working for me either

Reply
avatar
January 22, 2010 9:31 PM delete

Hi Divya,

Once again, thank you for your help and support. I have updated all the code with the new ones you have mentioned. But still no results. Is this has to do anything with the template I am using? I am not sure.

Thank you :-)

Reply
avatar
January 24, 2010 1:26 AM delete

This one is Super! Tnx so much Divya.

I was wondering if I could post your tutorial on my blog.? I think most of my readers will love your post.

*All the credits will go to you and to no margins margins for error

Reply
avatar
January 24, 2010 3:17 AM delete

Yes please share the article with your readers Mark...

@Manuel,
I have checked the code on your blog, it's all correct. Donno whats the problem is :-/

Reply
avatar
January 25, 2010 1:41 AM delete

@Divya

That is fine, may be I will try it some other time. Thank you for the kind of support you gave. Excellent blog by the way, keep up the good work :-)

Reply
avatar
mcc
January 25, 2010 6:49 PM delete

Is there a way to add the rel="prettysociable" to the post title link from the main Blogger page?

www.winstonsbrand.com

Reply
avatar
January 26, 2010 1:59 AM delete

@mcc

Yes that's possible, but as this will be template-specific code, so I didn't mention it in the post.
If you want it in any blog of yours, then send me your template from the contact page.

Reply
avatar
January 29, 2010 4:28 AM delete

Thanks!

This is a very good widget.

I just wanna ask, how do you apply this to all images within post without doing step #2 for each and every image?

Reply
avatar
January 30, 2010 9:30 AM delete

@TechPinas,

That's a nice suggestion..but sorry I can't help you in that, may be that requires some changes in the javascript file.

Reply
avatar
June 15, 2010 8:56 PM delete This comment has been removed by the author.
avatar
June 27, 2010 10:47 AM delete

hi i tried this a lot but didnt work..can you please tell where excatly we have to paste the codes ??

or any gadget made for this in blogspot bloggers? plz help me soon!
thanks

Reply
avatar
June 27, 2010 3:04 PM delete

In which of your blogs, are you trying this?

Reply
avatar

Comments are moderated on this blog

Allowed HTML tags: <b>, <i> and <a>

Comment Like This! and Optimize your blog EmoticonEmoticon