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

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

Содержание

Введение

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

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

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

генерировать код гаджета поделиться от яндекс

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

статистика по социальным кнопкам

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

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

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

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

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

поиск тега head в коде шаблона используя функцию поиска редактора шаблона на blogger

Шаг 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'. Для того, чтобы раскрыть его, вам нужно кликнуть по стрелочке в соответствующей строке.

раскрытие инклуда с id=post в виджете Blog1 редактора шаблонов на Blogger

Шаг 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('//lh6.googleusercontent.com/-65B3BIcn6Ho/UPsukLoCTiI/AAAAAAAAH3w/XQC1s6H0OEs/s800/share.png') 0 15px no-repeat;
  padding:60px 0 10px 10px;
}

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

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

Лариса
Лариса комментирует...

Спасибо. Особенно за ..
Подходит и для кнопок Pluso. Без этого секрета соцкнопки на главной болтаются.
Как все-таки здорово Вы разбираетесь в этих кодах.

КоНсТаНтИн КиРиЛюК
КоНсТаНтИн КиРиЛюК комментирует...

@Лариса, общая концепция подходит для любых кнопок. Разбираться в коде не проблема, если знаешь хотя бы основы. Многие просто берутся делать без этого, вот и получается...