Одно время, крайне популярны в интернете социальные закладки. Те, кто во время успел получить с них трафик, были в шоколаде! Но их популярность очень быстро ушла и даже ссылки с них сейчас не воспринимаются поисковыми системами как фактор ранжирования в поисковой выдаче. Единственная возможность сейчас, для получения социального трафика это «лайки» соц.сетей. Для установки этих кнопочек на сайт есть куча всевозможных плагинов для любых CMS, но зачем нагружать лишний раз движок если это можно сделать вручную! Сейчас расскажу как.
Начнем с кнопки «ВКонтакте»
Для получения кнопки переходим на эту страницу и видим:
Кнопка «ВКонтакте» единственная из кнопок, которая имеет ID вашего сайта в коде. И код будет не рабочим пока вы не нажмете «Сохранить». Только после этого в коде API_ID заменится на ID вашего сайта. Теперь его можно поставить на сайт.
Код «ВКонтакте» имеет 2 части и ставится в 2 этапа. На первом этапе вставляем верхнюю часть кода в файл header.php. Располагаем где-нибудь в секции head.
<head profile="http://gmpg.org/xfn/11"> ... <script type="text/javascript" src="http://userapi.com/js/api/openapi.js?49"></script> <script type="text/javascript"> VK.init({apiId: API_ID, onlyWidgets: true}); </script> ... </head> |
Естественно, что вместо API_ID у вас будет указан ID вашего сайта.
Вывод самой кнопки устанавливаем кодом:
<div id="vk_like"></div> <script type="text/javascript"> VK.Widgets.Like("vk_like", {type: "button", verb: 1, height: 20}); </script> |
Следующая кнопка от Facebook
Код кнопки от Facebook можно получить здесь
Советую не указывать url, если только не хотите вести счетчик для каждой страницы вашего сайта. Итак, выбираем параметры кнопки и жмем «Get Code» (Получить код)
Код от Facebook нужно вставлять не в секцию head, а сразу после открытия тега. Обычно, он находится тоже в файле header.php вашего шаблона.
Кнопка Twitter
Код кнопки берем здесь
Дальше все просто, копируете код и вставляете куда считаете нужным для вывода.
Добавляем гугловскую кнопку G+
Идем сюда и видим:
Здесь тоже все легко, выбираем параметры кнопки и копируем код туда где задуман её вывод.
Установка этих кнопок достаточно простая и с ней разберется практически любой человек. Ну, на самом деле, что может быть сложного в копировании кода кнопок? Но проблемы начинаются тогда, когда блоггер копирует коды кнопок и получает что-то типа:
Как сделать вывод кнопок в один ряд? Есть много способов. Я, например, создал однострочную таблицу и каждую кнопку положил в отдельную ячейку. Вот, например, код моих кнопок из single.php:
<table> <tr> <td width="100"><div id="vk_like"></div> <script type="text/javascript"> VK.Widgets.Like("vk_like", {type: "button", height: 20}); </script></td> <td width="175"><div class="fb-like" data-send="false" data-layout="button_count" data-width="150" data-show-faces="true"></div></td> <td width="100"><a href="https://twitter.com/share" class="twitter-share-button" data-via="shurupovod" data-lang="ru">Твитнуть</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></td> <td width="100"><div class="g-plusone" data-size="medium"></div> <script type="text/javascript"> window.___gcfg = {lang: 'ru'}; (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script></td> </tr> </table> |
Он выводит все кнопки в один ряд, результаты вы можете видеть внизу записи. Так я поставил их для себя, вы можете их расположить как пожелаете.
Ну что ж, на этом все, если понравилось лайкайте 😉
Твитнуть |
Я вот, честно говоря, долго думала и поставила плагин, уж очень муторно устанавливать эти кнопки)
Да я тоже взяла с апи яндекса, но после этого у меня 3 ошибки на сайте и как их исправлять понятия не имею.
А какой вы плагин использовали?
Да можно и плагин, но просто хотелось поставить только кнопки, которые реально нужны. И хорошего плагина, который бы кнопку «ВКонтакте» выводил я не нашел. Не очень он популярен за рубежом.
А на апи яндекс, там вроде все кнопки есть? Или вы каждую отдельно устанавливаете?
Можно личный вопрос по шаблону? Сколько вам стоил этот? Вы говорили, но что-то я запамятовала. Буду признательна за цифру.
каждую кнопку отдельно, вроде за шаблон 100$ платил
ВКонтакте не то чтобы непопулярен на Западе, он в сша отнесён недавно к разряду пиратских сайтов. ВКонтакте и ещё один российский сайт.
Но, при всем этом, так как мы все ориентируемся в основном на русскоговорящую аудиторию, то сбрасывать такое количество трафика (возможное) с ВКонтакте не стоит однозначно.
Есть вебмастера, которые весьма ревностно относятся к своему трафику и не хотят продвигать вконтакте. Получается, что даже если ваша группа выплывет, то отразится — это в первую очередь на соцсети.
Не совсем понял, что вы пытались сказать. Вы говорите о том, что вебмастера не желают своими действиями продвигать ВКонтакте в поисковых системах? Капля в море погоду не делает… Или вы говорите, что если всплывет група ВКонтакте, то это может как-то негативно отразиться на поисковом продвижении? Тут я также не думаю, что такое возможно впринципе…
Я тоже сначала плагин поставила, но потом перешла на код, только сделала кнопки в одном стиле, а не брала каждый код отдельно.
Дело в том, Евгения, что плагины затормаживают работу сайта — а сейчас наиболее важно, чтобы сайт открывался быстро — на это обращают внимания поисковые системы в первую очередь.
Я также если буду выводить кнопки социальных сетей — то сделаю это с помощью интеграции кода.
Можно самому сделать свой дизайн нужных кнопок. Это привлечёт внимание пользователей и простимулирует их понажимать на кнопочки соцсетей.
Пока с такими кнопками не заморачиваюсь, купила плагин «Заплати лайком» и ставлю его в конец статьи с призывом, мол, если пост понравился, лайкни. Там основное все есть, в том числе и «ВКонтакте».
Зачем покупать плагин «Заплати лайком». Этот плагин давно уже в свободном доступе. Скачать его просто. Многие блогеры им делятся.
Скажите пожалуйста, у меня установлены кнопки социальных сетей с одного сервиса. Вот кнопки о которых говорит автор намного эфективнее? А то везде пишут как добавить по одной кнопочке, а у меня все вместе.
Я сама ставила социалки все вместе, у меня правда сайт на джумле, но мне кажется эффективность зависит от вашего раскрученного аккаунта. Я брала с апи яндекса, но при проверке специальным сервисом в них тоже выдает ошибки.
Поэтому, думаю, что нужно пообщаться по этому поводу с программерами на форумах.
Лала, на форуме вордпресса есть много тем в которых про эти кнопки рассказывается, и как устанавливать их, и как настраивать и у кого какие ошибки появляются.
Когда все кнопки в одном месте — это ,по-моему, «Одна кнопка».
Знаю про неё потому, что одно время было масса предупреждений не устанавливать её, поскольку можно занести вирус.
Спасибо, очень подробная статья. Социальные сети сейчас в моде и раскрутка через эти сети очень популярная, поэтому поставив такие кнопки можно привлечь больше аудитории на свой сайт. Я долго мучился с установкой кнопок социальных сетей и только сейчас разобрался. У меня на сайте сейчас стоит плагин (потому что не знал, как правильно настроить), но сейчас, наверное, займусь изменением. Все-таки лучше не загружать сайт плагинами.
Не понимаю в чем у вас была сложность? Я брала с Апи Яндекса, вставляла на сайт и все панелька готова, у меня Джумла.
С плагинами связываюсь в последнюю очередь, так как не очень понимаю как они работают и во что может мне вылиться его установка. Да и подводные ссылочки могут появиться после его установки.
Я вот благодаря вашему комментарию повесил ссылки социальные у себя.
Правда, пока никто не кликает.
У меня как и у вас джумла — просто в новом модуле вывел и все дела. Никаких проблем — кнопки Яндекса рулят!
Лала, код кнопок не военная тайна. Вы на свой сайт код устанавливаете, можно его и посмотреть. Вы знаете хтмл, значит, Вам проще посмотреть код и увидеть ссылки. Подводных ссылочек быть не должно.
У меня стоит плагин. Работает нормально, как часы. Но тут я согласна с автором — если есть возможность сократить нагрузку на блог, то на до этим пользоваться. Пока возьму эту статью на заметку. Немного наберусь храбрости, чтобы в коды залазить, буду «потрошить»
Сделайте копии, а еще скопируйте хтмл до того, как вы туда полезете, чтобы не рисковать. Мне иногда удавалось такого сотворить, что я сразу же копировала с блокнота оригинал и все восстанавливала назад. Не пренебрегайте элементарными вещами, которые помогут справиться с самодеятельностью.
Замечаю, что все блоггеры вначале устанавливают плагины, а потом, немного разобравшись с кодами, заменяют ими все плагины один за другим.
Это и есть развитие блоггера и блога.
С тем, как разместить социальные кнопки под постом — разобрался. Но вот делема заключается в том, как разместить кнопки, как у вас размещены слева от контента в плавающем блоке?
честно скажу, сам с этим не разбирался, когда заказывал дизайн на сайт автор сразу и кнопки поставил, но погуглите это есть в и интернете и не только на моем сайте
Погуглил — оказывается все вообще просто — необходимо просто в стилях вывести фиксированный блок и указать ему определенные координаты — и тогда кнопочки социальных сетей будут плавать так как у вас.
Место размещения панели определяется стилями. Поэксперементируйте с ними. Располагайте их в header.php своего шаблона
На сколько я понял, то когда мы задаем фиксированный блок, с абсолютным позиционированием в стилях, то нет разницы, в каком файле будет содержаться содержимое — другими словами можно указать его в любом месте, которое отображается на всех страничках — например в том же сайдбаре, футтере или как вы сказали — в шапке.
А почему блог Вы называете плавающим? Кнопочки вроде бы стоят на одном месте, а не плавают никуда?
Спасибо за подробное объяснение процесса, кнопочки мной успешно установлены и не возникло никаких сложностей, хотя я не специалист в этой области.