Ставим кнопки социальных сетей на сайт
Решил на блоге разместить кнопки социальных сетей, с первого взгляда это, кажется просто, но оказалось, что это не так. Все сервисы агрегаторы соц кнопок предлагают поставить их скрипт с кнопками, некоторые даже дают возможность указать какие именно кнопки будут отображаться. Но у них у всех есть очень большой недостаток, они не показывают количество нажатий.
В случае если вам не нужно видеть количество нажатий прямо на сайте.
То можете не заморачиваться и прекратить шаманство. Лучше сразу воспользуйтесь сервисом от Яндекса share.yandex.ru. Который предоставляет вам возможность поставить на свой сайт, красиво оформленный блок из набора кнопок социальных сервисов.
Установка кнопки «Мне нравится» Вконтакте
Для получении кнопки для своего сайта идем на сайт vkontakte.ru
Вписываем название и адрес своего сайта. Обязательно нажимаем кнопку сохранить, иначе ваша кнопка не будет работать.
Следующий шаг выбор варианта отображения кнопки.
Для наглядности я привел их на скриншоте ниже:
После выбора нужного варианта кнопки вам будет сгенерирован код кнопки.
Код который выделен на скриншоте нужно разместить в пределах тега <head>.
Найдите закрывающийся тег </head> и перед ним вставьте код.
Вторая часть кода отвечает за вывод самой кнопки на вашем сайте, разместите этот код в том месте, где хотите видеть кнопку Мне нравится.
Устанавливаем кнопку “Нравится” от mail на сайт
Переходим по этой ссылке.
Устанавливаем необходимые настройки.
URL вводить не нужно, пояснение:
Мы предложим пользователю поделиться той страницей, на которой расположена кнопка. Поэтому указывайте URL, только если кнопка располагается на другой странице, например, на странице списка статей, когда вы хотите чтобы пользователи делились конкретными статьями.
После настройки копируем сгенерированный код:
Вставляем код туда, где вы хотите выводить кнопку нравится на своём сайте.
Всё установка кнопки “Нравится” от mail.ru закончена.
Устанавливаем кнопку нравится от Facebook.com (like Facebook)
Заходим на Facebook.
Выбираем необходимые настройки своей кнопки, мне нравится от Facebook.
1. URL to like - вводим адрес своего сайта.
2. Send Button - отображение рядом с кнопкой like кнопки Send
3. Layout Style - настройка стиля отображения кнопки:
standart – кнопка like с текстом справа от нее и отображением аватарок кому понравилось.
button_count – справа от кнопки like будет видно количество тех, кому понравилось.
box_count - количество которым понравилось отображается сверху кнопки.
4. Width – ширина
5. Show faces – показывать аватарки тех кому понравилась.
6. Verb to display – надпись на кнопке like, либо recommend.
7. Color Scheme – цвет кнопки.
8. Font – выбор шрифта кнопки.
После того как настроили вы настроили кнопку “нравится” под свои нужды вы можете получить её код.
Для получения кода нажмите Get Code.
Но код мне сразу не дали:
Перешёл по ссылке где меня попросили подтвердить подлинность аккаунта.
Вбил сой номер телефона нажал отправить код и код не пришел (((
Нажал повторно отправить код и он тоже не пришел.
Последующие нажатия приводят к выводу вот такого сообщения:
Sorry, we have already tried texting multiple codes and they all seem to have failed. Please нажмите сюда to get help.
Решил не заморачиваться с подтверждением, а попробовать решить данный вопрос другим способом.
Нашел в интернете скриншоты кода который генерирует Facebook и вручную собрал себе кнопку.
Вот её код:
<script src="http://connect.facebook.net/ru_RU/all.js#xfbml=1"></script>
Скрипт добавляем в <head>
А код который отвечает за вывод кнопки в туду где вам нужно вывести кнопку.
<fb:like href="http://surok.biz" layout="button_count" show_faces="false" font="arial"></fb:like>
Обратите внимание, что вы можете использовать любые параметры напрямую в java коде, которые Facebook предлагал вам в визуальном режиме.
Но у такого кода есть один существенный недостаток, пользователю всегда "нравится" только главная страница. Чтобы обойти этот момент нужно добавить параметр url через шаблон вашего сайта.
В cms drupal это можно сделать так:
<fb:like href="http://surok.biz<?php print $node_url ?>" layout="button_count" show_faces="false" font="arial"></fb:like>
В cms wordpress это делается так:
<fb:like href="http://surok.biz<?php the_permalink() ?>" layout="button_count" show_faces="false" font="arial"></fb:like>
Добавляем кнопку “Твитнуть” на сайт на сайт
Заходим на сайт twitter-а по этой ссылке.
Вам представится выбрать вариант кнопки:
Можно изменить текст, который будет выводиться перед ссылкой на страницу, когда пользователь делает ретвит.
Аналогично с Facebook можно выбрать на какую страницу будет ставиться ссылка
Выбираем необходимый язык
Можно выбрать пользователя, который будет, упомянут в твите
Получаем код кнопки и вставляем его в нужном месте на сайте.
Итог всех действий у меня получился вот такой:
<div style="float:left;"><fb:like href="http://surok.biz<?php print $node_url ?>" layout="button_count" show_faces="false" font="arial"></fb:like></div>
<div style="float:left; padding-left:14px;"><a rel="nofollow" target="_blank" class="mrc__plugin_like_button" href="http://connect.mail.ru/share" data-mrc-config="{'type' : 'button', 'width' : '130'}">Поделиться</a><script src="http://cdn.connect.mail.ru/js/loader.js" type="text/javascript" charset="UTF-8"></script></div>
<div style="float:left; padding-left:14px;"><a rel="nofollow" href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="Surok97">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>
<div style="float:left;"><div id="vk_like"></div>
<script type="text/javascript">
VK.Widgets.Like("vk_like", {type: "button"});
</script></div>
Выглядит это так
Какой метод лучше первый или второй вопрос спорный. Если рассматривать только трудозатраты, то конечно первый вариант выигрывает, плюс ко всему мы получим статистику по использованию кнопок. Но те пользователи, которые нажимают на кнопку нравится только в том случае, когда видят цифру на счетчике кнопки с цифрами
Ср, 05/25/2011 - 23:06
Автор Алена ( ) дата: Чт, 05/26/2011 - 00:36
круто! мне очень пригодилось... Спасибо Вам большое!
Автор Гость ( ) дата: Ср, 06/01/2011 - 22:53
ну наконец, то нашёл то, что надо, спасибо, а то все копируют одно и то же ...
Автор Surok дата: Ср, 06/01/2011 - 23:21
Спасибо вам за отзыв!
Автор Гость ( ) дата: Ср, 08/17/2011 - 05:51
Спасибо, автор! По твоей статье сделал виджеты в своем инет-магазине! Очень полезно. Плюс я еще добавил виджет от одноклассников.
Только последняя мысль в статье не завершена.
Автор Surok дата: Ср, 08/24/2011 - 10:52
Уточните какая именно мысль?
На самом деле уже надо переписывать статью или как минимум исправлять и дописывать.
Автор Гость ( ) дата: Ср, 08/24/2011 - 13:19
Вот эта мысль:
"Но те пользователи, которые нажимают на кнопку нравится только в том случае, когда видят цифру на счетчике кнопки с цифрами..."
Автор Surok дата: Ср, 08/24/2011 - 13:24
Спасибо за замечание, обязательно поправлю.
Кстати вы оставили 100й комментарий , а значит получите от меня подарок, подробности тут: 10000 за комментарий в блоге!
Автор Гость ( ) дата: Сб, 08/27/2011 - 01:32
Только придется инкрементировать счетчик, задав вопрос: как получить подарок?
Автор Surok дата: Пнд, 08/29/2011 - 19:12
Написал вам на почту
Автор Гость ( ) дата: Пнд, 10/03/2011 - 19:02
Спасибо большое за такой замечательный пост. Только я столкнулась с такой проблемой. все сделала как вы сказали - но когда нажимаешь мне нравиться на одной странице сайта - автоматически на всех страницах сайта эта кнопка становится неактивной (как будто я ее уже нажала и там). Есть ли возможность это избежать?
Автор Surok дата: Чт, 10/06/2011 - 17:15
А кнопка какой именно соцсети?
Возможно у вас стоит везде один url, какая cms у вас установлена?
Автор Сергей ( ) дата: Пт, 11/11/2011 - 19:47
Спасибо, только кнопка "твитнуть" не хочет считать количество твитов =(( что не так я сделал, не понимаю((
Автор Surok дата: Пнд, 11/14/2011 - 12:52
Может twitter изменил код кнопки.
Посмотрите на их сайте
Автор Сергей ( ) дата: Втр, 11/15/2011 - 20:57
А я с их сайта код скрипта и брал, вот только что опять его копировал. Еще прочитал, что надо кэш отключать, дак я везде кэш убрал, всёравно не работает =((
Автор Alexander ( ) дата: Пнд, 12/12/2011 - 02:56
добавил кнопку мне нравится вконтакте на сайт. На сайте кнопка отображается. Жму на нее, а на сайте вконтакте на моей странице не отображается и рассказать друзьям не работает.
Автор Daticc77 ( ) дата: Вс, 12/25/2011 - 06:46
Отправить комментарий