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

+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/


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

Комментарии и вопросы более чем приветствуются, нужна помощь - поможем!

Читать дальше...