Учетные записи 

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

Приветствую Вас, дорогие читатели блога. По многочисленным просьбам читателей сегодня мы с Вами будем делать классную систему «Поделись с друзьями» вКонтакте, чтобы скачать файл с использованием 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 . Ну а теперь до скорых встреч. :-)

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

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

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

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

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

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

Шаг 2

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

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

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

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

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

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

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

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

    В контакте


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

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


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


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

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

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

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


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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

    О том, как социальные сети могут помочь продвинуть сайт и привести на него новых посетителей. Но на этот раз хотелось бы перейти от теории к практике и подробнее рассказать о том, как разместить на своем сайте кнопки типа "Мне нравится" популярных социальных сетей, таких как: ВКонтакте, 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.