Всем привет! Сегодня мы поговорим о такой замечательной функции от Google – это кнопка Google Drive на Вашем сайте. Мы уже с Вами успели рассмотреть статью, в которой я рассказывал про возможность добавления кнопки Google+ на сайт, а также добавление комментариев от социальной сети Google+.
Кнопка Save to Drive от Google — это новая функциональная «фишка». Данная кнопка позволяет сохранить с любого URL-адреса, определенный файл, сразу в корневой каталог аккаунта на Google Drive. Данная функция работает на транспорте CORS, а рабочий пример этой функции у меня выглядит следующим образом:
Это появляется при загрузке, например, страницы. Потом, когда Вы хотите сохранить данный файл, то у Вас появиться следующее:
Ну и наконец, когда Вы уже сохраните, то у Вас картинка будет следующей:
Сам рабочий пример, Вы можете посмотреть по ссылке. А рабочий код у Вас будет следующим:
<!DOCTYPE html>
<>
<>
< http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<>Save to Drive</>
< type="text/css">
#_img_{display: block; width: 120px; height: 160px; margin-bottom: 8px;}
#___savetodrive_0 iframe{width: 100px !important;}
</>
< type="text/javascript" src="https://apis.google.com/js/plusone.js"></>
</>
<>
< id="_img_" src="google-clock-150x150.jpg" />
< class="g-savetodrive"
data-src="http://pressdev.ru/wp-content/uploads/2013/05/google-clock-150x150.jpg"
data-filename="Мой файл"
data-sitename="PressDev">
</>
</>
</>Хочется обратить Ваше внимание на то, что в строке css-стилей используется инструкция !important. С помощью это мы можем задать нашей кнопке нужный размер. Если брать английский вариант, то кнопка с надпись Save, по умолчанию выглядит по размером нормально, а в русском варианте, с надписью Сохранить, нам придется корректировать кнопку, то есть она не будет корректно помещаться в размер кнопки, в ширину в 57 пикселей, поэтому мы ее и расширяем.
Также советуем почитать на PressDev.RU
Короткая ссылка: http://pressdev.ru/?p=2504
Loading...