Blogger: Набор кнопок социальных сетей

Набор кнопок социальных сетей

Разработчики платформы Blogger (Blogspot) не обошли вниманием этот вопрос, предоставив нам панель с наиболее популярными, по их мнению, кнопками. Но что делать, если стандартного набора нам недостаточно, хотя бы потому, что в нем нет кнопок популярных в России социальных сетей?

Сначало отключаем стандартный набор кнопок, если он у вас задействован. Для этого идем в настройки внешнего вида блога (Дизайн->Элементы страницы) и нажимаем в модуле "Сообщения блога" ссылку "Изменить". В открывшемся окне снимаем галочку с пункта "Показывать кнопки для публикации"

Теперь открываем редактор шаблона (Дизайн->Изменить HTML), ставим галочку напротив "Расширить шаблоны виджета", после чего находим этот код:

<div class='post-share-buttons goog-inline-block'>
<b:if cond='data:post.sharePostUrl'>
<b:include data='post' name='shareButtons'/>
</b:if>
</div>

...и сразу под этим кодом добавляем следующее:

<div>

<a class='shareme' expr:href='"http://blogger.com/blog-this.g?u=" + data:post.url + "&n="' expr:name='data:post.snippet' expr:onclick='"window.open(this.href + encodeURIComponent(this.title) + \"&t=\" + encodeURIComponent(this.name), \"_blank\"); return false;"' expr:title='data:blog.title + ": " + data:post.title' rel='nofollow' style='background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBG09itSYZzmqhw4GDOPc9hq9x1Z2UvRHYIuM0Y96yQxSs93nsZZMXUB8caOlay79XTHSCn5yxMGfVqOLRMczoUKQGRUc3FUSUQM7UXIjkbs2hwjxyf2GrBJB_RwLt_A9hDEHA0wn7Lpc/s25/but1bw.png") no-repeat; font-size:25px;'><img alt='В Blogger' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv-w-Za5Er8KLH0ZmJzwLy_sumXRej03AS9mMhsTsPotgEN5ddH1eT0AItVxQ5AVsku0i6MTzRntPEpPnLC_zzBru5u8j05nnJ4Gaws91ZzBi-u9n2leLGqGw_qXOCWTOFNZzTVnppfkI/s25/but1color.png' title='Опубликовать в Blogger'/></a>


<a class='shareme' expr:href='"http://twitter.com/intent/tweet?original_referer=" + data:post.url + "&url=" + data:post.url + "&text="' expr:onclick='"window.open(this.href + encodeURIComponent(this.title), \"_blank\", \"height=240,width=510\"); return false;"' expr:title='data:blog.title + ": " + data:post.title' rel='nofollow' style='background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP9TC5T_OFgFM6JEk2BuRBFo5I31DeR9YxdYXJ-5pDtqGEiOApwSwSXavOo7jQSl6IIciKfPJdz0Dl12G7ND4WpKe-S7B8YlgXMwbhTSGfvegP-Yd7G-5HEup02zUKKS5wPFKCk7a60PU/s25/but2bw.png") no-repeat; font-size:25px;'><img alt='В Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMXZd_9MExkYnu_c3RXtQIB10wFE_sTk-ese0WoJ2jckeAyOrePMnx2B9AU4t4hOm5syVzhrxhnUubY5vcMJ6Sflv41IoDCZVjvg5vpfvhdKz2ToZ8rTQPkOTizaGJm69-pK3QqaO2Ovg/s25/but2color.png' title='Опубликовать в Twitter'/></a>


<a class='shareme' expr:href='"http://livejournal.com/update.bml?subject="' expr:name='data:post.url + "><b>" + data:post.title + "</b></a> от <b>" + data:post.author + "</b> (" + data:blog.title + ") : <i>" + data:post.snippet + "</i>"' expr:onclick='"window.open(this.href + encodeURIComponent(this.title) + \"&event=<a href=\" + encodeURIComponent(this.name), \"_blank\"); return false;"' expr:title='data:post.title' rel='nofollow' style='background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj32wfGvIjuZUcA67driE_E0HmGR8VTOpR8RVG7PfE1COjoo9LUN4RHEE3ETR_IliUN-OIoHFLA10GaOo4d_C-L7tSsjaFHNHvXg-qGchie_4yYGv25LcOoGB13axEKoXe5_G1Cf1j42mQ/s25/but5bw.png") no-repeat; font-size:25px;'><img alt='В Живой Журнал' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYy8chYYTSEac23uFSg_isAF68XLXUXMruMUapTtf3w3tkDXUxGLrbjF5MvpxJ6xhhpsL3XSVr9g4WB-3KreAkikZQU6vFjesD7C6rmUECOFJMTOBB7hQtKi8RjUILzhv9P4xdMbsu-XE/s25/but5color.png' title='Опубликовать в ЖЖ'/></a>


<a class='shareme' expr:href='"http://vk.com/share.php?url=" + data:post.url + "&image=" + data:post.thumbnailUrl + "&title="' expr:name='data:post.snippet' expr:onclick='"window.open(this.href + encodeURIComponent(this.title) + \"&description=\" + encodeURIComponent(this.name), \"_blank\", \"height=280,width=480\"); return false;"' expr:title='data:post.title' rel='nofollow' style='background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWr_0mkKW5689YRSSlW-xEoMAM_seFhOLptNSXdRt03xsEERNB_Yy04MgnbK4dFB6AU_qFtFP_5dEPIhAhwn08regep9rmpYCJ28e4hzIjmE0HaqISKYDFYhuhJL8qZJwzmgE7l9zpbH0/s25/but4bw.png") no-repeat; font-size:25px;'><img alt='во ВКонтакте' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQtPIeJec5fQOAd34J_mSW2oni9sLxFNqg5s5_-hAoi7wAlGPboM9XklmGA6RdHITPqHLbhwpcUATAg0PbXdjR8ohCWSFhyQNqXIyWaAR8upi1A4_1m6alXJ5fLvsyu4_ZtN-2DZ7bBnQ/s25/but4color.png' title='Опубликовать во ВКонтакте'/></a>


<a class='shareme' expr:href='"http://odnoklassniki.ru/dk?st.cmd=addShare&st.s=0&st._surl=" + data:post.url' expr:onclick='"window.open(this.href, \"_blank\", \"height=385,width=600\"); return false;"' rel='nofollow' style='background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgJKp9tu1sjkBm80wWHKxxwFbcjpFnckoM7MV2KKlfBuKIr4YBaGQHAvMZ5LePB_7gEuwqLFCmwagQUBhHeGY3n_MMfvHTk8vojF6B2W6LOKyhWeHv2YVcOqzp3ZpkKiNmaSmVKqDd5DQ/s25/but9bw.png") no-repeat; font-size:25px;'><img alt='В Одноклассники' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikmM3ozTrTCfeuMaEDG53pXEkKAVP9XoIzPK5NCPQxheAKIo30vExzb2ISe3Cy1VfOoOwqdFoSTn-jmzPqgSd9qSEwP2CJlF4R_XsQLK0ujE9jiW86LI_yTNqiY8LIVPBcZ6enEQTFWvo/s25/but9color.png' title='Опубликовать в Одноклассниках'/></a>


<a class='shareme' expr:href='"http://my.ya.ru/posts_add_link.xml?URL=" + data:post.url + "&title="' expr:name='data:post.author + " (" + data:blog.title + ") :</b> <i>" + data:post.snippet + "</i>"' expr:onclick='"window.open(this.href + encodeURIComponent(this.title) + \"&body=<b>\" + encodeURIComponent(this.name), \"_blank\", \"height=560,width=1005\"); return false;"' expr:title='data:post.title' rel='nofollow' style='background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju6gEuvyRyxUTs5ORomw6vjqFoHJuH02gvDu0Tg8Tm8FTjhhUzS0tWtuqSWgzq-huiYkxyBqKQx931UFsOTGb-fWpTPIjqRGjIjCtj87iozvYNG6aLsjO0AGpipTkl8wrUfiWw5IpRlR0/s25/but7bw.png") no-repeat; font-size:25px;'><img alt='В Я.ру' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9iEFMOauYsDNJ6TGr6S5DMNVTXuy8aYmYsWV-KGhj8kVoiy-7l_zmPC0_DJDaB_8H_vQug9lb46W-3sUFUMPbfduBiIPU4mXmBXg5CkC2Sz4eRv49jzisb4T8ZS5OhgBRh3nekoR8NsU/s25/but7color.png' title='Опубликовать в Я.ру'/></a>


<a class='shareme' expr:href='"http://connect.mail.ru/share?url=" + data:post.url + "&imageurl=" + data:post.thumbnailUrl + "&title="' expr:name='data:post.snippet' expr:onclick='"window.open(this.href + encodeURIComponent(this.title) + \"&description=\" + encodeURIComponent(this.name), \"_blank\", \"height=360,width=537\"); return false;"' expr:title='data:post.title' rel='nofollow' style='background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCk7pwXD3EGfOTrWELvXbYvkrgMds5bEXng1y4McWAXUkfCXs08fnuotIr0Ipf2eORzPi_GdyHI9IhqnmMDlu5CgRZLXe-pLkGj3seHLW9jMbTqqLazLdzfoOmS1jRiA9IwUYA9DkFTRw/s25/but6bw.png") no-repeat; font-size:25px;'><img alt='В Мой Мир' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsJR5ulB2DnrP0u8MxCS4yPiFYxQ8fr-hr8TnsaKOb5-eo6yzBf22rO4WThN3tUYFsMDJvx7gFAOY1jUGYKPCx1VHCNTgcEqd-iNX3tj2Gu73LJwAi8o7YlW6XcIFsUSVztzf3KrEkKow/s25/but6color.png' title='Опубликовать в Моем Мире'/></a>


<a class='shareme' expr:href='"http://liveinternet.ru/journal_post.php?action=n_add&cnurl=" + data:post.url + "&cntitle="' expr:name='data:post.url + "]" + data:post.title + "[/URL][/B] от [B]" + data:post.author + "[/B] (" + data:blog.title + ") : [I]" + data:post.snippet + "[/I][/QUOTE]"' expr:onclick='"window.open(this.href + encodeURIComponent(this.title) + \"&cntext=[QUOTE][B][URL=\" + encodeURIComponent(this.name), \"_blank\"); return false;"' expr:title='data:post.title' rel='nofollow' style='background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYONNFGLbIT7VXYqgW08dzkmUBjWwcTp9ymNpAKGT-cG0-pvt4ld-eFINT5Byi9gW4qQcUVEUG0w8I-NuGvHFMNrOfSbcdY_g-t-qFOit-qduulBZgYcIRgahJNZcIiuFxmisZ5O2j6oQ/s25/but3bw.png") no-repeat; font-size:25px;'><img alt='В LiveInternet' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKLaR2OYH2TWLBcSqufmHDNbhNitmDtu_CHn7soLTVC19ghxyS4Lu2KOl40QgnZz-QkUjEHET5dKmNOlxduVzzx7qUVF1_yfpsKEI-ILukGHUYwvkkTfBTvWDm4qBlJMSjLEr53LBFewc/s25/but3color.png' title='Опубликовать в LiveInternet'/></a>


<a class='shareme' expr:href='"http://facebook.com/sharer.php?s=100&p[url]=" + data:post.url + "&p[images][0]=" + data:post.thumbnailUrl + "&p[title]="' expr:name='data:post.snippet' expr:onclick='"window.open(this.href.replace(/\/s72-c\//,/s125-c/) + encodeURIComponent(this.title) + \"&p[summary]=\" + encodeURIComponent(this.name), \"_blank\", \"height=352,width=640\"); return false;"' expr:title='data:post.title' rel='nofollow' style='background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd7G9_flk41FmswTTtAIwyF2usVPW60W1EVQNzJ_KzUSX3hBDmwFPiojSAgYj8_2StPkQhbWxDkSFVxLGWotxv88WTW40xTqQPAoGW8_BDjDKvDlZHaY9bCdrNhypT5j1QCVM6kO1cpYI/s25/but8bw.png") no-repeat; font-size:25px;'><img alt='В Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4zW40EvSjXX8YiwU_WuysSvhstlWC-_CvjJp05YjsnPKvSOuU4uh8AAGtjjuljPkirKY-ihwPw2m71fJ9gKnGbJmll4rhm8bETyCP4l1k0q7w0g5JsSdR5DeuqDVpL7iwKskbAfSKjXs/s25/but8color.png' title='Опубликовать в Facebook'/></a>


<a class='addthis_button shareme' expr:addthis:title='data:post.title' expr:addthis:url='data:post.url' style='background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicTyfHKrUUzYmoShu22SJ2ByhnH4sHvA7fl7ydLh_5xqVxbn1QqbUGnK0dkeJbcZqMC_5lyStBqTRA-VNKMkHdwOojva3EnMCTOC0WeXPR5qgIQb6ABFAuz66VkKm7DpSVw3QUKkRj8dM/s25/but0bw.png") no-repeat; font-size:25px;'><img alt='В закладки' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS0nEWyEbr2E9b98qlo_aW7S9aXoOunokmv0iAYvvEWVdNhCnbQEYlc_APdkpXTA43RJ73j-rEK2HLSDdXQdagbCcrbZVffHlWMv0pde5ZB_wfKIOt0bcSrGvwdroKycOFa8VHCz4m_5g/s25/but0color.png'/></a><script type='text/javascript'>var addthis_config = {"data_track_clickback":true};</script><script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=XX-XXXXXXXXXXXXXXXX' type='text/javascript'/>
</div>

Добавляем стили для отображения кнопок, чтобы они меняли свой цвет и размер при наведении. Для этого находим в шаблоне строку "/* Posts" и вставляем под ней следующий код:

/* Posts
----------------------------------------------- */
.shareme img {
opacity: 0;
filter: alpha (opacity = 0);
vertical-align: text-top;
}

.shareme img:hover {
opacity: 1;
filter: alpha (opacity = 100);
vertical-align: text-top;
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
}

Вот и все.

Внимание! Кнопка AddThis персонифицирована.

Прежде, чем вы получите окончательный код кнопки, необходимо будет внести кое-какие данные и подтвердить регистрацию через электронную почту. Для этого идем на сайт сервиса AddThis, выбираем кнопку для Website и первый стиль в списке стилей, соглашаемся зарегистрироваться, чтобы получать статистику и жмем на большую оранжевую кнопку. В полученном коде ищем "#pubid=". Идентификационный код, что идет после знака равенства и до закрывающей кавычки, копируем в аналогичное место в нашем коде для кнопки AddThis, заменив им иксы.

Blogger

Страницы

Набор кнопок социальных сетей

Набор кнопок социальных сетей

Комментариев нет:

Страницы

Набор кнопок социальных сетей

Набор кнопок социальных сетей

Комментариев нет:

Подпишитесь на