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-https://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

27 thoughts on “Add Mashable Like “Drag To Share” To Blogger Blogs

  1. 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.. :))

  2. 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.

  3. @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.

  4. 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.

  5. @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(

  6. 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

  7. 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

  8. 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.

  9. 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 🙂

  10. 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

  11. @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 🙂

  12. @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.

Leave a Reply

Your email address will not be published. Required fields are marked *