Как добавить кнопки закладок и социальных сетей на сайт или блог. И зачем они нужны.

Разместил / Просмотров: 24 592 / комментариев 27

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

Зачем нужны эти кнопки на сайте?

Ну как зачем?:) Для того чтобы поделиться своей новой статьёй или новостью с друзьями, с людьми. Это дополнительный трафик на Ваш сайт, хотя и не большой, но всё же. Во вторых, для того, чтобы Вашу свеженькую статью побыстрее проиндексировали поисковые системы, и чтобы она побыстрее появилась в поисковой выдаче.

А вот эта причина, наверное, одна из самых важных в современном интернете.

В настоящий момент очень много появилось людей, веб мастеров, которые копируют Вашу информацию с сайта (плагиат), и непосредственно размещают её у себя на ресурсе, хуже того не ссылаясь на источник.  Теперь представьте ситуацию: Вы написали статью, над которой трудились 5 часов, она уникальна, Вы её разместили, а в социальные закладки и сети не добавили. В один прекрасный момент на Ваш ресурс заходит нехороший человек  копирует статью и размещает у себя на сайте. Очень повезёт если Вашу новую статью успеет проиндексировать поисковик на Вашем сайте.  А если он её проидексирует на сайте нехорошего человека раньше чем на вашем? Соответственно статью, на которую Вы затратили много времени, поисковик засчитает как плагиат и может наказать за это. Не справедливо, правда?

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

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

Ну а теперь давайте рассмотри как же добавить эти заветные кнопочки на наш сайт:)

В этом нам поможет замечательный сайт share42.com. Почему именно этот сайт? Потому что всё очень просто и ясно по русски написано:) Скачал скрипт установил код на сайт и радуйся:) Теперь подробнее:

Заходим на share42.com, и видим список социальных сетей и закладок.

По умолчанию разрешение иконок стоит 32*32, Вы можете выбрать и меньше. Далее в представленном списке просто кликаем (выделяем) на иконки которые будут отображаться на Вашем сайте.

Ниже Вам предоставляются такие опции:

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

Скачали скрипт, теперь нужно зайти на вкладку «Установка».

Вам предоставят выбор движка сайта (в данном случае WordPress). Теперь нужно скинуть скачанный скрипт в корневую папку на хостинге, только чтобы папка с скриптом была доступна по адресу http://ваш сайт/share42/. Скинули?:) Затем заходим в админку блога далее в вкладку Внешний вид и выбираем редактор. Далее ищем файл (справа)  single.php И теперь после записи вставляем вот этот код:

<script type=»text/javascript» src=»http://beloweb.ru/share42/share42.js»></script>
<script type=»text/javascript»>share42(‘http://beloweb.ru/share42/’,'<?php the_permalink() ?>’,'<?php the_title() ?>’)</script>

Естественно beloweb.ru заменяем на свой сайт.

У меня это выглядит так:

Желательно найти строчку наподобие

<?php the_content(); ?>
                    <div class="postTags"><?php the_tags(); ?></div>

Или что то в этом роде всё зависит от вашего шаблона. Вы экспериментируйте. Ставьте код закладок выше или ниже, потом проверяйте, и всё получится. Я, например, так и делал:)

Добавляем стили

Ну а теперь нужно добавить стили к данному скрипту. Опять же заходим в админку — внешний вид — редактор. Справа (внизу)  выбираем стили. И в открывшееся окно вставляем вот этот код:

#share42 {
  display: inline-block;
  padding: 6px 0 0 6px;
  background: #FFF;
  border: 1px solid #E9E9E9;
  border-radius: 4px;
}
#share42:hover {
  background: #F6F6F6;
  border: 1px solid #D4D4D4;
  box-shadow: 0 0 5px #DDD;
}
#share42 a {
  opacity: 0.5;
  vertical-align: bottom;
}
#share42:hover a {opacity: 0.7}
#share42 a:hover {opacity: 1}

Теперь в коду нужно присвоить <div>. В общем код закладок будет выглядеть так:

<div id=»share42″> <script type=»text/javascript» src=»http://ваш сайт/share42/share42.js»></script>

<script type=»text/javascript»>share42(‘http://ваш сайт/share42/’, ‘<?php the_permalink() ?>’,'<?php the_title(); ?>’)</script></div>

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

Желаю Вам успешной установки скрипта на сайт. Пока.

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

  • Это точно, трафик с соц. сетей идёт не маленький. И по этому кнопки это один из важных элементов на сайте.

  • Спасибо за кнопочки.

  • Всегда рад :-)

  • Ирина

    Александр, а в какое место скинуть скачанный скрипт в корневой папке?
    Устанавливаю прямо сейчас.

  • Там где все файлы Вашего сайта, туда и скидывайте. Чтобы скрипты были доступны по этому адресу http://ваш сайт/share42/

  • Ирина

    Хорошо, все красиво встало.
    Следующий вопрос:
    в списке стилей в какое место вставить код?

  • Ирина, в админке в файле style.css в любое место где понравится :-)

  • Ирина

    Понятно, сейчас сделаю. Еще хочу у Вас слизать «Понравилась статья…?»
    Закончу- напишу :-)

  • Хорошо. Жду :-)

  • Ирина

    Александр! Все получилось и я даже кое-что поняла :-)
    Спасибо большое за сопровождение !

  • Рад был Вам помочь, Ирина! :-)

  • Анатолий

    Александр, если не сложно объясните как эти кнопки выровнять по правую сторону и как убрать отступы от них(Я имею ввиду сверху и снизу), заранее спасибо!

  • Анатолий, в стилях добавить нужно float: right; — выравнивание по правой стороне.
    margin-top: 5px; — отступ сверху в пикселах
    margin-bottom: 5px; отступ снизу тоже в пикселах.

  • Хорошая штука! :-)

  • Спасибо большое :-)

  • Андрей

    Все бы хорошо,но еще бы убрать ссылку на share42.с ихней кнопкой.

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

  • Андрей

    Да,благодарю.просмотрел,убрал галку,все работает.

  • Объясните кто-то принципиальную разницу между share42 и addthis?

    Вообще, люди не особо охотно реагируют на эти кнопки, по крайней мере на подопытных сайтах.

  • Евгений, возможно и никакой разницы нет между этими кнопками. Просто человек выбирает то что ему больше нравится.

    По поводу реагирования людей на кнопки, я с Вами не соглашусь. Реагируют ещё и как. Вот Вам пример: прочитал я очень интересную статью, а кнопки,чтобы поделиться ею нет. Поверьте очень не удобно.

  • Может мы просто говорим о разной тематике сайтов — у меня на 20к посетителей всего 50-80 кликов по этим иконкам (иконки стоят под материалами и страницами предприятий в бизнес справочнике)…

    Может кому любопытно, какие иконки ставить у меня вот что в статистике:
    Vkontakte — 80.40%
    Facebook — 16.80%
    Google+ Share — 2.00%
    Twitter — 0.40%
    Mail.ru — 0.40%

  • Евгений, тут согласен с Вами полностью по поводу тематики. Ещё многое зависит от оформления сайта и в каком месте эти иконки стоят. И соответственно внешний вид этих иконок.

  • мария

    здравствуйте. написано: «заходим в админку блога далее в вкладку Внешний вид и выбираем редактор». на сайтах ucoz такого нет… куда заходить?

  • Мария, здесь рассказано как добавить эти кнопки на блог Вордпресс.

  • мария

    а юкозом не знакомы — помочь не сможете? спасибо

  • Мария, на юкозе есть возможность заливать файлы на хостинг?