Как сделать свои кнопки социальных сетей и добавить их в Blogger?

Доброго времени, блогеры!

Сейчас вновь поговорим о социальных сетях. Как я и обещал в комментариях к одному из постов - публикую подробный туториал по установке кнопок социальных сетей для шаринга на блогохостинге Blogspot.com. Рассмотрим мы не только дизайн кнопок, которые установлены на iperenko.com, а гораздо больше! Готовы?

Самое главное про кнопки

Сегодняшняя статья это логичное продолжение моего поста «Как я решил сделать свои кнопки для шаринга». В том материале, я рассказывал почему я отказался от сторонних кнопок и почему выбрал решение с Font Awesome. Поэтому в обязательном порядке у вас должен быть подключен файл их стиля в разделе <head> вашего шаблона:

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css' rel='stylesheet'/>

HTML-скелет

Наша основа - это вот такая html-конструкция, которая адаптирована под редактор шаблонов Blogger с помощью декодера html-кода.

<div id='ipshare'> 
<div style='text-align:center;'>

<a class='vkontakte' expr:href='&quot;https://vk.com/share.php?url=&quot; + data:post.url' expr:onclick='&quot;window.openundefinedthis.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' rel='nofollow' target='_blank' title='Опубликовать во Вконтакте'><span> <i aria-hidden='true' class='fa fa-vk'/></span>Нравиться</a> 

<a class='facebook' expr:href='&quot;https://www.facebook.com/sharer/sharer.php?u=&quot; + data:post.url' expr:onclick='&quot;window.openundefinedthis.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' rel='nofollow' target='_blank' title='Опубликовать в Facebook'><span> <i aria-hidden='true' class='fa fa-facebook'/></span>Лайкнуть</a>

<a class='twitter' expr:href='&quot;https://twitter.com/intent/tweet?text=&quot; + data:post.url' rel='nofollow' target='_blank' title='Опубликовать в Twitter'><span> <i aria-hidden='true' class='fa fa-twitter'/></span>Твитнуть</a>

<a class='google' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onclick='javascript:window.openundefinedthis.href,   &quot;&quot;, &quot;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600&quot;);return false;' rel='nofollow' title='Опубликовать в Google+'><span> <i aria-hidden='true' class='fa fa-google-plus'/></span>Плюсануть</a>

<a class="odnoklassniki" expr:href='https://connect.ok.ru/dk?cmd=WidgetSharePreview&amp;st.cmd=WidgetSharePreview&amp;st._aid=ExternalShareWidget_SharePreview&amp;st.shareUrl=&quot; + data:post.url' title='Сохранить в Одноклассниках' rel="nofollow" target="_blank"><span><i aria-hidden="true" class="fa fa-odnoklassniki"></i></span>Класс &nbsp;</a>

<a class='pocket' expr:href='&quot;https://getpocket.com/edit?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Сохранить в Pocket'><span> <i aria-hidden='true' class='fa fa-get-pocket'/></span>Сохранить</a>

</div>
</div>

Этот код нужно вставить в нужное вам место на странице редактирование шаблона. Чаще всего кнопки размещают в конце поста, поэтому ищите что-то похожее на тег <data:post.body/>. Вдруг возникнут проблемы с этим - пишите в комменты, поможем ;)

После вставки этих строк, нужно заняться дизайном наших будущих кнопок для шаринга в социальных сетях. И теперь самое интересное - я вам на выбор предлагаю целых шесть разных стиля для ваших кнопок.

Дизайн, то есть строки CSS-кода, которые вы скопируете ниже - нужно также поместить в разделе <head>, примерно в том месте где идут такие строки:

<b:skin><![CDATA[