Модернизация стандартных share-кнопок в Blogger(Blogspot)

Используя CSS, можно изменить дизайн практически любого элемента блога, а при помощи JavaScript еще и его функциональность.
  Чтобы изменить вид стандартных кнопок "поделится" в блоге на платформе Blogger, достаточно лишь добавить желаемые CSS-свойства к правильно указанным идентификаторам. По желанию, можно самостоятельно дополнить набор кнопок установленных по умолчанию, HTML-кодом своих кнопок с ссылками нужных социальных сетей, например ВКонтакте или Одноклассники. Если имеющийся вариант не устраивает совсем, по ряду объективных причин, то можно заменить весь блок используя JS-плагин от стороннего разработчика или свой собственный.

Как изменить оформление стандартных кнопок для публикации Blogger

  Многие, предпочитают вовсе заменить в своем блоге стандартный виджет кнопок поделиться, одной из причин такого желания, по крайней мере у меня, был не совсем современный дизайн самих кнопок. Решить проблему с оформлением блока поможет CSS-код представленный ниже:

.post-share-buttons.goog-inline-block {
 display: block;
}
.goog-inline-block {
 margin: 3px 3px 3px 0;
}
.share-button {
 width: 40px;
 height: 20px;
 background-image: none !important; /*для некоторых свойств значение !important обязательно*/
 background-color: #000 !important;
 border-radius: 3px;
 overflow: hidden;
 color: #FFF !important;
 position: relative;
 text-align: center;
}
.share-button:hover {
 opacity: .7;
}
.share-button:before {
 display: inline-block;
 font-family: FontAwesome; /*для иконок подключаем иконочный шрифт*/
 margin-top: 2px;
}
.sb-email {
 background-color: #989898 !important;
}
.sb-blog {
 background-color: #FD9020 !important;
}
.sb-facebook {
 background-color: #3859B7 !important;
}
.sb-pinterest {
 background-color: #EC1717 !important;
}
.sb-twitter {
 background-color: #5DC5EC !important;
}
a.share-button[href*="blog"]:before {content:"\f040"}
a.share-button[href*="facebook"]:before {content:"\f09a"}
a.share-button[href*="twitter"]:before {content:"\f099"}
a.share-button[href*="pinterest"]:before {content:"\f231"}
a.share-button[href*="email"]:before {content:"\f0e0"}

  Результат будет примерно таким:

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

  Чтобы получить возможность делиться своим контентом в отечественных социальных сетях достаточно добавить в код стандартного блока share-кнопок от Blogger HTML-код нужной кнопки. После строки:

  <b:includable id='shareButtons' var='post'>

  - и желательно до начала кода кнопки G+:

  <b:if cond='data:top.showPlusOne'><...

  Например для кнопки ВКонтакте код будет таким:

 <a class='goog-inline-block share-button sb-vk' expr:href='&quot;http://vk.com/share.php?url=&quot; +data:blog.canonicalUrl+ &quot;&amp;title=&quot; +data:blog.pageName+ &quot;&amp;description=&quot; +data:blog.metaDescription+ &quot;&amp;image=" +data:blog.postImageUrl+ &quot;&amp;noparse=&quot;+true' target='_blank' rel='nofollow'/>

  Параметры заполнения:

- ссылка на целевую страницу: data:blog.canonicalUrl
- имя страницы: data:blog.pageName
- краткое описание страницы: data:blog.metaDescription
- изображение на странице: data:blog.postImageUrl

Ссылки для кнопок "Поделиться" в сети Одноклассники и Mail.Ru выглядят так:

http://connect.mail.ru/share?url=[data:blog.canonicalUrl]&title=[data:blog.pageName]&description=[data:blog.metaDescription]&imageurl=[data:blog.postImageUrl]
http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=[data:blog.canonicalUrl]&st.comments=[data:blog.pageName]

Оформляются по аналогии с примером выше.




©http://magentawave.com