Приветствую Вас, дорогие читатели блога. По многочисленным просьбам читателей сегодня мы с Вами будем делать классную систему «Поделись с друзьями» вКонтакте, чтобы скачать файл с использованием JQuery и CSS.

Друзья, хочу сказать, что эта система во много раз увеличит количество ссылок на Ваш ресурс, ну смотря конечно, что Вы предлагаете скачать и какая у Вас посещаемость.

Ещё хочется сказать, что данная система очень похожа на классную систему « «, которая в свою очередь увеличивает количество ссылок в Твиттере. В этом случае практически всё тоже самое только не много мной отредактировано. И в конечном итоге всё просто прекрасно получилось:-)

Ну а теперь давайте перейдём к самой системе.

Система «Рассказать друзьям» вКонтакте, чтобы скачать файл Как это работает?

Вот видите не так уж и сложно. :-)

Как сделать?

Для начала я нарисовал не сложный шаблон страницы с кнопкой. Его Вы можете посмотреть в примере, а также использовать у себя на сайте, он доступен в исходниках. На данную страницу будет перекидывать пользователя для того чтобы он там смог проделать заветные операции по скачиванию файла.

Затем я сверстал данный шаблон и вот что у меня получилось:

Как видите, совершенно не большая и не сложная страница.

Главное в начале между тегами и добавить следующие скрипты:

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

(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://сайт/", description: " Тут Вы сможете скачать классную систему "Рассказать друзьям"" вКонтакте чтобы скачать, а так же узнаете как она работает" },function(){ // Когда закроется окно: $(".downloadButton") .addClass("active") .attr("href","Прямая ссылка на файл"); }); });

Важно

Этот скрипт Вам нужно отредактировать под Ваш сайт.

В поле title: нужно вписать название поста, которое должно отображаться в контакте.

В поле description: нужно указать описание поста.

Вот и всё друзья. Хочу поблагодарить за идею и за скрипты сайт tutorialzine.com . Ну а теперь до скорых встреч. :-)

О том, как социальные сети могут помочь продвинуть сайт и привести на него новых посетителей. Но на этот раз хотелось бы перейти от теории к практике и подробнее рассказать о том, как разместить на своем сайте кнопки типа "Мне нравится" популярных социальных сетей, таких как: ВКонтакте, Facebook, Twitter, Одноклассники, МойМир, Google+, QIP и Яндекс.

Что такое "лайки", и какой от них толк?



Однако в интернет-сленге "лайки" означают совсем другое и выглядят они вот так:



Если посещаемость вашего сайта составляет хотя бы 20 посещений в сутки, то вам уже стоит задуматься над тем, чтобы разместить подобные кнопки на своем сайте, потому что:

  • «лайки» привлекают новых посетителей из социальных сетей: «лайкая» ту или иную запись в вашем блоге, пользователь может рассказать о ней на своей странице в социальной сети;
  • вы сможете понимать посетителей вашего сайта: анализируя статьи или страницы сайта, количество «лайков» которых значительно превышает другие страницы вашего сайта, вы поймете, что больше нравится вашим посетителям;
  • это продвинет сайт в поисковиках : поисковые системы давно научились взаимодействовать с социальными сетями, именно поэтому «лайки» оставляют свой след и в SEO.

Думаю, комплиментов в адрес «лайков» достаточно, для того чтобы понять, насколько это полезно и важно для сайта. Поэтому, можно смело переходить к инструкциям по установке.


Быстрый переход к инструкциям


"Мне нравится" от ВКонтакте


1. Перейдите на страницу подключения виджета к вашему сайту .

3. Настройте вид виджета на свой вкус и получите готовый код:

4. Код виджета необходимо вставить в шаблоны страниц сайта .

"Like" от Facebook


1. Перейдите на страницу настройки кнопки "Like" .

2. Настройте виджет и нажмите кнопку "Get code":

3. В открывшемся окне скопируйте полученный код и вставьте в шаблоны сайта .

"Tweet" от Twitter


1. Перейдите на .

2. Выберите тип кнопки:

3. Настройте вид кнопки:

4. Полученный код скопируйте и вставьте в шаблоны :

"Класс!" от Одноклассников



А еще проще - получить кнопку "Класс!" вместе с кнопкой "Нравится" от соц. сети "МойМир". Как раз дальше именно об этом и пойдет речь.

2 в 1: "Нравится" от МойМир + "Класс" от Одноклассников


1. Перейдите на страницу настройки виджетов "Нравится" и "Класс!" .

2. Настройте виджет на свой вкус:

3. Полученный код скопируйте и вставьте в шаблоны сайта :

"+1" от Google+


1. Перейдите на страницу настройки кнопки "+1" .

2. Настройте вид кнопки:

3. Скопируйте полученный код и вставьте в шаблоны :

Все в одном: для лентяев!


Если вам лень настраивать все социальные сети по отдельности, вы можете воспользоваться готовыми решениями и скриптами, которые предоставляют возможность разместить универсальную кнопку с шарингом (функцией "рассказать друзьям") во все популярные социальные сети. Учтите, что здесь не идет сильная привязка к сайту, и такие кнопки созданы больше для удобства, чем для SEO эффекта.



Получите коды кнопок и вставьте их на сайт .

Куда вставлять полученные коды?

Для того чтобы разместить на сайте кнопки «лайков», для начала вы должны определиться с тем, на каких страницах вашего сайта их выгоднее и лучше всего разместить. Есть следующие варианты размещения кнопок на сайте:

  • главная страница;
  • все страницы сайта;
  • страница с записью/материалом.

Не нужно изобретать велосипед и размещать кнопки в сообщениях форума, на страницах контактных данных и так далее: такие кнопки лайкать не будут. После того, как вы определились с тем, куда будете вставлять кнопки, войдите в панель управления вашего сайта по адресу ваш-сайт.ucoz.ru/admin и перейдите в:

  • редактор страниц → управление страницами сайта → редактировать главную страницу сайта (если хотите разместить коды кнопок только на главной странице сайта);
  • управление дизайном → модуль (по выбору) → страница материала и комментариев к нему (если хотите разместить кнопки «лайков» к каждому материалу);
  • управление дизайном → глобальный блок "Верхняя часть сайта" (если хотите разместить код на всех страницах сайта).

Вставьте полученные коды кнопок в один из этих шаблонов и сохраните внесенные изменения. Давайте рассмотрим этот момент на конкретном примере - размещение кнопки "Это интересно!" возле записи в нашем официальном блоге uCoz.

Время чтения: 5 минут

Интегрированные маркетинговые кампании по email и в социальных сетях охватывают больше аудитории и повышают ROI (возврат инвестиций). Узнайте, как использовать интегрированную маркетинговую платформу Mailigen для работы с клиентами по email и в социальных сетях .

Зачем добавлять в email кнопки социальных сетей «Рассказать друзьям»?

Согласно исследованию маркетинговых стратегий (research on marketing strategies in 2014), проведенному в 2014 году компанией по управлению цифровыми ресурсами WebDAM, на то есть три веские причины:

  • В 2013 году 43% продавцов находили покупателей посредством LinkedIn
Как добавить кнопки социальных сетей «Рассказать друзьям» в email сообщение Шаг 1

Когда вы будете на четвертом этапе создания email рассылки, стащите блок для шеринга в соцсетях на то место, где вы хотите установить эти кнопки.

Шаг 2

После этого откроется новое окно, в котором вы сможете произвести все необходимые настройки.

  • Если вы выберете «Архив рассылки», то получатель рассылки сможет поделиться в социальных сетях содержанием всего письма. Заголовок рассылки будет использован в качестве вводного текста.
  • Если вы выберете «Другая ссылка», то сможете ввести ссылку на любой материал, которым вы хотите поделиться. Например, это может быть новая статья в вашем блоге.
  • Затем наберите текст, который будет располагаться рядом с кнопками, выберите размер кнопок и расстояние между ними.
Facebook Подведем итоги

В последнее время каждый второй (если не первый) заказчик в требованиях по разработке сайта просит непременно связать его с социальными сетями. «Социальные» кнопки на сайте — средство номер 1 для привлечения целевой аудитории, распространения контента и пиара в целом. Причем совершенно бесплатное!

Социальные сети предоставляют коды своих кнопок и виджетов для размещения на сайте, и прилагают инструкции по их установке в системе управления сайтом. Установить их позволяют любые CMS (операционные системы), главное гармонично вписать их в дизайн вашего сайта.

Каковы возможности и функции?

Если ваш сайт ориентирован на людей которые общаются популярных соц. сетях, например, Вконтакте, Twitter, Instagramm, Facebook, Google+, Pinterest и прочее, и вы хотите охватить их все, то чтобы не устанавливать кнопки каждой из них по отдельности, учитывая то, что они могут отличаться по размерам и дизайну, советуем воспользоваться сервисами-агрегаторами. Это простые и удобные инструменты, которые позволят посетителям сайта быстро делиться информацией со своими друзьями вне зависимости какой социальной сетью они пользуются. Ниже мы разберем наиболее популярные сервисы.

Кнопки социальных сетей Share Pluso

Привет всем читателям сайта сайт

В этой статье я расскажу вам, как прикрутить на свой сайт кнопки «Лайк», «Класс», «Рассказать друзьям» и т.д.

Также я намекну, как установить комментарии на любую страницу вашего сайта.

Есть несколько способов установить вышеупомянутые кнопки на свой сайт. Давайте рассмотрим каждый из них:

  • Зайти на сайт ресурса, с которого хотите иметь кнопку. Далее найти раздел для разработчиков, и уже там следуя инструкциям сгенерировать html код для вставки на сайт.
  • Воспользоваться замечательным сервисом от компании «Яндекс», и сгенерировать специальную лайковую панель.

    • Давайте рассмотрим каждый сервис.

    В контакте


    Внимание, чтобы установить кнопку вы должны быть зарегистрированы! Ссылка на раздел находится в самом низу соц. сети.

    Теперь вам открывается полное раздолье для полета фантазии. Вы можете установить себе любой сервис, который пожелаете. Я выбрал кнопку «Мне нравиться».


    После нажатия на выбранный вами раздел, у вас появится мастер настройки.


    Теперь немного о мастере настройки. У каждого разработчика есть свой apiId. Его наличие обязательно проверьте в окошке с генерированным кодом.
    Также не забудьте указать адрес вашего сайта в верху формы.

    Все! Теперь осталось половину скрипта засунуть в head нашей страницы, а другую половину в body , туда, где вы хотите, чтобы у вас была кнопка.

    Вот можете проверить, как это работает на моем сайте. Вверху стриницы.

    Одноклассники и Мой мир


    И прямо тут настраиваем внешний вид кнопки. И потом копируем код. Этот код не подразделяется на две части, его сразу нужно вставлять на то место где хотите, чтобы была кнопка.

    Попробуйте в действии .

    Заходим в гости к Яндексу:)


    Здесь все еще проще, чем мы в способах, что мы рассматривали ранее.
    Просто выбираем нужные сервисы, их отображение и вставляем полученный код на сайт.

    И все? Так просто?

    Пишите в комментариях, если что-то непонятно.

    Возможно вам будет интересно:

    Здравствуй дорогой читатель, в этой статье мы разберём:

    • что такое css
    • как подключить стили к своей странице
    • как использовать css
    • основные "свойства" css

    Каждый день (а может и не каждый) вы включаете компьютер, открываете браузер и активно пользуетесь сетью интернет.

    А задумывались ли вы когда-нибудь как работает эта сеть? Нет? Тогда, позвольте автору сайта объяснить, как обстоят дела.