Установка кнопок Поделиться от Яндекс в шаблон блога на Blogger

Знаю, что тема с социальными кнопками не нова. Да и расписывать что-то о гаджете «Поделиться» от Яндекс нет никакого смысла. В тоже время, искать нужную информацию о его установке в шаблон блога на Blogger как-то напрягает. Поэтому решил опубликовать свою статью с пошаговой инструкцией и лишь некоторыми полезными пояснениями. Надеюсь, это сэкономит вам время и поможет добиться наилучшего результата.

Содержание

• Введение
• Кнопки соцсетей «Поделиться» от Яндекс
• Установка кнопок в шаблон блога на Blogger
• Параметры гаджета «Поделиться» от Яндекс
• Оформления гаджета социальных кнопок

Введение

А начну я с того, что гаджетов для шаринга (англ. share – доля, участие, пай) в социальные сети достаточного много, например UpToLike. Здесь важно понимать, что шаринг включает в себя как ссылку, так и плюс, лайк и т.д., но сама отметка иногда может идти отдельно. Тем не менее, лучше совместить приятное с полезным и избавиться от лишнего на страницах сайта, например, оригинальных кнопок соцсетей, т.к. они создают дополнительную нагрузку на ресурс.

Кнопки соцсетей «Поделиться» от Яндекс

С моей точки зрения, самым оптимальным вариантом здесь будет использовать гаджет «Поделиться» от Яндекс. Он прост, удобен и стабилен. При желании вы можете сгенерировать нужный вам вариант на этой странице. Конечно, там даны далеко не все фишки, но тем не менее.

Следует также отметить, что если у вас установлен счётчик Яндекс.Метрика, вы сможете использовать отчет: Содержание > кнопка «Поделиться» – для отслеживания статистики кликабельности социальных кнопок и страницам сайта, где они расположены. Очевидно, что такая статистика очень полезна в плане изучения аудитории вашего сайта и выбора той социальной сети, где она присутствует.

Установка кнопок в шаблон блога на Blogger

Ну а теперь перейдём от слов к делу. Не исключено, что процесс автоматической установки гаджета «Поделиться» от Яндекс в шаблон блогов на Blogger где-то и кем-то уже реализован, но мне об этом не известно. Поэтому я предлагаю вашему вниманию свою пошаговую инструкции с полным перечнем действий и моими пояснениями.

Шаг 1. Для начала вам нужно сгенерировать код гаджета, как это было упомянуто ранее. В статье, я буду использовать наиболее оптимальный и готовый вариант, потому данный момент опущу.

Шаг 2. Авторизуемся на Blogger и переходим в раздел «Шаблон» нужного блога. Предварительно рекомендую сделать резервную копию шаблона, для этого воспользуйтесь кнопкой «Резервное копирование и восстановление» (она находится в правом верхнем углу страницы). Далее кликаем кнопку «Изменить HTML».

Шаг 3. На открывшейся странице редактора, вам нужно найти в коде шаблона закрывающийся тег </HEAD>. Для этого кликните по текстовому полю редактора шаблона и нажмите комбинацию кнопок Ctrl+F. В самом редакторе шаблона появится форма поиска, куда надо ввести: </head> – и нажать кнопку Enter. Нужный тег, будет выделен желтым цветом.

Шаг 4. Перед этой строкой вам нужно будет вставить HTML-код вызова JavaScript библиотеки кнопки «Поделиться» от Яндекс:

<script src='//yandex.st/share/share.js' type='text/javascript' charset='utf-8'/>

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

<b:if cond='data:blog.pageType == &quot;item&quot;'><script src='//yandex.st/share/share.js' type='text/javascript' charset='utf-8'/></b:if>

Таким образом, скорость загрузки других страниц будет куда как выше.

Примечательно здесь и то, что сам гаджет работает в кодировке UTF-8. Поэтому, если вы используете другу кодировку, обязательно явно укажите кодировку для вызова JavaScript библиотеки, т.е. атрибут: charset='utf-8'.

Шаг 5. Теперь найдите и выберите в списке «Список виджетов» (он находится рядом с оранжевой кнопкой «Сохранить шаблон») виджет «Blog 1». Таким образом, вы будете автоматически перенаправлены к нужному виджету, который состоит из нескольких инклудов (англ. includable). Среди них нас интересует тот, что с id='post'. Для того, чтобы раскрыть его, вам нужно кликнуть по стрелочке в соответствующей строке.

Шаг 6. В появившейся части кода вам нужно найти вывод ссылки «Подробнее», он может иметь следующий вид:

<b:if cond='data:post.hasJumpLink'><div class='jump-link'><a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a></div></b:if>

Главный ориентир это шаблонные переменные data:post.hasJumpLink (показывать ли ссылку) и data:post.jumpText (текст ссылки подробнее). Сразу после этого условия, т.е. тега </b:if> вам нужно вставить следующий код:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='sharethis'><div class='b-ya-likes yashare-auto-init' data-yashareL10n='ru' data-yashareQuickServices='twitter,facebook,vkontakte,moimir,odnoklassniki,gplus' data-yashareTheme='counter' data-yashareType='big' expr:data-yashareDescription='data:post.snippet' expr:data-yashareImage='data:post.thumbnailUrl' expr:data-yashareLink='data:post.url' expr:data-yashareTitle='data:post.title'/></div>
</b:if>

Как вы видите, я и здесь использовал условие, что гаджет «Поделиться» от Яндекс, будет выводиться только на страницах со статьями, но это не значит, что он не будет работать на страницах архива. Опять же, DIV с id='sharethis' не обязательный, его я использую лишь для дополнительного оформления гаджета.

Шаг 7. Вот собственно и всё, жмем кнопку «Сохранить шаблон» и наслаждаемся результатом. Тем не менее, я рекомендую ознакомиться с тем, что и как работает, а также как это всё можно красиво оформить.

Параметры гаджета «Поделиться» от Яндекс

Разберём, приведённый ранее, код гаджета более детально. По сути, он представляет собой обычный DIV с рядом невалидных атрибутов:

• data-yashareL10n – идентификатор языка гаджета. По умолчанию: ru.
• data-yashareQuickServices – идентификаторы социальных сетей и сервисов, перечисленных через запятую, для формирования кнопок в гаджете. По умолчанию использован стандартный набор. У себя я использую оптимальный, с моей точки зрения, набор и последовательность кнопок в виде: Twitter, Facebook, ВКонтакте, Мой Мир@Mail.ru, Одноклассники и Google+.
• yashareTheme – тема оформления гаджета, по умолчанию «ссылка». У себя я использую вариант «счетчики» (counter), т.е. кнопки со счётчиками.
• data-yashareType – недокументированный параметр, который определяет тип кнопок в гаджете. У себя я использую вариант «большие» (big). Можно не указывать.
• data-yashareDescription – краткое описание статьи. По умолчанию определяется автоматически на основе метатега description текущей или указанной в data-yashareLink страницы. К сожалению, на Blogger существует только шаблонная переменная data:blog.metaDescription, но она выводит описание для текущей страницы (подробней тут), что не подходит для тех же страниц архива. Поэтому я предлагаю или не указывать этот параметр или использовать шаблонную переменную data:post.snippet, которая содержит начальный текст поста.
• data-yashareImage – URL-адрес картинки. По умолчанию определяется автоматически на основе ссылки image_src, метатега og:image, первой картинки на текущей или указанной в data-yashareLink страницы. На Blogger URL-адрес картинки содержит шаблонная переменная data:blog.postImageThumbnailUrl (для текущей страницы) и data:post.thumbnailUrl (для отдельного поста). К сожалению, размер этой картинки всего 72 пикселя, что приемлемо не для всех соцсетей. У себя на блоге я использую простенький трюк, о котором писал тут.
• data-yashareLink – URL-адрес страницы, т.е. ссылка шаринга. По умолчанию определяется автоматически для текущей страницы. Это значение содержится в шаблонной переменной data:blog.canonicalUrl (для текущей страницы) и data:post.url (для отдельного поста).
• data-yashareTitle – заголовок страницы, т.е. текст ссылки (анкор). По умолчанию определяется автоматически на основе тега TITLE на текущей или указанной в data-yashareLink страницы. Это значение содержится в шаблонной переменной data:blog.pageName (для текущей страницы) и data:post.title (для отдельного поста).

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

Оформления гаджета социальных кнопок

Я не просто так использовал дополнительный DIV в коде гаджета, т.к. это позволяет оформить его надлежащим образом. Например, у себя на блоге я добавляю картинку с надписью: Понравился пост? Поделись с друзьями! – и стрелочкой на гаджет. Для этого, с учётом выше приведённого кода, достаточно добавить следующий CSS:

#sharethis {
  background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNx_5vgaaIFgjheNBX0avcqrasFFGfD4Xzfc1mBIWjBCf9bdveH2NgeBKlTDd9cTS5NZTGOQWEfJ8JH5Bct9d3s77C5HwbZc7gRLjBzBQ_QpLLiZVktb7mgWgkFgdp7zjlSpqTgWq9acjY/s800/share.png') 0 15px no-repeat;
  padding:60px 0 10px 10px;
}

Добавить его можно непосредственно в шаблон, в секцию b:skin или через дизайнер шаблонов: Шаблон > Настроить > Дополнительно > Добавить CSS. На этом у меня всё. Спасибо за внимание. Поделитесь моей статьёй с друзьями в социальных сетях. Удачи!

Короткая ссылка: http://goo.gl/n4wkoZ