По поводу социальных кнопок:
Компания Blogger не так давно сама запустила свои соц. кнопки. Как они выглядят можно посмотреть прямо под этим моим постом.
Там, однако, нет русских сервисов. Но может кто-то хочет всё равно поставить себе родную "гугловскую" кнопку.
Функция на данный момент доступна только в Blogger Draft.
Для этого необходимо зайти в панель инструментов / дизайн / элементы страницы. Там выбрать сообщения блога - изменить.
И там поставить галочку на "Показывать кнопки для публикации".
Всё просто. Но, к сожалению, в некоторых шаблонах эти кнопочки отчего-то не включаются.
Чтобы это исправить - необходимо вначале проделать вышеописанную операцию.
А затем зайти в редактирование HTML, найти строки:
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span>
И после них вставить эту:
<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>
После этого всё должно отображаться правильно.
среда, 7 июля 2010 г.
четверг, 1 июля 2010 г.
Социальные кнопки для Blogger.
Меня некоторое время назад заинтересовала тема - а как поставить на Blogspot кнопки внизу постов типа "сохранить вконтакте", добавить в Facebook и т.п.
То есть кнопки, нажав на которые ваш читатель может легко опубликовать ссылку на ваш материал в своём аккаунте какой-нибудь популярной социальной сети.
Но в Blogger как обычно возникли сложности: например родной java-скрипт предложеный на сайте вконтакте - на Blogger отчего-то не действует.
Пришлось искать другие пути. И они были найдены.
Дело в том, что на иностранных кнопках вроде "AddThis" или "ShareThis" предложено много сервисов, популярных в Европе и Америке. Но у нас-то в России своя специфика.
У нас популярны "вконтакте", "Я.ру", "мой мир и т.п. Вот для этого-то и надо поставить кнопки, которые актуальны для русскоязычного читателя.
Я нашёл способ сделать кнопки для Livejournal, вконтакте, Blogger, Facebook, Мой Мир, Я.ру, GoogleBuzz и Twitter.
Возможно позже список расширится.
К Liveinternet пока способа не нашёл.
Как это выглядит можно посмотреть у меня в блоге внизу сообщений. Значки кнопок можно ставить разные, смотря какие подходят к вашему дизайну.
Способы были найдены с помощью постов двух людей: sovety и artinblog. Спасибо этим людям!
Долго расписываться не хочу, публикую код сразу ко всем кнопкам. Кто хочет может взять только то, что нравится.
Надо нажать "расширить шаблоны виджета" в разделе "изменить html".
не забудьте на всякий сделать резервную копию своего шаблона.
Код следует вставлять после строки <data:post.body/> (Хотя если хотите можете вставить куда-нибудь ещё).
Код:
Где написано PICTURE - впишите адрес картинки для своей кнопки.
Где TEXT - впишите пояснительную фразу, которая будет появляться при наведении мышки на кнопку.
UPD! О том, как добавить к этим кнопкам кнопку "Google +1" написано в моём посте "Кнопка Google +1 для Blogger".
Чтобы кнопки немного "ожили" и меняли цвет при наведении на них - вставьте в свой CSS следующий код, придуманный artinblog:
Пояснения в коде имеются, можно менять цвета, степень прозрачности и т.п.
Надеюсь, что это будет вам полезно.
Да, и ещё: чтобы незалогиненый в Я.ру пользователь при нажати на вашу кнопку вначале попадал на страницу с предложением залогиниться - вставьте себе в код перед тегом </head> следующий java-скрипт, который придумал sovety:
То есть кнопки, нажав на которые ваш читатель может легко опубликовать ссылку на ваш материал в своём аккаунте какой-нибудь популярной социальной сети.
Но в Blogger как обычно возникли сложности: например родной java-скрипт предложеный на сайте вконтакте - на Blogger отчего-то не действует.
Пришлось искать другие пути. И они были найдены.
Дело в том, что на иностранных кнопках вроде "AddThis" или "ShareThis" предложено много сервисов, популярных в Европе и Америке. Но у нас-то в России своя специфика.
У нас популярны "вконтакте", "Я.ру", "мой мир и т.п. Вот для этого-то и надо поставить кнопки, которые актуальны для русскоязычного читателя.
Я нашёл способ сделать кнопки для Livejournal, вконтакте, Blogger, Facebook, Мой Мир, Я.ру, GoogleBuzz и Twitter.
Возможно позже список расширится.
К Liveinternet пока способа не нашёл.
Как это выглядит можно посмотреть у меня в блоге внизу сообщений. Значки кнопок можно ставить разные, смотря какие подходят к вашему дизайну.
Способы были найдены с помощью постов двух людей: sovety и artinblog. Спасибо этим людям!
Долго расписываться не хочу, публикую код сразу ко всем кнопкам. Кто хочет может взять только то, что нравится.
Надо нажать "расширить шаблоны виджета" в разделе "изменить html".
не забудьте на всякий сделать резервную копию своего шаблона.
Код следует вставлять после строки <data:post.body/> (Хотя если хотите можете вставить куда-нибудь ещё).
Код:
<b:if cond='data:blog.pageType == "item"'><noindex><div class='sharebuttons'><span style='color: #999999;'><b>Понравилось? опубликуй у себя:</b></span>То что выше выделено зелёным - это тег, который делает так, чтобы кнопки появлялись только на самой странице поста, а не прямо на первой странице блога после каждого сообщения. Если вы этого не хотите - уберите его.
<div align='right'><p>
<a class='shareme' expr:href='"http://www.livejournal.com/update.bml?subject=Ссылка: " + data:post.title + "&event=" + data:post.title + ": " + data:post.url' rel='nofollow'><img src='PICTURE' style='border: 0pt none;' title='TEXT'/></a>
<a class='shareme' expr:href='"http://vkontakte.ru/share.php?url=" + data:post.url' rel='nofollow'><img src='PICTURE' style='border: 0pt none;' title='TEXT'/></a>
<a class='shareme' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url ' rel='nofollow'><img src='PICTURE' style='border: 0pt none;' title='TEXT'/></a>
<a expr:href='"http://www.blogger.com/blog_this.pyra?t" + "&u=" + data:post.url + "&n=" + data:post.title + "&pli=" + 1' target='_blank' title='В Blogger!'><img alt='TEXT' src='PICTURE' style='border: 0pt none;'/></a>
<a class='shareme' expr:href='"http://connect.mail.ru/share?share_url=" + data:post.url ' rel='nofollow'><img src='PICTURE' style='border: 0pt none;' title='TEXT'/></a>
<a class='shareme' expr:href='"http://my.ya.ru/posts_add_link.xml?title=" + data:post.title + "&URL=" + data:post.url' rel='nofollow'><img src='PICTURE' style='border: 0pt none;' title='TEXT'/></a>
<a class='shareme' expr:href='"http://www.google.com/buzz/post?url=" + data:post.url + "&title=" + data:post.title + "&srcURL=" + data:blog.homePageUrl + "&srcTitle=" + data:title' rel='nofollow'><img src='PICTURE' style='border: 0pt none;' title='TEXT'/></a>
<a class='shareme' expr:href='"http://twitter.com/home?status=RT @ваш_ник_в_твиттере + " + data:post.url + " " + data:post.title' rel='nofollow'><img src='PICTURE' style='border: 0pt none;' title='TEXT'/></a>
</p></div></div></noindex></b:if>
Где написано PICTURE - впишите адрес картинки для своей кнопки.
Где TEXT - впишите пояснительную фразу, которая будет появляться при наведении мышки на кнопку.
UPD! О том, как добавить к этим кнопкам кнопку "Google +1" написано в моём посте "Кнопка Google +1 для Blogger".
Чтобы кнопки немного "ожили" и меняли цвет при наведении на них - вставьте в свой CSS следующий код, придуманный artinblog:
.sharebuttons{Я вставил этот код себе перед строкой /* Footer
font-size: 13px; /* размер шрифта */
font-weight: bold; /* стиль текста: жирный */
padding:5px; /* отступ от границ */
border: none; /* толщина и цвет рамки */
background: #FFFFFF; /* фоновый цвет */
}
.sharebuttons a img{
border: none;
opacity:1.0; /* непрозрачность: 100% */
}
.sharebuttons a:hover img{
border: none;
opacity:0.7; /* непрозрачность: 70% */
}
Пояснения в коде имеются, можно менять цвета, степень прозрачности и т.п.
Надеюсь, что это будет вам полезно.
Да, и ещё: чтобы незалогиненый в Я.ру пользователь при нажати на вашу кнопку вначале попадал на страницу с предложением залогиниться - вставьте себе в код перед тегом </head> следующий java-скрипт, который придумал sovety:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>За подробностями ещё раз приглашаю всех в посты sovety и artinblog.
<script type="text/javascript">
$(document).ready(function() {
$("a.shareme[href^='http://my.ya.ru']").attr("href", function() {
return "http://passport.yandex.ru/passport?mode=auth&retpath=" + escape(this.href);
});
});
</script>
Подписаться на:
Сообщения (Atom)