- Система «Розповісти друзям» вКонтакте, щоб завантажити файл
- Як це працює?
- Як зробити?
- HTML
- CSS
- JS
- важливо
Наша взаимовыгодная связь https://banwar.org/
Вітаю Вас, дорогі читачі блогу. На численні прохання читачів сьогодні ми з Вами будемо робити класну систему «Поділися з друзями» вКонтакте, щоб завантажити файл з використанням JQuery і CSS.
Друзі, хочу сказати, що ця система в багато разів збільшить кількість посилань на Ваш ресурс, ну дивлячись звичайно, що Ви пропонуєте завантажити і яка у Вас відвідуваність.
Ще хочеться сказати, що дана система дуже схожа на класну систему « Твітні, щоб завантажити «, Яка в свою чергу збільшує кількість посилань в Твіттері. В цьому випадку практично все те ж саме тільки не багато мною змінено. І в кінцевому підсумку все просто чудово вийшло :-)
Ну а тепер давайте перейдемо до самої системи.
Система «Розповісти друзям» вКонтакте, щоб завантажити файл
Як це працює?
Як завжди все дуже просто. :-) Так само точно як і в «Твітні, щоб завантажити». Якщо користувач хоче завантажити на Вашому сайті будь-якої файл, йому потрібно поділитися саме тієї новиною яку Ви вкажете в скрипті. Інакше не вийде. А як тільки користувач поділився новиною, відразу ж активується заповітна кнопочка «Завантажити».
Ось бачите не так вже й складно. :-)
Як зробити?
Для початку я намалював нескладний шаблон сторінки з кнопкою. Його Ви можете подивитися в прикладі, а також використовувати у себе на сайті, він доступний в исходниках. На дану сторінку буде перекидати користувача для того щоб він там зміг виконати заповітні операції по завантаженню файлу.
Потім я зверстав даний шаблон і ось що у мене вийшло:
HTML
<! DOCTYPE html> <html> <head> <meta charset = "utf-8" /> <title> Поділитися з друзями </ title> <script src = "http://ajax.googleapis.com/ajax/libs /jquery/1.6.0/jquery.min.js "> </ script> <script src =" assets / js / jquery.vkAction.js "> </ script> <script src =" assets / js / script.js "> </ script> </ head> <body> <div id =" wrapper "> <div id =" text "> </ div> <div id =" vk "> <a href =" # "id = "tweetLink"> <img width = "262" height = "262" src = "img / vk.png" /> </a> </ div> <div id = "str1"> </ div> <div id = "str2"> </ div> <a href="#" class="downloadButton"> </a> <div id = "copy"> За скрипт спасибі <a href = "http://tutorialzine.com/ "> tutorialzine.com </a> / Урок підготував <a href="http://beloweb.ru/"> beloweb.ru </a> </ div> </ div> </ body> </ html>Як бачите, зовсім не велика і не складна сторінка.
Головне на початку між тегами <head> і </ head> додати такі скрипти:
<Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"> </ script> <script src = "assets / js / jquery.vkAction.js "> </ script> <script src =" assets / js / script.js "> </ script>jquery.min.js - це бібліотека JQuery, якщо вона у Вас вже стоїть повторно ставити не потрібно
jquery.vkAction.js - даний скрипт викликає вікно вКонтакте.
script.js - а ось цей скрипт активує кнопку «Завантажити».
Тепер давайте небагато додамо стилів CSS, для того щоб не багато прикрасити нашу сторінку.
CSS
Друзі, все картинки, що вказані в стилях Ви зможете знайти в исходниках в папці img.
* {Margin: 0; padding: 0; } Body {margin-top: -50px; width: 100%; height: 100%; color: # 555; background: url (img / body.jpg) repeat 100% 0; font-family: 'Ubuntu', sans-serif; font-size: 0.85em; line-height: 135%; } Ul {list-style: none; } A {color: # 538e28; text-decoration: none; } A: hover {color: # 69b432} #wrapper {position: relative; border: 0px solid # d6d6d6; width: 1004px; height: 787px; background: url (img / bodycont.jpg) 50px 0px no-repeat; margin: 0 auto; } #Copy {position: absolute; left: 330px; bottom: 0px; border: 0px solid # d6d6d6; font-size: 11px; color: #bbb; } #Text {position: absolute; left: 0px; top: 150px; border: 0px solid # d6d6d6; width: 1004px; height: 157px; background: url (img / text.png) no-repeat; margin: 0 auto; } #Vk {position: absolute; left: 370px; top: 300px; border: 0px solid # d6d6d6; width: 262px; height: 262px; opacity: 0.5; -moz-transition: all 0.2s 0.01s ease-in; -o-transition: all 0.2s 0.01s ease-in; -webkit-transition: all 0.2s 0.01s ease-in; } #Vk: hover {opacity: 1.0; } # Str1 {background: url (img / str1.png) no-repeat; position: absolute; left: 140px; top: 290px; border: 0px solid # d6d6d6; width: 262px; height: 262px; } # Str2 {background: url (img / str2.png) no-repeat; position: absolute; right: 100px; top: 450px; border: 0px solid # d6d6d6; width: 262px; height: 262px; } .DownloadButton {position: absolute; left: 373px; top: 580px; width: 253px; height: 98px; overflow: hidden; background: url ( 'img / dbuthov.png') no-repeat; cursor: default; } .DownloadButton.active {background: url ( 'img / dbut.png') no-repeat; width: 253px; height: 98px; cursor: pointer; -moz-transition: all 0.2s 0.01s ease-in; -o-transition: all 0.2s 0.01s ease-in; -webkit-transition: all 0.2s 0.01s ease-in; } .DownloadButton.active: hover {opacity: 0.9; }Сподіваюся, що тут Вам все зрозуміло. Для початку я зробив блок розміром 1004 на 787 пікселів, в якому потім з абсолютним позиціонуванням розставив всі об'єкти які Ви бачите. Це кнопки вКонтакте і завантажити, а так само стрілки і самі написи.
Якщо Вам буде що то не зрозуміло, питайте в коментарях.
Тепер давайте перейдемо, безпосередньо, до скриптів.
JS
Далі я взяв jquery.vkAction.js і не багато відредагував його. Ось, що у мене вийшло:
(Function ($) {var win = null; $ .fn.tweetAction = function (options, callback) {// Стандартні параметри для спливаючого вікна: options = $ .extend ({url: window.location.href}, options) ; return this.click (function (e) {if (win) {e.preventDefault (); return;} var width = 550, height = 350, top = (window.screen.height - height) / 2, left = (window.screen.width - width) / 2; var config = [ 'scrollbars = yes', 'resizable = yes', 'toolbar = no', 'location = yes', 'width =' + width, 'height = '+ height,' left = '+ left,' top = '+ top] .join (', '); // Спливаюче вікно від API вКонтакте: win = window.open (' http://vkontakte.ru/share .php? '+ $. param (options),' TweetWindow ', config); (function checkWindow () {try {// need to put this code in a try / catch: if (! win || win.closed) {throw "Closed!";} else {setTimeout (checkWindow, 100);}} catch (e) {win = null; callback ();}}) (); e.preventDefault ();});};} ) (jQuery);Як бачите, що тут я змінив тільки ось це посилання http://twitter.com/intent/tweet? на ось цю http://vkontakte.ru/share.php ?. Іншими словами посилання від Твіттера замінив на посилання ВК. Все, більше змін ніяких не було.
Тепер давайте подивимося який у мене вийшов наступний скрипт.
script.js
$ (Document) .ready (function () {// Using our tweetAction plugin. For a complete list with supported // parameters, refer to http://dev.twitter.com/pages/intents#tweet-intent $ ( ' #tweetLink '). tweetAction ({title:' Як зробити систему "Розповісти друзям" вКонтакте щоб завантажити за допомогою JQuery і CSS ', url:' http://beloweb.ru/ ', description:' Тут Ви зможете завантажити класну систему "Розповісти друзям" 'вКонтакте щоб завантажити, а так само дізнаєтеся як вона працює'}, function () {// Коли вийдете з діалогового вікна: $ ( '. downloadButton') .addClass ( 'active') .attr ( 'href', 'Пряме посилання на файл');});});важливо
Цей скрипт Вам потрібно відредагувати під Ваш сайт.
В поле title: потрібно вписати назву посади, яка повинна відображатися в контакті.
У url: потрібно вказати ту посилання, на яку хочете щоб перейшов користувач.
В поле description: потрібно вказати опис поста.
І в поле .attr ( 'href', 'Пряме посилання на файл'); потрібно вказати пряме посилання на файл, який користувач повинен завантажити.
Ось і все друзі. Хочу подякувати за ідею і за скрипти сайт tutorialzine.com . Ну а тепер до швидких зустрічей. :-)
Як зробити?Як зробити?
Php?
Com/intent/tweet?
Php ?
Наша взаимовыгодная связь https://banwar.org/. Запустив новый сайт, "Пари Матч" обещает своим клиентам незабываемый опыт и возможность выиграть крупные суммы.
