Устанавливаем на блог кнопки социальных сетей

Устанавливаем на блог кнопки социальных сетей Приветствую вас, читатели блога WPnotes.ru. Как я и обещал в прошлой заметке, сегодня рассмотрим вопрос — как разместить у себя на сайте социальные кнопки, а также попробуем все красиво оформить вместе с полем подписки по e-mail и поместим в подходящее место.

Но для начала я немного коснусь значимости этих самых кнопок. Для получения хоть какого-то трафика, автору молодого блога (это и мой случай) придется очень усердно поработать. Поисковые системы если и будут приводить на ваш блог посетителей, то их доля будет чрезвычайно мала. Кстати, наряду с техническими трудностями, это возможно вторая главная причина почему блоговедение забрасывается. Но не стоит отчаиваться, все начинающие вебмастера сталкивались с этой проблемой. На помощь нам придет оптимизация под социальные сети или сокращенно SMO (англ. Social Media Optimization). Это понятие не ограничивается только социальными кнопками, а включает в себя целый комплекс мер, направленный на получение трафика из различных социальных медиа.

Самый большой плюс такого продвижения сайта — мгновенный эффект и что немаловажно, он может длиться  довольно продолжительное время, но поддерживать его необходимо постоянно. По прошествии времени, как правило нескольких месяцев, нарастающий трафик из поисковых систем даст вам немного расслабиться. А пока работаем ручками. Что касается социальных кнопок, то они позволяют переложить часть работы по продвижению методами SMO на плечи ваших читателей. Поэтому установить их нужно в обязательном порядке. Итак повторим наши цели:

  • установить кнопки поделится в социальных сетях после текста статьи (Twitter, ВКонтакте, Google+, Facebook), причем мы не будем пользоваться сервисами типа Share42 или плагинами вроде Social Share Buttons — все сделаем при помощи скриптов, которые вы без труда найдете на страницах для разработчиков
  • вывести в сайдбар блога кнопку RSS, и кнопки ведушие на ваш профиль в социальных сетях,  а также поле подписки по e-mail

Социальные кнопки после текста статьи

Начнем с кнопки ВКонтакте. Заходим на одноименный сайт в раздел для разработчиков. Далее идем в «Виджеты и сторонние сайты» → «Виджет Мне Нравится». Дальнейшие действия:

  • подключить новый сайт
  • прописываем название сайта
  • адрес сайта
  • сохраняем
  • выбираем тип кнопки

кнопка ВКонтакте

В окне ниже будет код, состоящий из 2-х частей, читайте внимательно — первую часть вставляем в файл header.php, а вторую в то место где мы запланировали его увидеть, а именно после текста статьи  — за это отвечает файл single.php (вспоминаем структуру шаблона WordPress)

. код кнопки ВКонтакте для сайта

Привожу скриншоты header.php — я вставил код перед закрывающимся тегом </head>.

код социальной кнопки ВКонтакте в файле header.php

И single.php — вставляем код после контента.

код социальной кнопки ВКонтакте в файле single.php

Сохраняем изменения в файлах и наша кнопка появиться сразу после текста статьи. Небольшое отступление — вы можете попробовать добавить код ВКонтакте, для того что бы проверить работоспособность кнопки. Следующие коды для файла single.php скопируйте в блокнот, так как ниже нам предстоит поставить кнопки в один ряд. Коды для файла header.php можно вставлять сразу же. Продолжим со следующей кнопкой, перейдите по ссылке в Facebook Developers. Процесс очень схож и трудностей возникнуть не должно, получаем также два кода: первый для header.php и второй для single.php

кнопка Facebook

И собственно сам код:

код кнопки Facebook для сайта

Осталось добыть код для Twitter и Google Plus, найдете их соответственно здесь и здесь. Полученные коды для Twitter и Google Plus предназначены только для файла single.php.

Как оформить социальные кнопки в один ряд?

Если вы все же добавили кнопки сразу, а не скопировали в блокнот как я говорил, то результатом будет  нагромождение друг на друга. Я расскажу как я справился с задачей правильного расположения. Как выяснилось этот вопрос волнует очень многих начинающих блоггеров. В сети вы можете найти кучу различных способов, многие из них оказываются очень сложными для новичков. Некоторые и вовсе действуют только в частных случаях и конкретно на ваш блог не подойдут. В ходе множества экспериментов я нашел, как мне показалось, очень простой метод. Применяем контейнеры div.

<div style="float:left; padding: 0 0 5px 5px;">код Twitter</div>
<div style="float:left; padding: 0 0 5px 5px;">код VK</div>
<div style="float:left; padding: 0 0 5px 5px;">код Google+</div>
<div style="float:left; padding: 0 0 5px 5px;">код Facebook</div>

У нас четыре кнопки и для каждого полученного кода мы используем свой контейнер div, а код вставляем взамен моих фраз (код Twitter и т.д.) Полученный результат поместите в файл  single.php после окончания поста. Небольшие пояснения:

  • float:left — выравнивание по левому краю
  • padding: 0 0 5px 5px — отступ сверху, справа, снизу и слева: в данном примере указаны отступы в 5 пикселей снизу и слева, для оптимального результата вы можете поэкспериментировать с этими значениями

Результат получился довольно симпатичный, главный плюс таких кнопок — наличие счетчика. как поставить социальные кнопки в один ряд

Кнопка RSS и социальные кнопки в сайдбаре

У себя на блоге помимо кнопки RSS, я сделаю только кнопку Twitter ведущую на мой профиль. При желании вы можете добавить дополнительные кнопки, так как принцип будет такой же.

Наиболее простой способ, это вставить в сайдбар виджет «Текст» (Внешний вид → Виджеты) и туда поместить HTML -код. Возможен вариант размещения кода непосредственно в файле sidebar.php, но наверняка придется поиграть с расположением кнопок. Более сложный метод, но и более красивый результат требует знания CSS и HTML. Возможно рассмотрю его в ближайшем будущем.

1. Нам понадобятся картинки наших кнопок, вы без труда найдете их в поисковых системах, затем отредактируйте текстовым редактором до нужного размера. Я сделал 35×35 пикселей.

2. Создадим папку с картинками (например, images) на хостинге, куда и поместим наши кнопки.

3. Теперь вам предстоит изменить следующий код, который мы вставим в виджет  «Текст»:

<a href="http://feeds.feedburner.com/wpnotes" target="_blank" rel="nofollow"><img alt="Подписаться на обновления через RSS" title="Подписаться на обновления через RSS" src="http://wpnotes.ru/images/RSS_icon.jpg" width="35" height="35"/></a>

А именно адрес ленты, название и альтернативное название кнопки, путь до изображения и, при необходимости, ширину и высоту. Этот же самый код можно использовать и для Twitter, Facebook, ВКонтакте и так далее — просто поменяйте ссылку на ваш профиль и название файла изображения.

4. Справились? Поместите новый виджет «Текст» в сайдбар и вставляйте ваши коды, будет ли их два или же пять. Назовите его как-нибудь и сохраните результат. Готово! Это был самый простейший способ добавления социальных кнопок в сайдбар.

Подписка на e-mail в сайдбаре

Подписку на e-mail я поместил также в виджет «Текст» предварительно поработав с кодом, необходимо убрать некоторые элементы.

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=wpnotes', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="wpnotes" name="uri"/><input type="hidden" name="loc" value="ru_RU"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p></form>
  •  если вы не хотите чтобы вокруг формы была рамка, то поставьте 0px после border
  • переводим фразу Enter your email
  • убираем ссылку Delivered by FeedBurner, удалив следующий элемент
    <p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p>

На сегодня все! Если вам понравилась статья, то буду благодарен если воспользуйтесь социальными кнопками.                                                            

Понравилась статья? Поделитесь с друзьями:


 

Навигация по записям