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

Кнопки для шаринга в соц сетях

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

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

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

Сегодняшняя статья это логичное продолжение моего поста «Как я решил сделать свои кнопки для шаринга». В том материале, я рассказывал почему я отказался от сторонних кнопок и почему выбрал решение с 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[

Стили для кнопок социальных сетей - содержание

Чтобы перейти к нужном дизайну - нажмите на нужную ссылку из списка выше.

Обычные прямоугольные кнопки (без эффекта)

/* Обычные прямоугольные кнопки (без эффекта) */
#ipshare {
width: 100%;
overflow: hidden;
margin-top: 15px;
margin-left: 30px;
}
#ipshare a {
display: block;
height: 32px;
line-height: 32px;
text-decoration: none;
color: #fff;
float: left;
padding-right: 10px;
margin-right: 10px;
margin-bottom: 25px;
}
#ipshare
span {
display: block;
width: 32px;
height: 32px;
float: left;
margin-right: 10px;
}
#ipshare
.vkontakte {
background-color: #3F84B1;
}
#ipshare
.vkontakte span {
background-color: #597DA3;
}
#ipshare
.facebook {
background-color: #436FC9;
}
#ipshare
.facebook span {
background-color: #3967C6;
}
#ipshare
.twitter {
background-color: #40BEF4;
}
#ipshare
.twitter span {
background-color: #26B5F2;
}
#ipshare
.google {
background-color: #EC5F4A;
}
#ipshare
.google span {
background-color: #E94D36;
}
#ipshare
.pocket {
background-color: #FF6666;
}
#ipshare
.pocket span {
background-color: #EE4056;
}
#ipshare
.odnoklassniki  {
background-color: #F89238;
}
#ipshare
.odnoklassniki span {
background-color: #F58220;
}

Получим вот такой результат:
Кнопки социальных сетей (прямоугольные, цветные, без эффектов)

Закругленные кнопки (без эффекта)

Сделать кнопки закругленными пришла от одного из читателей IP, за что я ему очень благодарен.
/* Закругленные кнопки (без эффекта) */
#ipshare {
width: 100%;
overflow: hidden;
margin-top: 15px;
margin-left: 30px;
}
#ipshare a {
display: block;
height: 32px;
line-height: 32px;
color: #fff;
float: left;
padding-right: 10px;
margin-right: 10px;
margin-bottom: 25px;
border-radius: 50px 50px 50px 50px;
}
#ipshare
span {
display: block;
width: 32px;
height: 32px;
float: left;
margin-right: 10px;
border-radius: 50px 50px 50px 50px;
}
#ipshare
.vkontakte {
background-color: #3F84B1;
}
#ipshare
.vkontakte span {
background-color: #597DA3;
}
#ipshare
.facebook {
background-color: #436FC9;
}
#ipshare
.facebook span {
background-color: #3967C6;
}
#ipshare
.twitter {
background-color: #40BEF4;
}
#ipshare
.twitter span {
background-color: #26B5F2;
}
#ipshare
.google {
background-color: #EC5F4A;
}
#ipshare
.google span {
background-color: #E94D36;
}
#ipshare
.pocket {
background-color: #FF6666;
}
#ipshare
.pocket span {
background-color: #EE4056;
}

Получим вот такой результат:
Кнопки социальных сетей (закругленные, цветные, без эффектов)

Прямоугольные кнопки с эффектом закругления

/* Прямоугольные кнопки с эффектом закругления */
#ipshare {
width: 100%;
overflow: hidden;
margin-top: 15px;
margin-left: 30px;
}
#ipshare a {
display: block;
height: 32px;
line-height: 32px;
text-decoration: none;
color: #fff;
float: left;
padding-right: 10px;
margin-right: 10px;
margin-bottom: 25px;
}
#ipshare 
.vkontakte, .facebook, .twitter, .google, .pocket, .odnoklassniki {
border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
-moz-border-radius: 0px 0px 0px 0px;
}
#ipshare 
.vkontakte:hover, .facebook:hover, .twitter:hover, .google:hover, .pocket:hover, .odnoklassniki:hover {
border-radius: 50px 50px 50px 50px;
-webkit-border-radius: 50px 50px 50px 50px;
-moz-border-radius: 50px 50px 50px 50px;
}
#ipshare
span {
display: block;
width: 32px;
height: 32px;
float: left;
margin-right: 10px;
}
#ipshare
.vkontakte span, .facebook span, .twitter span, .google span, .pocket span, .odnoklassniki span {
border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
-moz-border-radius: 0px 0px 0px 0px;
}
#ipshare
.vkontakte:hover span, .facebook:hover span, .twitter:hover span, .google:hover span, .pocket:hover span, .odnoklassniki:hover span {
border-radius: 50px 50px 50px 50px;
-webkit-border-radius: 50px 50px 50px 50px;
-moz-border-radius: 50px 50px 50px 50px;
}
#ipshare
.vkontakte {
background-color: #3F84B1;
}
#ipshare
.vkontakte span {
background-color: #597DA3;
}
#ipshare
.facebook {
background-color: #436FC9;
}
#ipshare
.facebook span {
background-color: #3967C6;
}
#ipshare
.twitter {
background-color: #40BEF4;
}
#ipshare
.twitter span {
background-color: #26B5F2;
}
#ipshare
.google {
background-color: #EC5F4A;
}
#ipshare
.google span {
background-color: #E94D36;
}
#ipshare
.pocket {
background-color: #FF6666;
}
#ipshare
.pocket span {
background-color: #EE4056;
}
#ipshare
.odnoklassniki  {
background-color: #F89238;
}
#ipshare
.odnoklassniki span {
background-color: #F58220;
}

Получим вот такой результат:
Кнопки социальных сетей (прямоугольные, с эффектом закругления краев)
Это делается благодаря свойству border-radius, которое призвано округлять края прямоугольных элементов.

Округленные кнопки с эффектом восстановления прямых углов

/* Округленные кнопки с эффектом восстановления прямых углов */
#ipshare {
width: 100%;
overflow: hidden;
margin-top: 15px;
margin-left: 30px;
}
#ipshare a {
display: block;
height: 32px;
line-height: 32px;
text-decoration: none;
color: #fff;
float: left;
padding-right: 10px;
margin-right: 10px;
margin-bottom: 25px;
}
#ipshare 
.vkontakte, .facebook, .twitter, .google, .pocket, .odnoklassniki {
border-radius: 50px 50px 50px 50px;
-webkit-border-radius: 50px 50px 50px 50px;
-moz-border-radius: 50px 50px 50px 50px;
}
#ipshare 
.vkontakte:hover, .facebook:hover, .twitter:hover, .google:hover, .pocket:hover, .odnoklassniki:hover {
border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
-moz-border-radius: 0px 0px 0px 0px;
}
#ipshare
span {
display: block;
width: 32px;
height: 32px;
float: left;
margin-right: 10px;
}
#ipshare
.vkontakte span, .facebook span, .twitter span, .google span, .pocket span, .odnoklassniki span {
border-radius: 50px 50px 50px 50px;
-webkit-border-radius: 50px 50px 50px 50px;
-moz-border-radius: 50px 50px 50px 50px;
}
#ipshare
.vkontakte:hover span, .facebook:hover span, .twitter:hover span, .google:hover span, .pocket:hover span, .odnoklassniki:hover span {
border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
-moz-border-radius: 0px 0px 0px 0px;
}
#ipshare
.vkontakte {
background-color: #3F84B1;
}
#ipshare
.vkontakte span {
background-color: #597DA3;
}
#ipshare
.facebook {
background-color: #436FC9;
}
#ipshare
.facebook span {
background-color: #3967C6;
}
#ipshare
.twitter {
background-color: #40BEF4;
}
#ipshare
.twitter span {
background-color: #26B5F2;
}
#ipshare
.google {
background-color: #EC5F4A;
}
#ipshare
.google span {
background-color: #E94D36;
}
#ipshare
.pocket {
background-color: #FF6666;
}
#ipshare
.pocket span {
background-color: #EE4056;
}
#ipshare
.odnoklassniki  {
background-color: #F89238;
}
#ipshare
.odnoklassniki span {
background-color: #F58220;
}

Получим вот такой результат:
Кнопки социальных сетей (округленные, с эффектом восстановления прямых углов)

Нецветное в цветное

/* Нецветное в цветное */
#ipshare {
width: 100%;
overflow: hidden;
margin-top: 15px;
margin-left: 30px;
}
#ipshare a {
display: block;
height: 32px;
line-height: 32px;
text-decoration: none;
color: #fff;
float: left;
padding-right: 10px;
margin-right: 10px;
margin-bottom: 25px;
}
#ipshare 
.vkontakte, .facebook, .twitter, .google, .pocket, .odnoklassniki {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray; /* IE 6-9 */
}
#ipshare 
.vkontakte:hover, .facebook:hover, .twitter:hover, .google:hover, .pocket:hover, .odnoklassniki:hover {
-webkit-filter: none;
-moz-filter: none;
-ms-filter: none;
-o-filter: none;
filter: none;
filter: none; /* IE 6-9 */
}
#ipshare
span {
display: block;
width: 32px;
height: 32px;
float: left;
margin-right: 10px;
}
#ipshare
.vkontakte span, .facebook span, .twitter span, .google span, .pocket span, .odnoklassniki span {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray; /* IE 6-9 */
}
#ipshare
.vkontakte:hover span, .facebook:hover span, .twitter:hover span, .google:hover span, .pocket:hover span, .odnoklassniki:hover span {
-webkit-filter: none;
-moz-filter: none;
-ms-filter: none;
-o-filter: none;
filter: none;
filter: none; /* IE 6-9 */
}
#ipshare
.vkontakte {
background-color: #3F84B1;
}
#ipshare
.vkontakte span {
background-color: #597DA3;
}
#ipshare
.facebook {
background-color: #436FC9;
}
#ipshare
.facebook span {
background-color: #3967C6;
}
#ipshare
.twitter {
background-color: #40BEF4;
}
#ipshare
.twitter span {
background-color: #26B5F2;
}
#ipshare
.google {
background-color: #EC5F4A;
}
#ipshare
.google span {
background-color: #E94D36;
}
#ipshare
.pocket {
background-color: #FF6666;
}
#ipshare
.pocket span {
background-color: #EE4056;
}
#ipshare
.odnoklassniki  {
background-color: #F89238;
}
#ipshare
.odnoklassniki span {
background-color: #F58220;
}

Получим вот такой результат:
Кнопки социальных сетей (прямоугольные, с эффектом восстановления цвета)

Цветные в нецветные

/* Цветное в нецветное */
#ipshare {
width: 100%;
overflow: hidden;
margin-top: 15px;
margin-left: 30px;
}
#ipshare a {
display: block;
height: 32px;
line-height: 32px;
text-decoration: none;
color: #fff;
float: left;
padding-right: 10px;
margin-right: 10px;
margin-bottom: 25px;
}
#ipshare 
.vkontakte, .facebook, .twitter, .google, .pocket, .odnoklassniki {
-webkit-filter: none;
-moz-filter: none;
-ms-filter: none;
-o-filter: none;
filter: none;
filter: none; /* IE 6-9 */
}
#ipshare 
.vkontakte:hover, .facebook:hover, .twitter:hover, .google:hover, .pocket:hover, .odnoklassniki:hover {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray; /* IE 6-9 */
}
#ipshare
span {
display: block;
width: 32px;
height: 32px;
float: left;
margin-right: 10px;
}
#ipshare
.vkontakte span, .facebook span, .twitter span, .google span, .pocket span, .odnoklassniki span {
-webkit-filter: none;
-moz-filter: none;
-ms-filter: none;
-o-filter: none;
filter: none;
filter: none; /* IE 6-9 */
}
#ipshare
.vkontakte:hover span, .facebook:hover span, .twitter:hover span, .google:hover span, .pocket:hover span, .odnoklassniki:hover span {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray; /* IE 6-9 */
}
#ipshare
.vkontakte {
background-color: #3F84B1;
}
#ipshare
.vkontakte span {
background-color: #597DA3;
}
#ipshare
.facebook {
background-color: #436FC9;
}
#ipshare
.facebook span {
background-color: #3967C6;
}
#ipshare
.twitter {
background-color: #40BEF4;
}
#ipshare
.twitter span {
background-color: #26B5F2;
}
#ipshare
.google {
background-color: #EC5F4A;
}
#ipshare
.google span {
background-color: #E94D36;
}
#ipshare
.pocket {
background-color: #FF6666;
}
#ipshare
.pocket span {
background-color: #EE4056;
}
#ipshare
.odnoklassniki  {
background-color: #F89238;
}
#ipshare
.odnoklassniki span {
background-color: #F58220;
}

Получим вот такой результат:
Кнопки социальных сетей (прямоугольные, с эффектом обесцвечивания)

На этом сегодня всё. Напоминаю, что если у Вас возникли вопросы, то пишите об этом в комментах. А самая яркая демонстрация работы этих кнопок будет показана, если Вы нажмете на одную из них (вот немножко ниже там).

Кстати, кто заметил "неточность" в заглавном изображении? Что там не так?


Если вам понравиласть эта статья, то поделитесь ей с друзьями. Вам не сложно, а мне приятно ;)
Присоединяйтесь к 200+ блоггерам и получите полезный в подарок
    Blogger Comment
    Facebook Comment

11 коммент. :

  1. Хорошие кнопочки) Надо попробовать :)

    ОтветитьУдалить
  2. , только в исходном коде """ на кавычки замените - это лишние байты.

    ОтветитьУдалить
    Ответы
    1. Не совсем понял "где" и "что" заменить.

      Удалить
  3. Игорь, а что думаете вот про такие кнопки, кстати - http://www.aboutblogger.ru/2011/09/svoy-nabor-knopok-sotcialnykh-setey.html ? Я себе в блог такие ставил, вроде тоже ничего так... Они самодельные тоже, похожи на Ваши :) Хотелось бы узнать ваше мнение о том наборе... Чем хороши они, или что в них не очень правильно.

    ОтветитьУдалить
    Ответы
    1. Ламповые кнопки)

      Плюсы. Как и в моих кнопках - легкость в загрузке и редактировании.
      Минусы. Кнопка Addthis (которая и зачеркивает плюсы выше), а также старый дизайн кнопок.

      Удалить
    2. Игорь, ну да - они старенькие уже) им лет 5 или более :) По поводу кнопки Addthis - Вы совершенно правы! Я замечал, что она довольно косячная и из-за неё иногда страница грузится либо плохо либо очень долго идёт соединение с сервером AddThis. Короче, она как бы тормозит всё. Но Addthis можно убрать из кода и останутся обычные "ламповые кнопки"))

      Удалить
  4. Спасибо, попробую сделать.
    Заинтриговали вы с ошибкой. Ничего не заметила. Интересно даже))

    ОтветитьУдалить
  5. Да, и кстати хотел ещё добавить вот что: внимание всем блоггерам! В мобильной версии блога (когда посетитель смотрит мобильную версию на смартфоне/планшете) - эти кнопки не работают. Их даже не видно.

    ОтветитьУдалить
  6. Хорошее замечание, однако я и не планировал делать кнопки в том числе и для мобильной версии.

    То что предоставляет сервис в мобильной версии моего сайта - меня полностью устраивает, так как адаптивный дизайн намного "тяжелее" в плане загрузки чем мобильная версия.

    ОтветитьУдалить
    Ответы
    1. Игорь, адаптивный мобильный дизайн может и тяжелее (не спорю), но зато он и более полный - более богатый)) Там и менюшки все есть, и кнопки вот эти видны.
      Да и кстати ещё, хотел поправить Вас: в кнопке "нравиться" по-моему ошибка закралась. Там не должно быть мягкого знака. Должно быть "нравится".

      Удалить