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

После <div class='post-footer-line post-footer-line-1'> добавляем:

<div align='center'><a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot;: &quot; + data:post.url' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' rel='nofollow' target='_blank'><img alt='twitter' border='0' height='22' src='http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT_rQN9IFzxGa4fViOsY1mcWzGPQ-hnWM9hvMlLzOV8HmIkUUnNXa-oZoirucWj5EiUKFA6vkV3rSwvMjPhXavwTSD_4dzGp23MTtv0g670baXZqOqNfFI1pQjpW2wM9AVR1nlMBWXcg8/s1600/tweetn.png' width='55'/></a> <a expr:href='&quot;http://vkontakte.ru/share.php?url=&quot; + data:post.url' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' rel='nofollow' target='_blank'><img alt='В Контакте' border='0' height='21' src='http://3.bp.blogspot.com/_ebKrCj8TLPk/TU3RjiW1FEI/AAAAAAAABas/XoQvbUXqc2M/s1600/VKontakte.png' width='88'/></a> <a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url+ &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Facebook' border='0' height='21' src='http://4.bp.blogspot.com/_ebKrCj8TLPk/TU3jps8m3oI/AAAAAAAABa8/6sJuxOcY5BM/s1600/Facebook.png' width='88'/></a> <a expr:href='&quot;http://www.odnoklassniki.ru/dk?st.cmd=addShare&amp;st.s=1&amp;st._surl=&quot; + data:post.url' rel='nofollow' target='_blank'><img alt='Одноклассники' border='0' height='21' src='http://dev.odnoklassniki.ru/wiki/download/attachments/1999826/odkl.png?version=1&amp;modificationDate=1283790218257' width='69'/></a> <a expr:href='&quot;http://connect.mail.ru/share?share_url=&quot; + data:post.url' rel='nofollow' target='_blank'><img alt='Мой Мир' border='0' height='21' src='http://3.bp.blogspot.com/_ebKrCj8TLPk/TU3ytHs7API/AAAAAAAABbU/1wb9M9V6n1Q/s1600/moi-mir.png' width='86'/></a> <a expr:href='&quot;http://wow.ya.ru/posts_share_link.xml?url=&quot;+data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Я.ру' border='0' height='21' src='http://2.bp.blogspot.com/_ebKrCj8TLPk/TU3tcIDGBoI/AAAAAAAABbI/8cPR6G8YRXc/s1600/Ya-ru.png' width='98'/></a><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' style='background: url(http://ssl.gstatic.com/s2/oz/images/stars/po/Publisher/sprite4-a67f741843ffc4220554c34bd01bb0bb.png) no-repeat 0 -720px; width: 33px; height: 20px; display: inline-block;' target='_blank' rel='nofollow'></a></div>


Изображение кнопок, как вы заметили, одинаковой высоты. Данного эффекта можно добиться используя Фотошоп.

Для того, чтобы ссылки открывались в новом окне, в тег a дописываем

expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"'

Например,

<a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot;: &quot; + data:post.url' rel='nofollow' target='_blank' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"'>

В качестве образца я взяла кнопку "Twitter" и "В Контакте".

38 коммент.:

Irina комментирует...

Здравствуйте,

Я добавила этот код к себе в блог перед указанным выше кодом, но у меня не появилось ни одно кнопки.

Почему?

Irina комментирует...

Мой блог www.beauty-lessons.com

pautinovih комментирует...

Всё работает, отличная инструкция,благодарочка!!!

NMitra комментирует...

Отлично

Натали комментирует...

Спасибо огромное! Очень простая и действенная инструкция.

Анонимный комментирует...

Здравствуйте а как мне такие кнопочки сделать в с
80;стеме UCOZ? если не сложно напишите мне gil_daniil@mail.ru

NMitra комментирует...

Здравствуйте, к сожалению с UCOZ не работала, поэтому точно не подскажу.

Но в поиске встречала реализацию.

Nick комментирует...

Спасибо огромное за ваш труд! Все работает прекрасно!

NMitra комментирует...

Рада слышать!

MoldKorr комментирует...

Добрый вечер) Знаете, а огромное вам спасибо) Уже не первый день ищу, и так и не получилось найти нормальной инструкции по установке этих кнопок в блоггер... А сегодня вот зашел скачать кип, и увидел, что моно вставить код... как? так и не понял... а тут нашел ваш блог. спасибо)

NMitra комментирует...

Спасибо за добрые слова!

Анонимный комментирует...

нет данной строки в моем шаблоне 100% После чего еще можно вставить данный код?

NMitra комментирует...

В обоих блогах из профиля фрагмент в исходном коде присутствует.

В шаблоне - Изменить HTML - нажмите CTRL+F - в появившееся окно введите

post-footer-line-1

Unknown комментирует...

Спасибо огромное! Очень хорошо все расписано!
Один вопрос а как убрать старые кнопки которые стоят у меня по умолчанию?

NMitra комментирует...

Новый редактор: "Дизайн"-"Сообщения блога"-изменить-убрать галку " Показывать кнопки для публикации ...".

Или удалить код из комментария 183 http://shpargalkablog.ru/2011/02/sotsialnye-knopki-dlya-blogger.html

Lesya комментирует...

круто) спасибо! разобралась даже я))

NMitra комментирует...

Рада слышать

Unknown комментирует...

Огромное Вам спасибо)) не первый день уже сижу на Вашем сайте, многими советами уже воспользовался... других таких толковых сайтов еще не видел. Спасибо Вам))
http://moskvichev-antrakstor.blogspot.com/

dark7samurai комментирует...

круто!!!!!! премного балгодарен!!!!!!

Unknown комментирует...
Этот комментарий был удален автором.
illussi комментирует...

Спасибо огромное - так просто всё)

еще я хочу сделать кнопки серыми, чтоб в стиль вписывались . по свободе займусь в PS

)

Ильнур комментирует...

Огромнейшее вам спасибо! все доступно и просто, а работает на УРА!

Елена. комментирует...

Как здорово.Спасибо Наталья за то, что делитесь. Цены Вам нет....

BeeMeR комментирует...

ДАААА, Я зделал это!!! Огромное ЧЕЛОВЕЧЕСКОЕ СПАСИБО ВАМ!!!!! Я чуть не поседел пока разбирался с этими кнопками!!

NMitra комментирует...

)))

Unknown комментирует...

Как в новом шаблоне вставить данный скрипт , подскажите пожалуйста, ничего не получается не могу найти строку .......

NMitra комментирует...

Какую строку?

Ирина Александровна Кудрявцева комментирует...

подскажите, что нужно изменить, чтобы кнопка +1 показывала еще и количество

NMitra комментирует...

http://shpargalkablog.ru/2011/02/sotsialnye-knopki-dlya-blogger.html#Google

Ирина Александровна Кудрявцева комментирует...

Мне очень нравятся эти кнопки. Меня не устраивает, что они на главной странице видны. Удалила. А теперь думаю, может их можно убрать ка-то на внутреннюю страницу поста? Подскажите.

NMitra комментирует...

См. комментарий 91 к статье http://shpargalkablog.ru/2011/02/sotsialnye-knopki-dlya-blogger.html

Ирина Александровна Кудрявцева комментирует...

Спасибо, Наталья! Вернула полюбившиеся мне кнопки.

Александр Никитин комментирует...
Этот комментарий был удален автором.
Александр Никитин комментирует...
Этот комментарий был удален автором.
Александр Никитин комментирует...

Здравствуйте!
Попытался вставить эти классные кнопочки у себя в блоге (http://www.oriwellness.ru/)-не получается. Год назад вставлял какой-то код, чтобы их скрыть, может из-за этого. Кстати, кнопки соцсетей от Blogspot, когда ставлю галочку показывать-не показываются. Помогите плиз!

NMitra комментирует...

Здравствуйте!

Есть два (или три, не помню) вхождений строчки

<div class='post-footer-line post-footer-line-1'>

добавляйте код после нужного

Unknown комментирует...

Добрый день! Мне нужны кнопки на странице, а не под каждым сообщением (там уже есть), но если я вставляю через дизайн как виджет, то кнопки появляются, но не работают((( вот http://christinadanker.blogspot.com/ как это исправить? Заранее спасибо!

NMitra комментирует...

Здравствуйте, кнопки на группы добавляйте так: http://shpargalkablog.ru/2010/08/gadzhet-htmljavascript-blogger.html#ikonki

Или вы не это имеете ввиду?

Отправить комментарий