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

Социальный шаринг в блогах представляет собой распространение/предоставление доступа к контенту при помощи размещения ссылок, текста, фото, видео. Появление социальных сетей, таких как Tumblr, Facebook, Twitter и т.п., позволяет интернет-пользователям делиться своим контентом, создавая аккаунты на данных платформах.

Кнопки социального шаринга стали неотъемлемой частью для достижения целей SEO и SMO. В один клик сообщения, содержащиеся в вашем блоге, могут стать видимыми любому пользователю интернета в любом уголке нашего большого мира. Использование социального шаринга по всему миру очень бурно растет.

Прежде всего, популярность шаринга напрямую зависит от популярности социальных сетей. Многие люди, без преувеличения сказать, проводят очень много времени в интернет-сетях, причем ежедневно. С течением времени общение людей перешло в интернет, оно обеспечивает связь на расстоянии, связь с коллегами по работе или даже всю работу. Современная жизнь ускоряется с каждым днем. Мы практически не пишем писем. Если у нас есть какая-либо новость, полезная для знакомого, друга, родственника, мы просто можем лайкнуть, сделать репост, ретвит и так далее. Собственно, для этого и нужны кнопки социального шаринга, а так как известно большое количество социальных сетей и пользователи предпочитают использовать разные платформы в силу тех или иных обстоятельств, то и вебмастер должен предлагать несколько социальных кнопок.

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

Все пользователи сети Интернет являются асессорами, мы помогаем оценивать различные сайты благодаря этим самым кнопкам социального шаринга. Именно за нашей активностью следят поисковики, определяя, хорош ли сайт или нет.

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

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

Без кнопочек «Поделиться» ссылкой в социальных сетях не обходится ни один приличный сайт. А как их вставить на свой сайт? Попробуем разобрать несколько самых легких вариантов.

 

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

Самый простой и в большинстве случаев самый правильный выбор — это воспользоваться сервисом Яндекса.

Переходим вот по этой ссылочке   http://api.yandex.ru/share/ и попадаем на такую страницу (картинка кликабельна, по щелчку увеличивается):

В столбике, обозначенном стрелкой 1 ставим галочки возле тех иконок, которые хотим добавить на сайт. Чаще всего это Одноклассники, ВКонтакте, МойМир, Я.Ру, ну и всякие фейсбуки и твиттеры, кому что нравиться.

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

Стрелка номер 3 указывает на код, который сгенерирует Яндекс и который нужно будет вставить в то место, где по вашему мнению должны будут находиться эти самые кнопки соц. сетей на вашем сайте. 

То есть в итоге должно получиться как на вот этой картинке

 

Куда вставлять код зависит от того, на каком движке создан ваш сайт. Немного ниже разберем этот вопрос как для сайта на Вордпресс, так и для сайта на DLE.

Посмотреть сразу куда вставлять код.

 

Кнопки социальных сетей от share42.com

Кнопки от Яндекса имеют один небольшой недостаток — они устанавливаются «как есть», то есть изменить размер или рисунок на кнопках нельзя.

А вот, например, на этом сайте кнопки, по моему мнению, гораздо приятнее яндексовских. И скрипт для них получен на сайте share42.com.

Этот сервис http://share42.com дает гораздо большую свободу для выбора вариантов вида кнопок

Итак, заходим на сайт и видим огромный выбор социальных сетей, социальных закладок, сервисов и так далее: 

Можно выбрать один из трех предложенных размеров, порядок кнопок тоже можно поменять, просто перетаскивая их мышью.

Затем выбираем тип панели — вертикальная или горизонтальная. Указываем кодировку сайта.

Если не знаете, какая кодировка у вас на сайте, просто просмотрите код страницы в любом браузере (щелкаем правой кнопкой мыши прямо на странице, выбираем пункт «просмотр кода страницы» — для chrome, «просмотр HTML-кода» — для explorer, «исходный код» — для opera ) и вначале текста ищем такую строчку:

<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″ />

или такую:

<meta http-equiv=»Content-Type» content=»text/html; charset=UTF-8″ />

И выбираем соответственно нужную кодировку.

После того, когда вы выбрали все, что надо, нажимаете на кнопку «скачать скрипт» и получаете готовый скрипт для вашего сайта. Остается его установить на вашем сайте.

Не уходя с сайта share42, выполните следующие действия:

1. Распакуйте папку со скриптом. Она по умолчанию имеет имя share42.

2. Загрузите папку share42 на ваш сайт по FTP или через панель управления хостингом (при желании папку можно переименовать).

3. На сайте share42 выберите подходящий тип сайта, то есть укажите на каком движке ваш сайт. Для WordPress и Drupal есть специальные кнопки, если сайт на DLE нужно выбрать пункт «Прочие CMS».

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

Код для WordPress:

<div class=»share42init» data-url=»<?php the_permalink() ?>» data-title=»<?php the_title() ?>» data-top1=»150″ data-top2=»20″ data-margin=»0″></div>
<script type=»text/javascript» src=»https://rpilot62.ru/wp-content/uploads/2018/06/56410.jpg»></script>

Код для DLE:

<div class=»share42init» data-url=»[url]» data-title=»[title]» data-top1=»150″ data-top2=»20″ data-margin=»0″
<script type=»text/javascript» src=»https://rpilot62.ru/wp-content/uploads/2018/06/56410.jpg»></script>

Обратите внимание на текст, выделенный красным цветом.

Вместо site.name вставляем название сайта.

Для сайта на DLE заменяем [url] на {full-link} и [title] на Как вставить кнопки социальных сетей на сайт.

То есть должно получиться так:

<div class=»share42init» data-url=»{full-link}» data-title=»Как вставить кнопки социальных сетей на сайт» data-top1=»150″ data-top2=»20″ data-margin=»0″></div>
<script type=»text/javascript» src=»https://rpilot62.ru/wp-content/uploads/2018/06/56410.jpg»></script>

Изменяем значение следующих атрибутов:

data-top1=»150″ data-top2=»20″ data-margin=»0″

data-top1 — расстояние от начала страницы до панели, в пикселях;

data-top2 — расстояние от верха видимой области страницы до панели, в пикселях;

data-margin — смещение панели по горизонтали, в пикселях (отрицательно значение — влево, положительное значение — вправо).

Дополнительно можно скопировать и вставить  в файл стилей вашего сайта (файл с расширением .css) дополнительные стили для кнопок.

Вставка кода в шаблон сайта

У кнопок от Яндекса расположение горизонтальное. Значит ищем описание куда вставлять горизонтальные кнопки.

Для сайта на DLE:

Если использовать горизонтальные кнопки, ищем в шаблоне файл fullstory.tpl (путь — site.name/templates/имя-шаблона/fullstory.tpl).

После полной новости {full-story} вставляем код социальных кнопок.

Если использовать вертикальные кнопки, можно код вставить в файл main.tpl прямо перед закрывающим тегом </body>

Для сайта на WordPress:

Если использовать вертикальные кнопки, полученный код вставляем в файл footer.php перед закрывающим тегом </body>.

Если использовать горизонтальный блок кнопок, то рекомендую вставить скрипт в файл single.php в любое место, где хотите увидеть соц. кнопочки.

 

Внешний вид:

Коды для вставки:

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

Скрипт кнопок социальных сетей распространяется бесплатно.

Скрипт очень прост в установке. Для того чтобы кнопки отображались в том месте Вашего сайта где вы желаете их видить скопируйте код кнопок и вставьте код в html-код вашего сайта в желаемое место.

Не полный список поддерживаемых CMS:

WordPress

DLE

Joomla

Drupal

NetCat

ExpressionEngine

Битрикс

MODx

Shop-script

WebAsyst

Shop-cms

Opencart

Cs-cart

Magento

GoodCMS

ECSHOP

ECMall

PrestaShop

eShop

Simplacms

VamShop

vBulletin

XenForo

IPB

Если Вы столкнулись с трудностями в процессе установки кода кнопок на свой сайт то всегда можете обратиться за помощью к разработчикам продукта используя следующие контактные данные:

Email: mail@сайтофициально.рф

ICQ: 499834384

Поисковая оптимизация сайта (SEO)


Советы для продвижения сайта в поисковых системах

Поисковая оптимизация сайта>Кнопки социальных сетей

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

  1. Рекомендации по установки кнопок различных социальных сетей:
  2. Для быстрого размещения кнопок со счетчиком используйте конструкторы кнопок.

    Например:

  3. С точки зрения поисковой оптимизации сайта идеальный вариант — установка кнопок без счетчика, без использования JavaScript или Flash.

    Если дизайн сайта позволяет, вместо иконок социальных сетей можно использовать просто ссылки, дизайн которых можно менять по своему усмотрению:

    Например:

    <a href=»http://vkontakte.ru/share.php?url=ссылка вашего сайта“ rel=»nofollow» target=»_blank»>Вконтакте</a>
    <a href=»http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=ссылка вашего сайта» rel=»nofollow» target=»_blank»>Одноклассники</a>
    <a href=http://connect.mail.ru/share?share_url=ссылка вашего сайта“ rel=»nofollow» target=»_blank»>Mail.ru</a>
    <a href=»http://www.facebook.com/sharer.php?u=ссылка вашего сайта» rel=»nofollow» target=»_blank»>Facebook</a>
    <a href=»https://plusone.google.com/_/+1/confirm?hl=ru&url=ссылка вашего сайта«>Google +</a>
    <a href=»https://twitter.com/intent/tweet?text=ссылка вашего сайта» rel=»nofollow» target=»_blank»>Twitter</a>

    Для сайта seo.andreasreisch.com это выглядит последующим образом:

    <a href=»http://vkontakte.ru/share.php?url=http://seo.andreasreisch.com/“ rel=»nofollow» target=»_blank»>Вконтакте</a>
    <a href=»http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=http://seo.andreasreisch.com/» rel=»nofollow» target=»_blank»>Одноклассники</a>
    <a href=http://connect.mail.ru/share?share_url=http://seo.andreasreisch.com/“ rel=»nofollow» target=»_blank»>Mail.ru</a>
    <a href=»http://www.facebook.com/sharer.php?u=http://seo.andreasreisch.com/» rel=»nofollow» target=»_blank»>Facebook</a>
    <a href=»https://plusone.google.com/_/+1/confirm?hl=ru&url=http://seo.andreasreisch.com/«>Google +</a>
    <a href=»https://twitter.com/intent/tweet?text=http://seo.andreasreisch.com/» rel=»nofollow» target=»_blank»>Twitter</a>

    Внешний вид:

    ВконтактеОдноклассникиMail.ruFacebookGoogle +Twitter

Copyright © Andreas Reisch

Для работы с сервисом http://share42.com/ru Вам необходимо сперва получить расширенные права доступа к системе управления сайтом, получить Вы можете их самостоятельно (следуя инструкции по ссылке).

После получения расширенных прав доступа следуйте инструкции:

1.

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

2. Добавьте подкаталог с названием share42.

3. Откройте данный подкаталог и загрузите туда файлы из архива.

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

Если Вы увидели содержимое скрипта, значит путь указан правильно.

5. Выберите подходящий тип cms.

6. Скопируйте полученный код.

7. И разместите его его вшаблоне «Главная. Верх» перед закрывающим тегом </head>.

8. После внесения всех изменений нажмите кнопку «Сохранить изменения».

Добавить комментарий

Закрыть меню