Wednesday, 13 March 2013

Save selected text on a webpage to your Dropbox account - jQuery plugin


This script
- allows users on your webpage to save any text (selected using a mouse), directly to their dropbox account.
- there is also an option to save the complete webpage to their dropbox account.
- authenticates users with dropbox if not already logged in.






How to use:

The download pack contains the plugin file dropbox-save.min.js and the HTML file dropbox-save.html that I have deployed in my live demo.

1. Create your Dropbox application

Click here to navigate to the dropbox app creation page.



After you click "Create", fill up your App name and description in the popup.



Click "Create" and you will provided with an "App key" and an "App secret".



Now since its not a great idea to put these keys in your javascript directly, so we will encode them and then place it in your javacsript. Click here to navigate to the dropbox key encoder application. Copy your App key and App secret there and then get the single encoded key by clicking on the "Generate .. " button.



2. Javascript

Paste your encoded key in your javascript as shown below -


"dropboxIconUrl" is the link to a small dropbox icon that will be shown in a small box besides the user selected text. I have provided this icon file in the download, just upload it to your server and link it here.

3. Include the plugin - HTML

Before your body tag ends in your HTML, include the plugin as shown -


Voila! .. Now users can now save text or all your webpage data directly to their dropbox!
Contact me for any issues or updates :)

2 comments:

  1. Brilliant man !!!........... i wish if this could be done for evernote .....Fantastic stuff buddy, Keep it up :D

    ReplyDelete
  2. This is cool! Thanks for sharing this. :)

    ReplyDelete