3.8.11

Blogger: Кнопки 'поделиться' и кнопка +1 (+1 button)

40 comments

+1 Button

Blogger: Кнопки 'поделиться' и кнопка +1 (+1 button)
Здравствуйте, мои дорогие!

Ни Google ни Blogger не стоят на месте и каждый день они предлагают как своим читателям так и вебмастерам (а блогеры безусловно ими являются) что-то новое.

Вот и сегодня я расскажу вам о новинке от Гугла. Как вы уже заметили по названию - это кнопка +1, помогающая читателю поделиться интересными находками в интернете со своим кругом общения (друзьями, родственниками, коллегами) да и всем миром.

А вот как GOOGLE объясняет достоинства кнопки +1:


Конечно, Google рассказал ни о всех достоинствах кнопки +1. Мы с вами как вебмастера, а каждый блоггер если не обязан, то ему приходится быть вебмастером, мы понимаем как важны удобные кнопки "Поделиться" для продвижения наших ресурсов и новая кнопка +1 звучит очень многообещающе.

И конечно, как только Google объявил о внедрении нового инструмента, было написано десяток статей и разработано несколько API и плагинов для внедрения кнопки +1 в различные интернет-проекты: блоги на различных платформах, форумы, и другие CMS. Ведь каждому хочется дать читателю возможность легко порекомендовать всем своим друзьям и знакомым данный товар или информацию.

В данном случае и в данной заметке нас интересует добавление кнопки +1 в блог на платформе Blogger. И как вы понимаете Blogger это сделал для нас самым простым способом.

Добавляем кнопку + 1 в блог на платформе Blogger:

1. Идем в Дизайн и кликаем в блоке "Сообщения блога" на ссылку Изменить:




2. И ничего придумывать не надо - просто говорим Blogger'y, что мы хотим чтобы под каждым сообщением блога была кнопка +1 и все другие кнопки, помогающие нашим читателям рассказать об их великолепной находке в нашем блоге ;).

Смотрим на рисунок. Ставим у себя галочку и не забываем нажать. СОХРАНИТЬ

Это все работает для хороших девочек и мальчиков, которые используют стандартные шаблоны Blogger'а, а еще лучше пользуются Blogger'овским Дизайнер'ом.

У некоторых, как и у меня этот простейший способ не работает.. Тогда мы не расстраиваемся, а читаем дальше...

Итак, галочка напротив "Показывать кнопки для публикации" (см. шаг 1.-2.) у вас стоять ОБЯЗАНА.

И мы (те у кого кнопки для публикации в блоге так и не появились) продолжаем
3. Идем в Дизайн -- Редактировать Html
4. Делаем резервную копию Шаблона своего блога.
5. Ставим галочку на "Расширить шаблоны виджета"
6. Ищем в шаблоне нашего блога строчку:

<div class='post-footer-line post-footer-line-2'/>

на самом деле это может быть

<div class='post-footer-line post-footer-line-1'/>

или

<div class='post-footer-line post-footer-line-3'/>

дело исключительно вашего вкуса, где вы хотите видеть эти "Кнопочки от Blogger'а"

7. И после строчки, которую вы выбрали вставляем следующий код:

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


Возможно, на этом ваша работа закончится и нажав Просмотр в конце поста вы увидите вот такие кнопочки

Смело нажимайте СОХРАНИТЬ и рекомендуйте этот пост друзьям и знакомым ;).

8. Возможно кнопки у вас в блоге не нарисовались совсем.
Тогда возможно в шаблоне вашего блога есть строчка:

<b:includable id='shareButtons' var='post'/>

Поздравляю - она совершенно устарела! Теперь вместо неё надо вставить вот такой длинный код:
<b:includable id='shareButtons' var='post'>
<b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'>
<span class='share-button-link-text'><data:top.emailThisMsg/></span>
</a></b:if><b:if cond='data:top.showBlogThisButton'><a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'>
<span class='share-button-link-text'><data:top.blogThisMsg/></span>
</a></b:if><b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToTwitterMsg/></span>
</a></b:if><b:if cond='data:top.showFacebookButton'><a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToFacebookMsg/></span>
</a></b:if><b:if cond='data:top.showOrkutButton'><a class='goog-inline-block share-button sb-orkut' expr:href='data:post.sharePostUrl + &quot;&amp;target=orkut&quot;' expr:title='data:top.shareToOrkutMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToOrkutMsg/></span>
</a></b:if><b:if cond='data:top.showBuzzButton'><a class='goog-inline-block share-button sb-buzz' expr:href='data:post.sharePostUrl + &quot;&amp;target=buzz&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=415,width=690\&quot;); return false;&quot;' expr:title='data:top.shareToBuzzMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToBuzzMsg/></span>
</a></b:if>
<b:if cond='data:top.showDummy'>
<div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>
</b:if>
</b:includable>

Теперь кнопки ("Share buttons") должны под каждым постом у вас появиться. И если они появились, то нажимаем СОХРАНИТЬ и при желаниие нажимаем +1 на этот пост.

9. А возможно кнопки у вас появились все... кроме +1.

Т.е. выглядят они так:

10. Значит нам осталось только "приписать" к ним кнопку +1.
и это делается просто:

В шаблоне ищем строчку

</head>

и перед ней вставляем такой код:

<script src='https://apis.google.com/js/plusone.js'/>

Теперь если вы нажмете ПРОСМОТР у вас под каждым постом просто обязаны появиться "кнопки для перепоста".

Сохраняем изменения в шаблоне.

Если что-то не получилось, обязательно пишем мне.






11. А теперь по желанию добавим еще немного красоты и функциональности.

Модифицировать будем только код вставленный в пункте 7.

1) Если вы не хотите, чтобы кнопки для публикации появлялись на странице отличной от страницы самого поста, то код из шага 7 заменяем на:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post-share-buttons'>
<b:if cond='data:post.sharePostUrl'>
<b:include data='post' name='shareButtons'/>
</b:if>
</div>
</b:if>

Хочу только заметить, что все кнопки для публикации от Blogger'а работают абсолютно корректно(!) Т.е. если на странице более чем один пост и вы кликаете на одну из кнопок Поделиться - делиться вы будете именно тем постом на кнопку под которым вы кликнули.

2) Если вы хотите добавить пояснение перед кнопочками лучше всего вместо кода из пункта 7 вставить следующий код:

<div class='post-share-buttons'>
<table><tr><td><b><i>Поделиться: </i></b></td><td>
<b:include data='post' name='shareButtons'/></td></tr></table></div>

3) Если хотите обвести кнопки с вашим текстом в рамочку, то читайте про рамочки. И добавьте описатель стиля в div. Все вместе получится примерно вот так с точностью до цвета, ширины и типа границы (здесь в коде я использовала blue - что значит синий). Вы можете использовать любой другой (про цвета можно прочитать)

<div class='post-share-buttons' style='padding: 5px; border: 5px inset blue'>
<table><tr><td><b><i>Поделиться: </i></b></td><td>
<b:include data='post' name='shareButtons'/></td></tr></table></div>

На сегодня это все. Но рассказ про кнопки с других ресурсов я обязательно продолжу.

Всем здоровья и хорошего настроения!
Света

Дополнительно читать о Кнопке +1 (+1 button):
http://www.google.com/intl/ru/webmasters/+1/button/


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

Blogger: кошка. Комментарии и вопросы более чем приветствуются, нужна помощь - поможем!
Читать дальше...

40 комментариев:

  1. Спасибо, очень полезно, добавила))
    У меня еще вопрос:как добавить кнопку Вконтакте

    ОтветитьУдалить
  2. Здравствуйте, спасибо за статью :)
    А что делать, если у меня нет ни одной из строчек, которые нужно искать(<div class='post-footer-line...>)?
    знаю что нужные кнопки появятся если тыкнуть " Восстановить шаблоны виджетов по умолчанию", но тогда изменится вид блога ((
    Заранее спасибо за помощь )

    ОтветитьУдалить
  3. Спасибо, получилось. Интересно будет ли толк какой нить от этой кнопки?

    ОтветитьУдалить
  4. Ксюмка, добрый день!

    Кнопки социальных сетей тоже будем добавлять... но для этого понадобится подготовительная работа ;).

    Расскажу позже.

    Удачи во всем!
    Света

    ОтветитьУдалить
  5. Нестой, здравствуйте!

    Почти правильное решение. Чтобы оно было идеальным - из кода виджита уберите все кроме:
    <script src='https://apis.google.com/js/plusone.js'/>
    именно эта строчка отвечает за работу кнопки +1.

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

    Если будет интересно можно продолжить разговор, почему +1 в боковой колонке не всегда хорощо.

    Может быть я напишу на эту тему маленький пост или продолжим обсуждение здесь ;).

    С уважением,
    Светлана

    ОтветитьУдалить
  6. Mescalit0, здравствуйте!

    Для вашего блога: http://twilightslumber.blogspot.com/

    Надо найти следующий код:
    <span class="reaction-buttons">
    </span>

    и заменить его на код из шага 7:

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

    После этого смотреть, что получится....

    Пишите, разберемся!
    Света

    ОтветитьУдалить
  7. Здорово, что у вас все получилось "Фотографии.."!

    А что до толку от всего этого... от продвинутости ваших читателей зависит. Это же кнопки для перепоста, а чтобы перепостить надо иметь место где перепостить, хотябы твиттер или фэйсбук, что до кнопки +1 - там еще хуже, чтобы её нажать у человека должен быть публичный профайл на Гугле - я вот себе только-только такой завела, чтобы самой попробовать как эта кнопка +1 работает.

    Так что поживем увидим ;).

    Про русскоязычные социальные сети напишу чуть-чуть попозже.

    Удачи во всем!
    Света

    ОтветитьУдалить
  8. АААА!!! Вы гений! Я долго мучался с этой кнопочкой. У меня два блога: в одном она была, а в другом никак не появлялась.... я всё внимательно прочёл, и уже на первом этапе - всё получилось!
    СПАСИБО ОГРОМНОЕ!

    ОтветитьУдалить
  9. Здравствуйте, это снова я ) Заменить код у меня не вышло - выдавало ошибку. Но я ухитрился впихнуть код из шага 7 внутри своего. Получил пункт 9, выполнил 10й и возрадовался!:) Большое спасибо, без Вас бы не справился.

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

    ОтветитьУдалить
  11. Ах, Hr.Sokolow, вы просто везунчик!

    У меня ни в одном блоге так просто не ставилось ... отсюда и куча рекомендаций, а теперь с Mescalit0 мы нашли и еще один неординарный вариант установки кнопок ;).

    Удачи во всем!
    Света

    ОтветитьУдалить
  12. Светлана, огромная вам благодарность, что учите и делитесь информацией! Скажите, у меня вопрос офф-топ...Где-то промелькнула вот такая информация "Размер страницы. Некоторые страницы (главная страница блога, страницы с сообщениями в архиве) не могут превышать объем в 1 МБ. Этого хватит для нескольких сотен страниц текста, но, если вы захотите опубликовать на главной странице сто сообщений, может возникнуть проблема. Если вы достигнете этого лимита, появится сообщение об ошибке: "006 Свяжитесь со службой поддержки Blogger". Чтобы устранить эту проблему, сократите количество публикаций на главной странице. Кроме всего прочего, благодаря этому она будет загружаться быстрее." Можете пояснить? Заранее спасибо. Если такая информация уже была, то просто дайте ссылку, пожалуйста.

    ОтветитьУдалить
  13. А давайте "плюсать" друг-друга
    Я вот http://www.travelphoto.org.ua/

    ОтветитьУдалить
  14. @Ghost: Конечно будем плюсать, с тех пор как я стала готовить пост о кнопке +1 я и плюсаю все интересное (когда нахожусь в правильном гугловском аккаунте).

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

    Но чтобы ваш комментарий не пропал зря, раз я уж его опубликовала... Используйте лучше Blogger'овские кнопки "поделиться с плюсом", а то ваши стандартные кнопки +1 неправильно работают на главной странице, странице ярлыков и архива.

    Удачи во всем!
    Света

    ОтветитьУдалить
  15. Настя, здравствуйте!

    Информация у вас довольно правильная. Ошибку Blogger, конечно, не выдает, но самовольно уменьшает количество постов на странице. Об этом было написано здесь: http://buzz.blogger.com/2010/02/auto-pagination-on-blogger.html

    А мы еще разбирали как с этим можно бороться: http://blogger4you.blogspot.com/2011/06/blogger-gazetniy-stil-shablona-bolshe.html используя кат ссылку "Читать далее..."

    Удачи во всем!
    Света

    ОтветитьУдалить
  16. Светлана, спасибо!!!!!! Пошла читать) А-то я со своей детворой не всегда успеваю следить за новостями;-)

    ОтветитьУдалить
  17. Благодарю Вас, попробую

    ОтветитьУдалить
  18. Помогите мне пожалуйста - у меня глаза уже как у окуня пучеглазого...))) Я ничего не нахожу в своих кодах...

    ОтветитьУдалить
  19. отлично! все работает! спасибо большое!

    ОтветитьУдалить
  20. Дякую! Пост дійсно корисний, хоч і не використовував його для роботи та мій Вам +1

    ОтветитьУдалить
  21. Большое спасибо. Добавила +1 с вашими подсказками. Сама бы не справилась.

    ОтветитьУдалить
  22. Света, извините, что немного "не в тему" - не нашла "правильного места", где бы можно было задать этот вопрос.

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

    ОтветитьУдалить
  23. А я засунул гугл плюс и другие счётчики в карусельку http://blogger.omg-linux.ru/2011/08/vk.html

    ОтветитьУдалить
  24. Светлана здравствуйте. В связи с возникшими проблемами, о которых я писала вам в предыдущем своем комментарии (шаблон не подгружался в дизайнере шаблонов)на моем сайте http://maman-lima.com/ пришлось поменять его на новый. Теперь нужно устанавливать с нуля все кнопки и т.д. Но по непонятным мне пока причинам не удается установить ни стандартные кнопки ни какие либо другие. Например, как в этом посте.
    Возникли проблемы с поиском строки
    div class='post-footer-line post-footer-line-2'/

    у меня она такого вида div class='post-footer-line post-footer-line-2' без палочки /

    Кстати в коде b:includable id='shareButtons' var='post'/ тоже в конце у меня в шаблоне тоже нет палочки. Поэтому когда я выполнила его замену на предлагаемый вами код у меня вышла ошибка шаблона.
    Подскажите пожалуйста в чем может быть причина почему у меня такое отличие в коде и как мне поступить, чтобы у меня появились кнопки. Заранее благодарю.

    <> скобки в коде убрала, потому что комментарий не сохранялся

    ОтветитьУдалить
  25. Блин,ничего не выходит,куда бы не тыкал кнопочка не появляется,может это потому что шаблон в Артистере 3 воял? Что делать теперь?

    ОтветитьУдалить
  26. givanov36, вы не попробавали пункт 10.

    Уверена, у вас все получится!

    Удачи во всем!
    Света

    ОтветитьУдалить
  27. вот и дело-то в том, что все пробовал, везде пытался, как я понял у меня шаблон подключен к jQuery.

    ОтветитьУдалить
  28. Все,разобрался,сделал так как описано в гугловской справке-там в двух местах надо код вставлять.

    ОтветитьУдалить
  29. Подскажите пожалуйста!

    Как мне кнопку Blogger поставить чтобы посетители делились новостями на своём блоге Blogger ?

    И где я могу взять эту кнопку?

    Заранее благодарен за ответы!

    ОтветитьУдалить
  30. Света, огромное спасибо! перелопатила куууучу информации, но этот пост единственное вменяемое объяснение того, как же все-таки эту кнопку +1 добавить. Все получилось! Ура!

    ОтветитьУдалить
  31. что-то ни один вариант мне не помог, кнопки так и не появились

    ОтветитьУдалить
  32. Супер! Фантастически понятно рассказано (впрочем, как всегда) и показано. Все кнопочки установились за несколько секунд.
    Спасибо, Светлана!

    ОтветитьУдалить
  33. А если после пункта 8 все равно ничего не появилось?! Что тогда делать?:)

    ОтветитьУдалить
  34. Светлана, я попыталась выполнить все по пунктам и уже на 4 пункте (создать резервную копию) у меня ничего не получилось. Выдает какие-то ошибки... Можно Вам картинку прислать?

    ОтветитьУдалить
  35. Большое СПАСИБО!

    ОтветитьУдалить
  36. Спасибо все получилось очень полезная статья!

    ОтветитьУдалить
  37. Здравствуйте! Не могу найти ни одной части кода. Даже в блоге, в котором кнопки работают.
    Что делать? Помогите, пожалуйста.

    ОтветитьУдалить
  38. Света, HELP! на Ваш блог попал когда искал информацию, как разместить у себя в блоге статью из web-газеты, FB и проч. Есть ссылки на гугль + и пр, а на Blogger нигде нет. А когда хочу перепостить свое сообщение на Blogger в FB (кнопка есть), то вместо фотографии из сообщения, уходит фотография из бокового виджета.

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

Популярные сообщения