воскресенье, 17 февраля 2013 г.

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

Думаю, не надо объяснять, как популярны сейчас в Интернете социальные сети. Чтобы дать возможность читателям поделиться вашим постом в своих социальных сетях, нужно поставить кнопки этих сетей. 
В Блоггере предусмотрены стандартные кнопки, но, во-первых, они очень аскетичны. Во-вторых, в них не представлены такие популярные в Рунете социалки, как "Вконтакте", "Одноклассники", ЖЖ.
Поэтому я решила вставить в блог свои кнопки.

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


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

Поэтому лучше всего убрать их код из шаблона блога, чтобы освободить его от лишних исходящих ссылок.
Делается это следующим образом:
Открываем в своем блоге  Шаблон-Изменить HTML. (Внимание! Нужно обязательно сделать резервную копию шаблона блога перед любыми изменениями в нем).
Поиском (в шаблоне, а не на странице!) находим такие слова: post-share-buttons

Они часть этого куска кода:
<div class='post-share-buttons goog-inline-block'>
<b:if cond='data:post.sharePostUrl'>
<b:include data='post' name='shareButtons'/>
</b:if>
</div> 

Этот кусок надо закомментировать (как в примере ниже) или вовсе удалить.

<!-- <div class='post-share-buttons goog-inline-block'>
<b:if cond='data:post.sharePostUrl'>
<b:include data='post' name='shareButtons'/>
</b:if>
</div>-->

Нажимаем "Просмотр". Если все в порядке, то сохраняем шаблон и переходим непосредственно к вставке кнопок.
Я пошла самым простым путем, и кнопки решила вставлять не в шаблон блога, а в виде виджета. Так проще - если потом захочется их убрать и поставить какие-то другие, то  их будет легко найти и не надо рыться в коде.
Сам скрипт для кнопок можно взять на множестве сайтов. Мне понравились те, которые предоставляет Sharethis.com (а вот здесь можно прочитать, как вставить кнопки соцсетей от русскоязычного сервиса Pluso)

У этого плагина есть "побочный эффект". Если теперь в вашем блоге кто-то скопирует кусок текста Ctrl-C и вставит у себя Ctrl-V, то в конце скопированного текста появится ссылка вида  See more at: адрес_поста_откуда_скопировано
Это защита контента блога. Но я про это ничего не знала и была шокирована происходящим.


Чтобы вставить такие кнопки социальных сетей нужно проделать следующее:

Заходим на сайт и выбираем GET THE BUTTON (фото кликабельные)


Дальше следуем пошаговым указаниям: 
На первом шаге выбираем платформу, на которую ставим кнопки (у нас это Блоггер). Нажимаем NEXT.


Вторым шагом выбираем стиль будущих кнопок. Я выбрала просто кнопки.


Третьим шагом выбираем нужные социальные сети. Список там огромный, и, что приятно, есть и наши: "Вконтакте" и т.д.


Нажимаем FINISH
Выскочит окошко, в котором вам предложат зарегистрироваться. Я выбрала регистрацию по e-mail. После регистрации Блоггер спросит, добавлять ли виджет и в какой блог (если у вас их несколько).


Нажимаете "Добавить виждет", и он появляется у вас в "Дизайн" самым первым в правой панельке под названием  ShareThis. Остается только перетащить его на нужное место (я поставила кнопки под сообщение).

P.S. Кнопка "Вконтакте", к сожалению, не дает выбирать картинку сообщения. Только его ссылку. Читателю придется заходить к себе на страничку "Вконтакте" и вручную вставлять адрес изображения из вашего поста.

UPD: Иногда бывает полезно скрыть тот или иной виджет на некоторых страницах блога. Например, убрать кнопки соцсетей с главной для ускорения загрузки.
Для этого
1. Сделать виджет с кнопками и убедиться, что он правильно работает. Запомнить название виджета.
2. Зайти в "Шаблон" -> Изменить HTML. (Тут неплохо было бы еще раз сохранить код перед изменениями)
3. Найти виджет в коде по названию. Открыть его. Он может выглядеть так:

Или так:

4. После строчки <b:includable id='main'> вставить: <b:if cond='data:blog.pageType == &quot;item&quot;'>

5. Перед строчкой </b:includable>  вставить </b:if>

6. Сохранить код.

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

UPD2: Заодно можно подправить некоторую странность, заложенную создателями Blogger'а:
Почему-то малозначительный заголовок виджета оформляется типом <h2>, что совершенно не нужно. Лучше заменить этот тип на <p>, например.

NB: Необходимо помнить, что если виджет придется удалить и создать заново, то эти изменения пропадут и их нужно будет вносить заново.

Еще полезные вещи, которые можно вставить в блог:
Как вставить музыку в блог
Как поставить проверку орфографии
Как вставить социальный плагин от Фейсбука
Как вставить виджет от ВКонтакте
Как перевести свой блог на другие языки
Как вставить презентацию в блог
Как вставить после поста ссылки на похожие посты с помощью LinkWithin
Как сделать галерею ссылок с помощью InLinkz
Как вставить счетчик посещений с флагами Flagcounter
Как вставить баннер в блог
Как вставить в блог рассылку по электронной почте
Какие кнопки счетчиков поставить в блог
Как вставить поиск по блогу

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

  1. Таня, здравствуйте! Может, Вы сможете мне помочь? Я вставила гаджет Переводчик, но у меня он не "включился", т.е. не открывается окошечко со списком языков, его почему-то вообще нет...

    ОтветитьУдалить
  2. Елена, похоже на какой-то глюк. А вы пробовали еще раз переставить этот гаджет? Ума не приложу, как он мог так "косо" встать.

    ОтветитьУдалить
  3. Хоть бы ссылку на этот сайт оставили, ХРЕН НАЙДЕШЬ НУЖНЫЙ В ГУГЛЕ!

    ОтветитьУдалить
    Ответы
    1. Странно, неужели какие-то проблемы? Копируйте sharethis.com сразу в строку, где набираете адрес сайта. И попадете на него! Да и по поиску первый результат тот, что нужно.

      Удалить
    2. Да, я тоже вставила гаджет Переводчик, а он не работает. Несколько раз вставляла, переставляла, перегружала, а он не работает:-) Глюк однозначно!!!

      Удалить
  4. Татьяна, очень у вас позновательный блог! Спасиибо за Ваш труд!!!

    ОтветитьУдалить
    Ответы
    1. Я рада, что вам что-то пригодилось :)

      Удалить
  5. Хороший блог, спасибо за полезные статьи.
    Можно узнать почему вы убрали блок социальных сетей?

    ОтветитьУдалить
    Ответы
    1. Спасибо, что напомнили. Я собралась вставить другие кнопки, от Яндекса (из-за того эффекта с копированием, о котором я писала в посте). Убрать старый убрала, а новый вставить забыла :) Будет минутка времени - добавлю.

      Удалить
  6. Спасибо, Татьяна. Очень помогли. У меня получилось поставить то, что я хотела. Это здорово. Хочу добавить: чтобы быстро найти нужные HTML строчки:
    скопировала их, нажала на сочетание Ctrl+F, в строку поиска вставила и быстро нашла. Благодарю!

    ОтветитьУдалить
    Ответы
    1. Я рада, что все получилось. А поиск по Ctrl+F, действительно, удобен в таких случаях:)

      Удалить
  7. Татьяна, спасибо огромное за эту статью! Очень помогли!!

    ОтветитьУдалить
  8. Классные кнопочки, то что нужно) слишком уж упрощен их первоначальный вариант в блогспоте. А здесь даже и на я.ру выход есть) спасибо за статью, используем)

    ОтветитьУдалить
  9. Ответы
    1. В этом плагине их нет, но можно подыскать и с лайками. Я еще таким вопросом не задавалась :)

      Удалить
  10. Спасибо большое, блог полезный... Вот только не могу я найти строчки, которые нужно удалить (для удаления старых кнопок). То ли смотрю не там, то ли не вижу ничего...

    ОтветитьУдалить
  11. Здравствуйте Татьяна! Вопрос такой: ну ни как не могу найти где ставить галочку "Расширить шаблоны виджета ". У вас написано так:"Открываем в своем блоге Шаблон-Изменить HTML. Нажимаем галочку "Расширить шаблоны виджета" Я не нашел там где ставить галочку и может ли быть, что из-за этого у меня тоже не находит нужные надписи в коде?

    ОтветитьУдалить
  12. так, с галочкой "Расширить шаблоны виджета" разобрался. Оказывается такой галки сейчас нет, т.к новый редактор шаблонов. Осталось разобраться с кодом. Если знаете, то подскажите как этот код выглядит.

    ОтветитьУдалить
    Ответы
    1. Да, вы правы, в новом редакторе все виджеты доступны и без галочки. Код же кнопок остался прежним. Поищите, где написано: 'post-share-buttons goog-inline-block'
      Чтобы найти нужную надпись, скопируйте ее CTRL-C. Перейдите в шаблон. Нажмите там CTRL-F (поиск) и в появившемся окошке вставьте CTR-V то, что вы скопировали. Нажмите ввод, и вам редактор подсветит желтым то место, где эта надпись встречается. Дальше действуйте так, как я описала в статье.

      Удалить
  13. я тоже не нашла эти строки... Татьяна, пробовала по новому как Вы указали, их тоже уже нет

    ОтветитьУдалить
    Ответы
    1. Можно пойти другим путем и просто отключить показ кнопок. Делается это в "Дизайн"-"Сообщения блога"-"Изменить". И отключаете галочку напротив "Показывать кнопки для публикации"

      Удалить
    2. Я перепроверила на шаблоне экспериментального блога - у меня все есть и все находит. Вы уверены, что правильно ищите по шаблону? Откройте его, щелкните по тексту мышкой, чтобы он стал активен, а после этого нажимайте СTRL-F. Окошко для поиска должно появиться в правом верхнем углу шаблона. Туда и вставляйте текст для поиска. Нажимайте "Enter".
      Надеюсь, все получиться.

      Удалить
  14. в дизайне есть где панель навигации кнопка изменить..там надо просто все выключить... но это единственное что я нашла чтобы вставить ... мож еще че есть..

    ОтветитьУдалить
    Ответы
    1. Если вы отключите панель навигации (навбар), то это исчезнет вверху меню самого Блоггера, там где "Следующий блог", "Новое сообщение", "Настроить", "Выход".
      Кстати, ссылка в шаблоне все равно останется, поэтому если чистить шаблон, то надо ее удалить. Вот тут я писала, как это сделать

      Удалить
  15. Спасибо за вашу работу! Так понятно и просто описана работа с блогом, все реально работает, а это вселяет надежду и придает сил в блоговедении. Спасибо!

    ОтветитьУдалить
    Ответы
    1. Я так рада, что мой опыт помогает вам:)

      Удалить
  16. спасибо большое за самое понятное описание! все работает! Только может подскажете как вставить еще и на главную страницу (в боковую колонку), а не только в сообщения?

    ОтветитьУдалить
    Ответы
    1. Вам надо будет в своем блоге зайти в "Дизайн" -"Добавить гаждет" - выбрать "HTML/java script" и вставить код скрипта в появившееся окошко.

      Удалить
    2. Спасибо за ответ, но проблема в том, что готовый РАБОЧИЙ код не могу нигде найти... Может подскажете?

      Удалить
    3. Не очень поняла, что вы имеете ввиду под "рабочий код". Надо вставить тот же самый код, что вставляли для сообщений. Просто в другое место.

      Удалить
  17. Таня, мерси. следуя четко инструкции получила заветные кнопки )))

    ОтветитьУдалить
  18. Тавика, напомните плиз, как сделать поиск нужных строчек в HTML коде?

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

      Удалить
  19. А я у себя на Я.ру не могу найти где дизайн,чтобы вставить кнопки.Реву не могу.Сил нету искать. SOS. Помогите.

    ОтветитьУдалить
    Ответы
    1. В Я.ру никогда не работала, поэтому, к сожалению, ничего подсказать не могу. Может, кто-нибудь из читателей моего блога откликнется?

      Удалить
  20. Спасибо, Татьяна, за полезное сообщение)

    ОтветитьУдалить
    Ответы
    1. Рада, видеть вас у меня в гостях и рада, что пригодилось:)

      Удалить
  21. Здравствуйте, Татьяна! Благодаря Вашим подсказкам мне многое удалось усовершенствовать в своем блоге, спасибо Вам большое! У меня правда не все получается... может подскажете еще разик? Вставляю кнопки социальных сетей, но они у меня вставляются только внизу, под всеми сообщениями, либо вверху над всеми, уже замучилась... Понимаю, что в коды не попадаю, но попасть точно не могу...http://mybells197.blogspot.ru/

    ОтветитьУдалить
    Ответы
    1. Это можно сделать прямо в "Дизайне" блога. Возьмите мышкой с правой панельки ваш гаджет и перетащите его под блок "Сообщения блога" - он должен вставть под него. После этого гаджет будет стоять под каждым постом.

      Удалить
  22. Блог Ваш понравился, только рубрики долго искала.

    ОтветитьУдалить
    Ответы
    1. Спасибо :) А рубрики, наверное, действительно есть смысл поднять. Я тут потихонечку переделываю дизайн, скоро и до рубрик доберусь :)

      Удалить
  23. Спасибо за пост. Есть вопрос, а как поставить кнопки соцсетей на фото в блоге?
    вот как здесь, например, при наведении курсора на фото, сразу несколько кнопок для поделиться
    http://www.adme.ru/svoboda-kultura/velikolepnaya-koko-748460/
    спасибо

    ОтветитьУдалить
  24. подскажите пожалуйста, как поставить окошко подписки на мой блог. не могу найти. чтоб посетители нажав кнопку присоединились к моему блогу. спасибо и извините за, наверное, глупый вопрос.

    ОтветитьУдалить
    Ответы
    1. Ну что вы, все мы проходим через эти этапы, и у всех на первых порах похожие трудности, так что ничего глупого в вопросе нет :) Для этого надо зайти в Дизайн, выбрать "Добавить гаджет". Там в окошке нажать "Другие гаджеты" и выбрать из них "Постоянные читатели".

      Удалить
  25. Татьяна, я желаю Вам процветания! Вы так помогли мне привести блог в порядок! Творите дальше нам на радость!

    ОтветитьУдалить
    Ответы
    1. Спасибо большое за добрые пожелания! :)

      Удалить
  26. Здравствуйте! У меня проблема... Со времени написания Вашей статьи прошло время и всё немного поменялось. В инструкции на сайте указано что нужно пользоваться виджетом "HTML/JavaScript", но к сожалению значки не отображаются!

    ОтветитьУдалить
  27. Здравствуйте! А как убрать кнопки с блога и вернуть стандартные?

    ОтветитьУдалить
    Ответы
    1. Надо сделать все в обратном порядке - удалить новый код и раскомментировать тот, что был.

      Удалить
  28. Привет. Не получилось убрать кнопки с главной.

    ОтветитьУдалить
  29. Татьяна, спасибо вам большое! Хотя на рекомендованном сайте немного всё поменялось, но у меня, чайника, благодаря вашим рекомендациям получилось поставить кнопки в сообщения в блоге! )))

    ОтветитьУдалить
  30. Привет! спасибо за пост! то, что мне было нужно. я использовал кнопки pluso. на главной кнопки перестали отображаться так же как и на всех последующих страницах. я хочу уточнить так и должно быть или у меня с кнопками от pluso вышло не совсем так? даю сылку на блог http://geliosmyblog.blogspot.com/. Посмотри пожалуйста так у меня все вышло или не совсем?

    ОтветитьУдалить
    Ответы
    1. Явно что-то пошло не так :) Кнопки должны быть видны, иначе нет смысла их вставлять:)

      Удалить
  31. Фух...попотеть пришлось. Сам сайт кнопочный немного изменился и процедура вставки тоже - Вы не уточнили кое какие детали, так что методом тыка, как обычно пришлось))) А а совет убрать кнопки с главной страницы - спасибо. Загрузка быстрее!

    ОтветитьУдалить
    Ответы
    1. Так сколько лет прошло:) Но кнопки все еще работают - и это главное :)

      Удалить
  32. Вы так непонятно написали именно про вставку виджета... Я так понимаю это теперь называется добавить гаджет в разделе дизайн?

    ОтветитьУдалить
  33. Скажите, пожалуйста, как сделать вот такой блок ссылок, как у вас на сайте - "Еще полезные вещи, которые можно вставить в блог"?

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

      Удалить
    2. Понятно. А есть ли какие-то автоматические способы это сделать?

      Удалить
    3. ))) Как раз в этом блоке ссылок можно найти "Как вставить после поста ссылки на похожие посты с помощью LinkWithin" - возможно, этот вариант вам подойдет.

      Удалить
    4. Все, увидела. Просто ссылок много в блоке, сразу не заметила. Спасибо.

      Удалить

Чтобы оставить комментарий, напишите текст в окошке и выберите в "Подписи комментария" профиль из любого вашего аккаунта. Если вы нигде не зарегистрированы, выбирайте Имя/URL и просто вводите свое имя - оно отобразится в подписи.

Related Posts Plugin for WordPress, Blogger...