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

25 Апрель 2012
Фишки для блога






Здравствуйте уважаемый посетитель  моего блога  !

  • Сегодня речь пойдёт о социальных кнопках и как разместить их на своём блоге или одностраничном сайте.

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

Я испробовала на своём сайте несколько вариантов таких кнопок, это сервис и http://share42.com/ и плагин Social Share Buttons  http://wordpress.org/extend/plugins/share-buttons/. Но всё время мне что то не нравилось:

  • Кнопки от сервиса Share 42 не на все блоги почему то устанавливается, да и кнопки там какие то мутные
  • А в плагине  Social Share почему то не все кнопки работали, когда я кликала всё было нормально, а знакомые писали что кнопки не работают

Вот поэтому я всё таки остановила свой выбор на сервисе  AddThis   http://www.addthis.com/.И не только из-за этого, сами кнопочки работают безотказно и грузятся намного быстрее остальных. Их легко установить как на WP блог , так и на одностраничный сайт или виртуальную открытку.

А теперь к делу. Я сначала расскажу как поставить кнопки на одностраничник, а потом уже как это сделать на своём Вордпресс блоге.Заходим на сайт http://www.addthis.com/

Сначала выбираем дизайн кнопок, крупные или помельче, и нажимаем на Большую оранжевую кнопку

addthis

 

Выскакивает окошко, где нас просят ввести свой e-mail и повторить 2 раза пароль. В принципе этого можно и не делать, кнопки всё равно будут работать. Но лучше сделать, тогда Вы сможете отслеживать статистику нажатий на кнопки на разных статьях и сможете понять какой контент нравится людям отправлять в соцсети.

Дальше, нам надо скопировать код для того чтобы поставить кнопки на сайт

 

addthis3

 

Заходим на сайт через FilleZilla или другой графический редактор, можно даже через блокнот и вставляем код туда, где нам бы хотелось видеть  наши кнопки. А если мы хотим чтобы кнопочки были посередине, то обязательно вставляем код перед кодом кнопок

 [stextbox id="grey" shadow="true"]<table width="300" border="0" cellspacing="1" cellpadding="20" align="center" bgcolor="#ffffff"> <tr><td>[/stextbox]

 

(на схеме он выделен — увеличение картинки по клику):

 

addthis4

 

Теперь ставим кнопки на свой WordPress блог, для этого нам даже не обязательно заходить на сайт этих кнопок. Достаточно набрать в нашей админке (в разделе Плагины, Установить новый)  AddThis. А потом просто активировать его из своей админки, как поставить плагин на сайт смотрите здесь. Далее заходим в Параметры, находим там наш плагин, кликаем на него и идём настраивать






 

addthis6

 

И перед нами откроется такая картина. Нам предлагают опять таки зарегестрироваться Красные стрелки (можете это сделать) а можете нажать Дополнительные параметры Зелёная стрелка. И выбрать как будут выглядеть кнопки над Вашими постами

 

addthis7

 

Выбираем как это будет выглядеть над постами

addthis8

И точно так же поступаем с нижними кнопками, то есть нажимаем Дополнительные параметры и выбираем вид кнопок. И нажимаем в самом низу «Сохранить изменения». Обновляем страницу блога и видим выбранные нами кнопочки

addthis9

 

На следующей вкладке идут остальные настройки. Выбираем где и как будем показывать кнопки, то есть будут ли они показываться на Главной странице, на страницах, в архивах или категориях

addthis10

 

Теперь посмотрим как выбрать ещё социальные сервисы кроме тех, которые отображаются. Идём в статью, нажимаем на оранжевую кнопку

 

addthis11

Появляется выпадающее меню, в котором мы можем выбрать ещё соцсети или социальные закладки. Но это ещё не всё! Можно нажать ещё раз на оранжевую иконку под названием ЕЩЁ, уже в этом окне и сервис выдаст ещё кучу соцсетей и соцзакладок

addthis12

А ещё после установки плагина AddThis в разделе админки блога Виджеты, появляется новый виджет, который так же можно установить в сайдбаре блога и точно так же выбрать вид кнопок

addthis13

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

addthis14

Есть ещё один вариант использования этого сервиса. Можно поставить кнопку прямо в браузер и делиться в соцсетях интересными новостями с друзьями. Для этого надо нажать на  любую кнопочку из тех которые вылезут в табличке

addthis15

После этого Вас перекинет в Майл, Фейсбук или любую другую выбранную Вами соцсеть. Но Вы возвратитесь на страничку своего сайта. И тогда увидите вот такой значок. Нажимайте на него

addthis16

После нажатия на эту кнопку, мы попадаем в магазин расширений Гугл Хром. Нужно нажать кнопочку «установить», после этого расширение установится в браузере. И Вы сможете точно так же пользоваться им, как и на своём сайте. То есть нажмёте на кнопочку на любом интернет ресурсе и сообщение о нём пойдёт в выбранную Вами соцсеть

addthis17

Как установить расширение в Гугл Хром Вы можете посмотреть в видеоуроке, на примере установки плагина для браузера RDS бар.

Итак, из этой статьи Вы узнали

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

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

А какими сервисами для соцкнопок пользуетесь Вы? И какие у Вас есть вопросы по интернет технологиям для Вашего бизнеса.

Вы можете прочитать другие  статьи,
для этого воспользуйтесь Картой сайта.
А также получать новые статьи прямо на Ваш почтовый ящик.
Введите свой E-mаil:

 


С Уважением, Татьяна Чиронова   






  

Сохраните пост к себе на стенку в соцсети



 


А здесь можно публиковать анонсы постов по теме:  


 










На ту же тему
Обсуждение: 15 комментариев
  1. elenamerts:

    Я наверное, совсем тупая:( Так долго разбиралась в том, что Вы написали и устанавливала все эти кнопочки. И не всё получилось так, как хотелось. Вот как, например сделать так, чтобы нижние кнопки отображались только тогда, когда статья уже развернута? У меня они теперь торчат сразу после анонса. И на главной странице получилась разноцветная смесь.

    • Татьяна Чиронова:

      Елена извините, что долго не отвечала, напряжённое время было. Вам надо просто зайти Параметры AddThis Расширенные (или Передовые, это как браузер переведёт) и убрать галочку из первого пункта Домашняя страница.
      И вообще не бойтесь в этом разделе поэксперементировать, если что, то просто переустановите плагин, ведь на блог в целом он никак не повлияет.

  2. NataLia:

    Спасибо, Татьяна!

  3. Алексей:

    А я вот ввел в админке AddThis и плагин на аглицком установился. Не подскажите, как на русском поставить? (Внутри плагина пробовал сменить язык — не помогло). В принципе, с аглицким проблем нет, но все же удобнее

    • Татьяна Чиронова:

      Я пользуюсь Гугл Хромом и нажимаю просто перевести на русский.

  4. Marina:

    Танечка- как же просто ты все объясняешь!!!!!
    Завтра поменяю немного кнопки по твоим урокам- и как всегда- передам дальше для «чайников»

    СПАСИБО!!!!!!!!!!

  5. Людмила и Владимир:

    Спасибо! Опробуем! А то открыток уже куча, а кнопки никак не установим)))

  6. Елена:

    Таня, вот это пост! Все разобрала по полочкам! В свое время, я ох как намучилась с этими социальными кнопками(если бы я в то время нашла такой урок!!!), да еще в паре с бесплатными шаблонами…это просто не передаваемые ощущения.

    • Татьяна Чиронова:

      Спасибо Лена!
      Я поэтому и написала такой подробный пост, что мучений приняла не мало от этих соцкнопок в своё время.

  7. Юлия:

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

    Все бесплатные шаблоны глючат или ссылок там полно зашифрованых.

    • Татьяна Чиронова:

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

  8. Леон:

    Спасибо за взаимность

  9. Юлия:

    Таня, спасибо, очень подробно и понятно.

    Мне наверное надо свою тему или менять или переустанавливать, потому что при настройке кнопки появляются и вместе с ними в шапке сайта появляется html код.

    • Татьяна Чиронова:

      Да Юля, я пробовла твой шаблон на тестовом сайте, и даже не смогла поставить туда виджеты, он глючный какой то

  10. Марина:

    Спасибо,Танечка! Я все хотела поставить соц.кнопки на открытку.Но ничего не находила пошагово.А здесь просто классный урок. Теперь я не только поставлю на открытку,но и в виджете.

Поделитесь своим мнением
Для оформления сообщений Вы можете использовать следующие тэги:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Свежие записи
Как снизить нагрузку на CPU хостинга cайта вордпресс
Как снизить нагрузку на CPU хостинга cайта вордпресс
Создание gif анимации онлайн без фотошопа. Фоторедактор PicMix.
Создание gif анимации онлайн без фотошопа. Фоторедактор PicMix.
Как настроить YouTube для удобного просмотра видео и отключить рекламу. Плагин для хрома Magic Actions for YouTube™
Как настроить YouTube для удобного просмотра видео и отключить рекламу. Плагин для хрома Magic Actions for YouTube™
Free Traffic Club — бесплатная реклама в Фейсбук
Free Traffic Club — бесплатная реклама в Фейсбук
Как правильно установить Savefrom net для Google Chrome
Как правильно установить Savefrom net для Google Chrome
≡ 
 А вам подарок
смартреспондер
Дешевый хостинг
Интернет технологии для вас © 2016 ·   Войти Наверх