Привет, друзья и гости моего блога! Сегодня покажу вам ещё один способ, как сделать прямую ссылку на скачивание файла, чтобы посетитель мог спокойно скачать файл не покидая страницу сайта/блога. В прошлый раз мы использовали для этого Сайты Google, а теперь возьмёмся за Диск Google. Надо же нам, использовать хостинг по максимуму, не только хранить там файлы, скрипты, но и дать читателям скачивать файл на прямую, не переходя ни на какие сторонние сервисы. И так, прямая ссылка на скачивание файла с Диск Google.
Прямая ссылка на скачивание файла с хостинга Google Диск
Показываю небольшую хитрость, как можно скачивать файлы с хостинга корпорации добра Google, не покидая страницы сайта. Нам нужна будет только ссылка общего доступа для чтения файла, вот эта:
Дамы и господа, кто не знает как создать папку, загрузить файл и открыть доступ к нему, прошу посмотреть подробную статью, тут. Там правда инструкция по старому интерфейсу, но принцип такой же. Для тех, кто в курсе, продолжим. Ссылка общего доступа имеет такой вид:
https://drive.google.com/file/d/0B5-UW792ytkKY2d6azFaUlpRa2M/view?usp=sharing
Такая ссылка нам не нужна, нам нужен только идентификатор файла, посмотрите выделено красным цветом. Вот этот ID файла подставляем к этой ссылке, после знака =
https://drive.google.com/uc?export=download&id=
И в итоге, у нас должна получится вот такая ссылка на наш файл.
https://drive.google.com/uc?export=download&id=0B5-UW792ytkKY2d6azFaUlpRa2M
Вставляем ссылку на скачивание, как обычно вы делаете при написание статьи в Blogger: "Добавить или удалить ссылку":
Всё, готово. Друзья, а можно для этого использовать не текстовою ссылку, а красивую кнопку скачать. Я покажу вам, как создать кнопки Скачать и Демо, а вы можете использовать их вместе или по одной. Вот такие кнопки на CSS. Наведите на них мышкой, как переливаются красиво, просто супер:
Как вы можете наблюдать, работают кнопочки даже на платформе WordPress, поэтому такие штучки можно использовать на любом сайте.
Кнопки Демо и Скачать на CSS для сайта
Для того, чтобы создать такое великолепие на своём блоге, надо добавить в ваш шаблон стили кнопок. Находите такую строчку ]]></b:skin> и чуть выше вставляете такой код:
|
1 2 3 4 5 6 7 8 |
/* -- Button --*/ .button{float:left;list-style:none;text-align:center;width: 100%;margin:5px 0;padding:0;font-size:14px;clear:both;} .button ul {margin:0;padding:0} .button li{display:inline;margin:0;padding:0} .demo {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #E55E48; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s;letter-spacing:1px; } .download {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #5FAAE3; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s; letter-spacing:1px;} .demo:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 } .download:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 } |
Всё, сохраняете шаблон и при написание статьи, в том месте где будут размещены кнопки вставляете кодик, в режиме HTML:
|
1 2 3 4 5 6 7 |
<div style="text-align: center;"> <ul class="button"> <li><a class="demo" href="здесь, ссылка на демонстрацию" target="_blank">Demo</a></li> <li><a class="download" href="здесь, ссылка на файл" target="_blank">Скачать</a></li> </ul> </div> <div class="clear"></div> |
Далее, ставим свои нужные ссылки и готово. Если надо использовать одну кнопку, естественно надо убрать одну строчку из кода. Вот, други мои, как то так. На этом позвольте мне с вами попрощаться, совсем не на долго. Удачи вам и всего хорошего.
Добрый день, Сергей!
Всё получилось, очень подробно и просто всё расписано. Ссылка на файл у меня имеет сейчас такой вид:
drive.google.com/open?id=0B9M_cQ_tqRzUTjNVN2pyY2N6Yjg&authuser=0
соответственно индентификатор файла будет: 0B9M_cQ_tqRzUTjNVN2pyY2N6Yjg
далее сделал по уроку как у Вас и всё получилось. Немного не понял с красивыми кнопками, вот эту часть: «… при написание статьи, в том месте где будут размещены кнопки вставляете кодик, в режиме HTML.» Я так понял, что когда пишешь новое сообщение в блоге, то сразу есть возможность добавить HTML-код, верно? И ещё один вопрос, не пробовали ли Вы размещать файлы на google диск в формате .swf, чтобы например можно было разместить flash-баннер у себя в блоге.
Привет, Михаил! Всё верно. Когда пишите статью в редакторе сообщений, переключаетесь в режим HTML и вставляете код кнопок, вставляете нужные ссылки.
Нет, такой файл не размещал, для этого по моему, есть специальные хостинги. 🙂
Не работает, может гугл что-то поменял.
Александр, что именно не работает? Ссылка или кнопки. 🙂
Разобрался. Пытался сделать прямую ссылку на скачивание на гугл док. В общем моя ошибка. Ссылка на PDF получилась. Спасибо.
Вот и хорошо. 🙂
Спасибо большое! так красивенько получилось!!!
Пожалуйста, Ирина! Вы имеете ввиду кнопки? 🙂
давно искал подобное буду пробавать!
Спасибо! Частенько есть в этом нужда. Теперь — проще ))
Спасибо Вам огромное ! многое узнал от вас и буду внедрять в свой сайт | блог 🙂
Здравствуйте, Сергей! А если мне нужно, чтобы не скачивали с диска, а читали информацию. Подскажите пожалуйста такой вариант решения. Буду признательна Вам! С уважением, Елена!
Привет!
Так просто возьмите ссылку общего доступа для чтения файла и не меняйте её.
Спасибо!
Чтобы дать ссылку на папку с файлами, а не на ее открытие, алгоритм будет такой же?
Спасибо. Работает.
Спасибо, то что нужно. А то уже надоело на яндекс диск заливать.
а если файл для скачивания большой? тогда этот способ не хочет работать. Вместо скачивания выдет все-таки страницу гуглдиска с оповещением ято файл слишком большой и его невозможно проверить на вирусы. и дает кнопку «все равно скачать». Т.е. мы все-таки ходим с нашего сайта и показываем «вовсеуслышанье» ссылку на скачивание. Как этого избежать? как сделать скачивание больших файлов?
А вы в архиве файл загружаете и потом скачиваете? И какой размер файла?
есть файлы-архивы, есть файлы pdf или html (книги в формате html вместо pdf).
Размер самого маленького, который пробовала и он переходит на проверку антивируса из-за своего большого размера — 480 МБ.
Заметила что на странице проверки и предупреждения на антивирус на кнопке «все равно скачать» в ее ссылку система добавляет параметр «confirm=» и каждый раз при каждой загрузке этот параметр имеет новые случайные значения.
На одном из ресурсов увидела совет поставить параметр «confirm=no_antivirus» — все равно неработает, все равно не дает автоматического скачивания и застряет на странице проверки антивируса
В таком случае используйте эти плагины для больших файлов. Можно использовать свой хостинг или давать внешнею ссылку на файл.
🙂 большое спасибо за совет, попробую с плагинами. А если страница с кнопкой для скачивания вне WordPress? как организовать автоматическое скачивание кодом?
я использовала конструкцию файл-прослойку (см. ниже) но она не хочет работать с большими файлами, выдает недоступной страницы :
// Имя скачиваемого файла
$file = «name-file»;
// Контент-тип означающий скачивание
header(«Content-Type: application/octet-stream»);
// Размер в байтах
header(«Accept-Ranges: bytes»);
// Размер файла
header(«Content-Length: «.filesize($file));
// Расположение скачиваемого файла
header(«Content-Disposition: attachment; filename=».$file);
// Прочитать файл
readfile($file);