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

03.08.2013

 Несколько раз пробовала вставить социальные кнопки в само сообщение, но инструкции из Интернета не срабатывали. Нашла все-таки решение и спешу поделиться с Вами.

Для начала отключите встроенную в Blogger кнопку публикации сообщения в Google+. Тем более что она осталась теперь одна (раньше было 4 или 5).

Для этого в Дизайне блога нужно нажать Изменить сообщение и убрать галочку в строке Показывать кнопки для публикации:

Сохранить изменения.

Теперь расскажу, как вставить социальные кнопки  после текста статьи:

1. Делаем резервную копию шаблона Вашего блога.

2. Заходим в настройки блога >> Шаблон >> Изменить HTML.

3. Ставим курсор внутри рамки с кодом шаблона >> нажимаем Ctrl+F.

4. В строку поиска вставляем: <b:include data='post' name='post'/>


5. Нажимаем клавишу Enter и в шаблоне подсветится нужный нам код:

6. Ставим курсор в конец строки >> нажимаем Enter >> подводим курсор под начало строки <b:include.... и вставляем код выбранных Вами социальных кнопок.

Нажимаем Просмотр шаблона. Если кнопки появились, то сохраняем шаблон.

Вариантов внешнего вида кнопок много. Например, на сайте http://share.pluso.ru/ можно выбрать количество социальных сетей и закладок, форму, вид, фон кнопок.

Если же Вам некогда или просто лень :) заниматься выбором кнопочек, то я настроила для Вас 2 варианта. Можете взять любой код на выбор.

1. Квадратные  социальные кнопки без фона в две строки:

  
Код таких кнопок: 
<center><script type="text/javascript">(function() {
          if (window.pluso)if (typeof window.pluso.start == "function") return;
          var d = document, s = d.createElement('script'), g = 'getElementsByTagName';
          s.type = 'text/javascript'; s.charset='UTF-8'; s.async = true;
          s.src = ('https:' == window.location.protocol ? 'https' : 'http')  + '://share.pluso.ru/pluso-like.js';
          var h=d[g]('head')[0] || d[g]('body')[0];
          h.appendChild(s);
          })();</script>
        <div class="pluso" data-options="medium,square,multiline,horizontal,nocounter,theme=03" data-services="vkontakte,odnoklassniki,moimir,vkrugu,moikrug,yandex,facebook,twitter,google,blogger,liveinternet,livejournal,bookmark,yazakladki,googlebookmark,yahoo,bobrdobr,email,print" data-background="transparent"></div></center>
2.  Или вот такие круглые соцкнопки без фона:




Код этих кнопок: 
<center><script type="text/javascript">(function() {
          if (window.pluso)if (typeof window.pluso.start == "function") return;
          var d = document, s = d.createElement('script'), g = 'getElementsByTagName';
          s.type = 'text/javascript'; s.charset='UTF-8'; s.async = true;
          s.src = ('https:' == window.location.protocol ? 'https' : 'http')  + '://share.pluso.ru/pluso-like.js';
          var h=d[g]('head')[0] || d[g]('body')[0];
          h.appendChild(s);
          })();</script>
        <div class="pluso" data-options="big,round,multiline,horizontal,nocounter,theme=03" data-services="vkontakte,odnoklassniki,moimir,vkrugu,moikrug,yandex,facebook,twitter,google,blogger,liveinternet,livejournal,bookmark,yazakladki,googlebookmark,yahoo,bobrdobr,email,print" data-background="transparent"></div></center>
 Обратите внимание, что для выравнивания кнопок по центру я добавила в коды параметры <center>......</center>. Если будете настраивать свой вариант кнопок от pluso (или других разработчиков), то можете сами добавить этот HTML код.

!!! Для того, чтобы социальные кнопки читатель видел не на Главной странице блога (после анонсов статей), а после прочтения всего поста, нужно добавить условие: 
      
<b:if cond='data:blog.pageType == &quot;item&quot;'> код кнопок </b:if>   
Первая часть кода этого условия вставляется также, как и сами кнопки - см. выше шаги 4-6. Затем код выбранных Вами социальных кнопок. И заключительная часть </b:if>.
Надеюсь, что у Вас все получится. 
P.S. Кстати,  я писала и про другие варианты социальных кнопок, ведь это отличный бесплатный способ продвижения Вашего блога или сайта. Посмотрите "похожие статьи" ниже или воспользуйтесь поиском по ярлыку социальные кнопки.


53 комментария:

  1. Мария, спасибо, всё получилось! (h) :)

    ОтветитьУдалить
  2. Хороший вариант вставки кнопок, у меня такой же только от яндекса, от плюсо по моему мнению не очень смотрятся в статье. Этот вариант плох тем что если нажимать на них не в статье они копируют только адрес главной страницы. Но я себе поставил также чтоб код шаблона не грузить разными гаджетами, и работает отлично.

    ОтветитьУдалить
  3. Спасибо большое http://chertezhi-kompas3d.blogspot.com/

    ОтветитьУдалить
  4. получилось!! вот: http://strahovkaprosto.blogspot.com/

    ОтветитьУдалить
  5. Мария, спасибо, все получилось!
    А вы не знаете как можно сделать так, чтобы не только ссылка вставлялась, а и картинка статьи?
    Нажимаю поделится, и в соц сетях только ссылка отображается, а картинки нету.

    ОтветитьУдалить
    Ответы
    1. Вот и у меня аналогичная ситуация...Никак не получается исправить .,:(((

      Удалить
  6. Анонимный05.12.2013, 23:26

    Мария, да спасибо огромное, Теперь действительно работает!

    ОтветитьУдалить
  7. Огромное приогромное спасибище, уже столько намучилась ничего не получалось, сделала как написано и вот они кнопочки у меня в каждом посте красуются. Все гениальное просто)))

    ОтветитьУдалить
  8. А у меня не получилось(((
    Не могу найти в коде нужную строку.

    ОтветитьУдалить
    Ответы
    1. Попробуйте поискать код строки выше или ниже той, о которой говорится в статье - см. скриншот из шага 4. Строка № 1293 или № 1295.

      Удалить
  9. Анонимный22.01.2014, 17:34

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

    ОтветитьУдалить
  10. (нечаяно анонимно) :)
    я вставила.все вроде бы получилось. но когда захотела поделиться делиться не определенной статьей а какой попало или же сам блог просто... Как решить чтоб определенную статью было?
    http://wkola-krasoti.blogspot.com

    ОтветитьУдалить
    Ответы
    1. Здравствуйте! Я дополнила статью. Попробуйте добавить код из последнего абзаца. Теперь, думаю, можно будет поделиться конкретной статьей с блога.

      Удалить
    2. а куда именно это вставить?после чего?

      Удалить
    3. После строки в шаге 4. Если код кнопок у Вас уже вставлен, то его нужно просто "окружить" условием: 1 часть кода условия+код кнопок+2 часть кода условия.

      Удалить
  11. Алилуйя! какие хорошие статьи!!! наконец то мне, чайнику, все понятно! мужу просто нос завтра утру))))

    ОтветитьУдалить
  12. к сожалению конкретной статьей не делиться((( дополнительные рекомендации не помогли(((

    ОтветитьУдалить
  13. у меня блог с прэвью постов. В самих прэвью кнопки расположились как надо, а вот когда пост разворачиваешь, то кнопки уезжают аж под счетчик страниц! И еще, как отключить кнопки встроенные блоггер и на их место встроить выбранные мной кнопки? То что я с них галочку в настройке сообщений снимаю мне ничего не дает. Спасибо
    http://delichon-urbicum.blogspot.co.il/

    ОтветитьУдалить
    Ответы
    1. Кнопки блоггер отключаются в настройки-дизайн-( в центре сообщение нажимайте туда). По поводу что уехали скорей всего строчка не та. Попробуйте сюда вставить < div class='post-footer-line post-footer-line-3' > пробелы уберите только.
      Мария не обижайтесь пожалуйста, что отвечаю вашим читателям) Даже я иногда сюда заглядываю узнать что нового у вас...

      Удалить
  14. Спасибо Вам большое, Анна! К сожалению, сама не успеваю отвечать на комментарии.

    ОтветитьУдалить
  15. Этот комментарий был удален автором.

    ОтветитьУдалить
  16. Этот комментарий был удален автором.

    ОтветитьУдалить
  17. Этот комментарий был удален автором.

    ОтветитьУдалить
  18. Очень извиняюсь, но можешь сделать скриншот кода? Не получается в конец статьи вставить хоть убей(

    ОтветитьУдалить
    Ответы
    1. В шаге 5 есть скриншот. В каком шаге еще добавить?

      Удалить
  19. Аллилуйя!!! Все получилось!!!!
    Мария, спасибо Вам за Ваш поистине титанический труд и за то, что Вы делитесь своими знаниями!!!!

    ОтветитьУдалить
  20. Добрый день! Нужна помощь: всё делаю как Вы говорите, а кнопки вставляются перед статьёй, что я неправильно сделала? Помогите пожалуйста))

    ОтветитьУдалить
  21. У меня не находит этот код, поискала в строчках как у вас, там вообще похожего нет ни чего.

    ОтветитьУдалить
  22. Здравствуйте! На сайте http://share.pluso.ru/faq есть ответ на вопрос "Можно ли менять изображение, описание и текст, которые отображаются рядом со ссылкой на страницу в соц. сетях?" Подскажите, пожалуйста, что делать с этими кодами в блоггере, куда вставить?

    ОтветитьУдалить
    Ответы
    1. Здравствуйте. Там же, в "Технических вопросах" есть вопрос: "Почему при отправлении ссылки на страницу в социальные сети не отображается картинка и описание, а только ссылка?",а в качестве ответа "Если у вас возникла подобная проблема, необходимо в тэг HEAD вставить следующий код..". Чтобы вставить предложенный код, нужно: 1)сделать резервную копию блога; 2) зайти в настройках блога в пункт "шаблон" -> Изменить HTML; 3) найти тег HEAD (их два), 4) перед последним вставить скопированный код.

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

      Удалить
    3. Здравствуйте. Было бы неплохо посмотреть по ссылкам другие блоги, чтобы посмотреть пример.

      Удалить
  23. Мария, спасибо Вам! Понятная статья, все достаточно быстро получилось))) http://git-tak-prosto.blogspot.ru/ Посмотрите сами)))

    ОтветитьУдалить
  24. Никак не могу вставить этот код у меня MacBook и когда нажимаю CTRL+F ничего не происходит. Как быть?((((( Так жалко.

    ОтветитьУдалить
  25. {Заходим в настройки блога >> Шаблон >> Изменить HTML}, Вот это слово "шаблон" оно где? иЛИ ЭТО НЕ ВОРДПРЕСС? У меня в админ панеле такого слова нет, как этот пункт найти? Вот скажем, зашла в админ панель, дальше куда?

    ОтветитьУдалить
    Ответы
    1. Здравствуйте, Елена. Все статьи здесь посвящены блогам на платформе Blogger. Для WordPress нужны другие инструкции.

      Удалить
  26. Анонимный01.03.2016, 04:00

    А как удалить и html сам код стандартных кнопок (
    Показывать кнопки для публикации )?

    ОтветитьУдалить
    Ответы
    1. Здравствуйте. А зачем удалять код кнопок, если их можно просто "отключить" для показа в блоге? В настройках сообщения в пункте "дизайн".

      Удалить
  27. Здраствуйте, Мария. Пыталась вставить кнопки соцсетей и на главной страничке случился кавардак: все сместилось вниз блога (http://shmosgd.blogspot.com/). Подскажите, что делать. Спасибо.

    ОтветитьУдалить
    Ответы
    1. Здравствуйте, Оксана. У Вас просто все гаджеты переместились в нижнюю часть блога. Нужно зайти в настройки блога (пункт "Дизайн") и переместить гаджеты на боковую колонку. Если не поможет, тогда проделайте все шаги по установке кнопок в обратном порядке.

      Удалить
  28. Спасибо)А я все эксперементирую с шаблонами) Блог новый помогите раскрутить аа))
    blog-ideass.blogspot.com

    ОтветитьУдалить
    Ответы
    1. Здравствуйте. Я очень долго шла к той посещаемости, которая есть сейчас, т.к. специально "раскручиванием" не занималась. Просто писала и пишу о том, что мне интересно и может пригодиться другим. Хорошо помогают соцсети, публикации, страницы в них. Есть специальные биржи, где можно найти фрилансеров, выполняющих задания.

      Удалить
  29. Здравствуйте, Мария! В прошлом году вставила, как Вы советуете кнопки pluso в текст сообщений, точно помню, как редактировала шаблон HTML. Сейчас хочу кое-что поправить, но почему-то,сейчас в тексте HTML не могу найти эти коды. Даже элементарно слово vkontakte. Искала и поиском и глазами. На других сайтах, посвещенных блогам, во время установки кнопок pluso рекомендовали нажать галочку "Расширить шаблоны виджета", но такой галочки сейчас нет. Может версия блогера изменилась? Где теперь все искать?

    ОтветитьУдалить
    Ответы
    1. Здравствуйте! Сейчас в HTML-коде шаблона "спрятаны" целые куски кодов (гаджетов, скриптов и др.). Чтобы раскрыть все спрятанные части, нужно найти слева (где на серой вертикальной полосе идет нумерация строк в шаблоне) черные треугольнички и нажимать на них. Может появиться еще один треугольник, по щелчку на который откроется нужный код. Т.е. нужно понажимать на треугольники и потом уже искать нужное через клавиши Ctrl+F

      Удалить
  30. Мария, извините за беспокойство, но я что-то не въезжаю(может старенькая для этого и нужно все разжевывать). Не могу понять как сделать резервную копию шаблона блога. Я просто не могу в настройках найти ШАБЛОН ((( Что не так?!((

    ОтветитьУдалить
    Ответы
    1. Здравствуйте, Лариса. Создатели Блоггера зачем-то "переназвали" этот пункт, теперь вместо пункта "Шаблон" ищите пункт "Тема" (о сохранении резервной копии шаблона статья здесь http://samasajt.blogspot.ru/2013/01/blog-post_17.html)

      Удалить
    2. Мария, спасибо, как сделать резервную копию - это у меня получается, а вот вставить код кнопок не получается. Эту строку()-мой поиск не находит. Поэтому я в растерянности. Не знаю, между каких строк код кнопок воткнуть...

      Удалить
    3. Здравствуйте! Сейчас в HTML-коде шаблона "спрятаны" целые куски кодов (гаджетов, скриптов и др.). Чтобы раскрыть все спрятанные части, нужно найти слева (где на серой вертикальной полосе идет нумерация строк в шаблоне) черные треугольнички и нажимать на них. Может появиться еще один треугольник, по щелчку на который откроется нужный код. Т.е. нужно понажимать на треугольники и потом уже искать нужное через клавиши Ctrl+F
      Если всё равно не находит - еще варианты строк, после которых можно вставить соц.кнопки (также, как и "похожие сообщения") есть в статье http://samasajt.blogspot.ru/2015/01/pohozhie-soobscheniya-nastraivaemyj-gadget.html

      Удалить
  31. Мария, спасибо вам огромное! Долго искала, и наконец у меня получилось! Теперь у меня есть красивые и аккуратные кнопочки!

    ОтветитьУдалить

Kwork.ru - услуги фрилансеров от 500 руб.

Загляните и на другие страницы ^