09/05/13 21:02 Filed in: RapidWeaver | Concrete5
However this is good news for consumers, who now have many different services available. Plus of course, an ever increasing amount of online storage space and lots of extra addons to make integration easier and more diverse than ever before. A prime example of things moving forward being an announcement from Google earlier today, with news of their new save buttons, tied to Google Drive accounts.
These save buttons work in much the same was as conventional 'Pin' buttons, used by services like Pinterest. So with these new save buttons, when a user clicks on the button, they have the option to save files to their Google Drive. This enables visitors to your website to save many types of files directly to their Google Drive account. Files could include PDF documents, text files, images, sound files and various other things. Even publications like eBooks could be provided with a save button. So the benefits could be pretty advantageous for various types of websites.
Using these new save buttons is pretty easy. You certainly do not need specialist stacks, blocks, plugins or other addons to make them work. Every button can be setup with a simple code snippet like this:
<script src="https://apis.google.com/js/plusone.js"></script> <div class="g-savetodrive" data-filename="Product Datasheet.pdf" data-sitename="Ace Widgets LTD" data-src="http://www.example.com/resources/product_datasheet_2013.pdf"> </div>
The first line calls a Javascript file from Google API's, loading the code for the button and enabling its functionality within the page. The second line and onwards is a normal
<div> container. This has a class attribute of g-savetodrive,
and this tells Google where to insert the button. It also contains
three HTML5 data attributes, where information about the file is
specified:• Filename is the name of the file, as you want it to appear in Google Drive
• Sitename is the name of your website or company, providing the file
• Src is the source (URL) of the file for people to save
If pasting the code into a RapidWeaver styled text region, remember to highlight the code and select Ignore Formatting from the RapidWeaver Format menu. This action will remove surplus line breaks and other formatting. RapidWeaver users should also note that you can save this code as a code snippet, for quick reuse in future.
Example
Here is an example of an image (hosted on Dropbox) and a button to save the image to your Google Drive account:
The popup containing the file details (when you hover over the button) is generated automatically by the Javascript code. There is nothing extra that you need to add here to make this work. If the person viewing the page is already logged into their Google Drive account, then they will see the invitation to save the file to Google Drive. If a person is not signed into their Google account, then they will instead be shown a 'Sign in to save this item to Google Drive' message instead. You can safely use multiple Save buttons on the same page.
If you are concerned about the implications of page loading when using the save button, an asynchronous loading version is also available, together with further details about the code: https://developers.google.com/drive/savetodrive#javascript_api
From my early experiments, this code works fine in RapidWeaver and Concrete5. The only proviso is that the theme absolutely must be HTML5, in order to support those data attributes used. Otherwise I'd imagine some potentially nasty problems may occur in older web browsers, if you try to force HTML5 on them without the necessary fallbacks. Currently this code only works for Google Drive. However I reckon it won't be long now until other cloud storage services follow suit with their own saving buttons.
