Как встроить социальные кнопки в Blogger. Вконтакте, одноклассники, ярушка.

 

Друзья, внизу этого сообщения я привентил к блоггеру кнопки для русских соцсетей – вконтакта, одноклассников, моего мира, жж.

Чтобы вы не скроллили, покажу, как это выглядит:

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

Для начала идем на яндекс, создаем блок “поделиться" для вашего сайта. Делается это просто и вот по этой ссылке.

Там мы создаем кучу кнопок, по мне, так все нужные, кроме гугль+.

Теперь наша задача – воткнуть сгенерированный на яндексе код.

Самое простое было бы взять и воткнуть код в виджет, который читает текст/код и расположить виджет между сообщением и комментариями. И виджет такой есть, а возможности его расположить между сообщением и комментариями нету.

Тогда я переставил админку на классический вид, в ней все не так красиво, как в новой, но в ней больше кнопок. И там зашел в дизайн, html и поправил шаблон.

Искать надо все на раз-два-три как в картинке ниже

Изменить HTML шаблона в Blogger

Картинка на всякий случай кликабельна.

Код копируем, хотя его можно обработать и на сайте.

Далее в коде ищем

<div class='post-share-buttons goog-inline-block'>

В дизайне моего шаблона это где-то 1350 строчка

и возле него вставляем код, полученный на яндексе.

Теперь остается только косметическая правка, так как у нас код, генерируемый яндексом, двигает соц-кнопки на десяток пикселей правее, чем гугловые кнопки. Да и ряд гугловых не помешало бы убрать – зачем публиковать дважды кнопки на твиттер и фейсбук?

Задаем отступ слева для гугловых соцкнопок на 8 пикселей и получаем то, что видим у меня

<div class='post-share-buttons goog-inline-block' style='margin-left:8px;'>

 

и для красоты задаем у яндексового ряда кнопок отступ сверху

<div  style='margin-top:8px;' class='yashare-auto-init'

Осталось найти включение кнопок в панели от блоггера и оставить нужное.

<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.showDummy'>
        <div class='goog-inline-block dummy-container'>
            <data:post.dummyTag/>
        </div>
    </b:if>
</b:includable>

 

Как-то так.

Следующим шагом разберусь, как менять титул в блоггере. Ну постараюсь разобраться.

Да, если статья показалась полезной, жмите на кнопки =)