Кнопки социальных сетей для блога

Ну да, и я туда же. А что, без этих социальных сетей теперь никуда (я, кстати, и сам подсел на twitter и google+). Добрая часть интернет пользователей подсела на них, а у этой доброй части пользователей, еще более добрая :) часть друзей, с которыми можно делиться всем интересным. Вот и постами нашими они могут поделиться с друзьями своими, а чтоб упростить им задачу нужны кнопки, о них сегодня и поговорим.

В этом посте Вы найдете коды для размещения кнопок, которые установил себе я, найдете ссылки на официальные кнопки и описание того, как эти социальные кнопки установить на свой блог (сайт), а ниже, как обычно, Вас ждет жирный бонус и сладкое. Спасибо за Ваши комментарии и

не забудьте поделиться материалом с друзьями!

Кнопки социальных сетей для блога

Большинство популярных соц.сетей предлагает свои настраиваемые под наши нужды скрипты кнопок. У этих кнопок, понятное дело, свои преимущества – интерактивность и счетчик кликов, последнее очень важно. Но вместе с тем есть и минусы. Благодаря этим скриптам скорость загрузки страниц значительно падает, а как известно поисковики уже это дело учитывают.

Кнопки собственного производства являются полной противоположностью. Они быстро загружаются, так как находятся на одном сервере с самим сайтом и не обращаются к сторонним серверам за какой-либо информацией, например статистикой кликов, что также является минусом одновременно.

Я тут кстати на досуге, прежде чем писать этот пост, спросил у Вас какие кнопки социальных сетей выбрать для pervushin.com, ответов не много (спасибо большое тем, кто откликнулся), но выбор таки остановился на своего собственного производства кнопках. Здесь я все же затрону оба вида:

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

Вконтакте | Facebook | Mail.ru (Мой мир) | Я.ру (ya.ru) | Google Buzz | Одноклассники | Google +1
[ads1]

Кнопки своего производства

Вконтакте | Facebook | Mail.ru (Мой мир) | Я.ру (ya.ru) | ЖЖ (livejournal) | Одноклассники | Google Buzz | Google +1

Кнопка ВКонтакте

Ооочень популярная сеть, возможно самая популярная, среди сеошников (да и не только среди них). Я там тоже есть, присоединяйтесь. Код кнопки вконтакте.

Кнопка ВКонтактеСтиль кнопки предполагает всевозможные варианты: кнопка, кнопка без счетчика, текстовая ссылка, ссылка без иконки, просто иконка. Углы кнопки можно сделать прямыми или закругленными. Текст на кнопке можно написать какой угодно, ну например “Ух ты!” :):

Любой текст на кнопке это +

[ads2]

Настройка стиля кнопки

Настроили? Теперь забираем готовый код кнопки и прописываем его в шаблон нашего движка. Обратите внимание, в контакте предлагает нам два кода для вставки, один из них (первый) необходимо вставить между тегами <head></head> , второй в нужном месте шаблона.

Код кнопки ВКонтакте

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

Тег можно найти только в одном файле шаблона, в шапке блога, у меня этот файл обзывается header.php:

Файлы шаблона в wordpress

Предлагаемый код можно добавить сразу перед закрывающим тегом head, вот так:

<script type="text/javascript" src="http://vkontakte.ru/js/api/share.js?11" charset="windows-1251"></script>

Переходим ко второму коду, тут два варианта, его можно воткнуть как в одиночную запись, так и на главную для каждого поста в отдельности, как кнопка retweet сейчас у меня стоит. Начнем с одиночной записи, в wordpress шаблонах обычно этот файл зовется single.php, если Вы, как я сейчас, планируете ставить социальные кнопки в конце поста (под ним), тогда ищем строку <?php the_content(); ?> и после неё вставляем код кнопки вконтакте:

<script type="text/javascript"><!--
document.write(VK.Share.button({url: "<?php the_permalink() ?>"},{type: "round", text: "Ух, ты!"})); --></script>

Само собой Вы можете использовать дополнительные стили форматирования, дабы расположить эти кнопки как-то посимпатичнее :).

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

<script type="text/javascript">
 <!--
 document.write(VK.Share.button({
 url: '<?php the_permalink() ?>',
 title: '<?php the_title(); ?>',
 noparse: false
 }));
 -->
 </script>

Где: url – ссылка на пост, так как на главной много постов (анонсы), то кнопке необходимо сообщать каждый урл в отдельности, для этого и прописываем the_permalink. title – название поста, тоже самое, что и с URL, the_title возвращает название каждого поста. noparse: false – разрешаем выхватывать описание и картинку поста по его url, описание автоматически берется из тега description, картинку выхватывает первую в посте.

Код этот вставляем по аналогии с кнопкой ретвит, в файл index.php, это в случае с вордпрессом. Себе эту кнопку на главной обязательно поставлю, просто надо ее вписать как-то посимпатичней, над этим и думаю. С ВКонтакте разобрались, идем дальше.

Кнопка facebook

Кнопка facebookВ рунете набирает обороты и эта социальная сеть, а значит мы там должны быть, я уже есть :), присоединяйтесь. Код кнопки facebook. [ads3]Здесь примерно тоже самое, только в ничего вставлять не придется. Настройка также проста, кстати, там все на английском и кнопка в том числе, но когда она будет подгружаться уже у Вас на сайте, все будет на нашенском :).

В отличие от вконтакте, эту кнопку можно сделать коробкой (box count), как ретвит сбоку у меня, – это плюс, но есть большой минус – текст на этой кнопке не редактируется, если горизонтальная кнопка смотрится с текстом “Мне нравится” отлично, то коробочная версия кнопки разъезжается и выглядит ужасно, именно это является причиной того, что ее до сих пор нет под кнопкой retweet в моих постах.

Получение кода для кнопки facebook

После настройки всех параметров жамкаем кнопку “Get Code”, facebook дает нам два вида кода, я взял первый. Обратите внимание, здесь также необходимо подставить <?php the_permalink() ?>. Выглядеть это будет примерно так:

<iframe src="http://www.facebook.com/plugins/like.php?app_id=102378703198105&amp;href=<?php the_permalink() ?>&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>

Но вот с главной страницей проблема, кнопку установил, она видна и собирает статистику к каждой записи, но при нажатии на кнопку, записи не передаются в фейсбук…странно, если справлюсь с этой проблемой сообщу и Вы не забудьте здесь отписать, если имеете решение. Ну а для одиночной записи устанавливаем по аналогии с вышеописанной вконтакте.

Кнопка mail.ru

Кнопка mail.ruВы не поверите, я и там есть :). Код кнопки mail.ru.

Получаем код кнопки мой мир

Здесь нас можно сказать обделили, имею ввиду по типу кнопки, их всего два: кнопка (как на картинке выше) и ссылка с иконкой. Для одиночной записи в код добавлять ничего не надо, просто вставляем его в single.php. А для главной требуется добавить уже знакомый нам <?php the_permalink() ?>. Готовый код для главной будет выглядеть так:

<a target="_blank" href="http://connect.mail.ru/share?url=<?php the_permalink(); ?>" rel="{'type' : 'button', 'width' : '150'}">Рекомендую</a>
 <script src="http://cdn.connect.mail.ru/js/loader.js" type="text/javascript" charset="UTF-8"></script>

Кнопка я.ру

Кнопка я.ру

Код кнопки я.ру.

Еще одна кнопочка, позволяющая Вашим читателям делиться ссылками на материалы сайтов с друзьями на блогах и в клубах ya.ru. По статистике яндекс.блогов на я.ру зарегистрировано почти 2 миллиона пользователей, я кстати один из них, такому количеству пользователей нужно только помогать, потому эта кнопка нужна не меньше других.

Классная кнопка. Кажется разработчики подумали обо всем. На странице получения кода трудно что-либо сделать не так.

Получаем код для кнопки я.ру

После настройки всех опций, код без каких-либо изменений можно сразу размещать в одиночной записи. А для главной делаем все как обычно, т.е. добавляем <?php the_permalink() ?> и для title (заголовок) <?php the_title(); ?>. Для этого прям на той же странице выбираем в поле “Ссылка на публикацию” опцию “Произвольный URL” и прописываем <?php the_permalink() ?>, а в поле “Заголовок” “Произвольный заголовок” и пишем <?php the_title(); ?>.

Получение кода для главнойУ Вас должен получиться вот такой код:

<a counter="yes" type="button" size="large" share_url="<?php the_permalink() ?>" share_title="<?php the_title(); ?>" share_text="Рекомендую" name="ya-share"> </a><script charset="utf-8" type="text/javascript">if (window.Ya && window.Ya.Share) {Ya.Share.update();} else {(function(){if(!window.Ya) { window.Ya = {} };Ya.STATIC_BASE = 'http:\/\/img\-css.friends.yandex.net\/';Ya.START_BASE = 'http:\/\/my.ya.ru\/';var shareScript = document.createElement("script");shareScript.type = "text/javascript";shareScript.async = "true";shareScript.charset = "utf-8";shareScript.src = Ya.STATIC_BASE + "/js/api/Share.js";(document.getElementsByTagName("head")[0] || document.body).appendChild(shareScript);})();}</script>

Кнопка google buzz

Кнопка google buzzОчень популярный сервис, но в рунете на него как-то слабовато внимание обращают, мне кажется зря. В твиттер тоже не сразу все бросились, а сейчас многие локти кусают, что не сразу там о себе заявили :). Код кнопки google buzz. Я на google buzz.

На этой странице все также как и на предыдущих, Вы уже опытные :), настраиваем внешний вид кнопки и закидываем готовый код в single.php.

Код кнопки google buzz

А для главной (index.php), что добавляем? Правильно – < ?php the_permalink() ?>, выбираем опцию “Персонализированный” в выпадающем меню пункта “Отправляемый URL” и прописываем этот тег.

Кнопка Одноклассники

Кнопка ОдноклассникиПро эту кнопку я узнал случайно. Сколько сайтов в день “объезжаю” – не видел, а на одном увидел и решил себе поставить. Сеть очень популярная, а значит и оттуда при правильном подходе можно неплохой трафик получить. Код кнопки одноклассники. Я … а нет, меня на одноклассниках нет :), но надо будет и там появиться.

Смею предположить, что кнопку эту я не встречал, потому что разработчики не удосужились толком поработать над предложением установить их кнопку. Нет никаких настроек дизайна, есть только три строчки кода, а поверхностное описание установки этого кода усложняет ее распространение по сети.

Код кнопки Одноклассников

Давайте установим, этот код ставим между тегами :

<link href="http://stg.odnoklassniki.ru/share/odkl_share.css" rel="stylesheet">
 <script src="http://stg.odnoklassniki.ru/share/odkl_share.js" type="text/javascript" ></script>

Следующий код ставим в нужном месте шаблона. Его можно воткнуть как в одиночную запись, так и на главную.

<a class="odkl-klass-stat" href="<?php the_permalink() ?>" onclick="ODKL.Share(this);return false;" ><span>0</span></a>

Кнопки сервисов мы изучили, перейдем к кнопкам собственного производста, но не забудьте установить кнопку от Google +1. Поверьте, она на многое влияет.

Свои социальные кнопки

… устал. А Вы? Ничего, чуть-чуть осталось. Сейчас быстренько отдам Вам кнопки, они у меня в gif формате, и код готовый к употреблению установке.

Забирайте этот файл и распакуйте его в папку с изображениями Вашей темы (для вордпресс обычно это wp-content/themes/ваша_тема/images), а затем пропишите коды в single.php после < ?php the_content(); ?>.

ВКонтакте

<a onclick="window.open('http://vkontakte.ru/share.php?url=<?php the_permalink(); ?>', 'vkontakte', 'width=626, height=436'); return false;" href="http://vkontakte.ru/share.php?url=<?php the_permalink(); ?>" rel="nofollow"><img src="<?php bloginfo('template_url'); ?>/i/social/vkontakte.gif" width="88" height="21" title="Поделиться с друзьями ВКонтакте"></a>

Facebook

<a onclick="window.open('http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>', 'facebook', 'width=626, height=436'); return false;" rel="nofollow" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>"><img src="<?php bloginfo('template_url'); ?>/i/social/facebook.gif" width="76" height="21" title="Поделиться с друзьями в Facebook"></a>

Мой мир на mail.ru

<a onclick="window.open('http://connect.mail.ru/share?share_url=<?php the_permalink(); ?>', 'mmir', 'width=626, height=436'); return false;" rel="nofollow" href="http://connect.mail.ru/share?share_url=<?php the_permalink(); ?>"><img src="<?php bloginfo('template_url'); ?>/i/social/mailmir.gif" width="100" height="21" title="Поделиться с друзьями Моего Мира на Mail.ru"></a>

Я.ру

<a onclick="window.open('http://wow.ya.ru/posts_share_link.xml?url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>', 'yaru', 'width=626, height=436'); return false;" rel="nofollow" href="http://wow.ya.ru/posts_share_link.xml?url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>"><img src="<?php bloginfo('template_url'); ?>/i/social/yaru.gif" width="100" height="21" title="Поделиться с друзьями на Я.ру"></a>

ЖЖ (livejournal)

<a onclick="window.open('http://www.livejournal.com/update.bml?event=<?php the_permalink(); ?>&amp;subject=<?php the_title(); ?>', 'lj', 'width=626, height=436'); return false;" rel="nofollow" href="http://www.livejournal.com/update.bml?event=<?php the_permalink(); ?>&amp;subject=<?php the_title(); ?>" title="Опубликовать в своем блоге livejournal.com"><img src="<?php bloginfo('template_url'); ?>/i/social/livejournal.gif" alt="Опубликовать в своем блоге livejournal.com" width="100" height="21"></a>

Одноклассники

<a onclick="window.open('http://www.odnoklassniki.ru/dk?st.cmd=addShare&amp;st.s=1&amp;st._surl=<?php the_permalink(); ?>', 'odkl', 'width=626, height=436'); return false;" rel="nofollow" href="http://www.odnoklassniki.ru/dk?st.cmd=addShare&amp;st.s=1&amp;st._surl=<?php the_permalink(); ?>"><img src="<?php bloginfo('template_url'); ?>/i/social/odkl.gif" width="69" height="21" title="Поделиться с друзьями в Одноклассниках"></a>

Живая лента (Google Buzz)

<a onclick="window.open('http://www.google.com/reader/link?url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>&amp;srcURL=http://pervushin.com/', 'buzz', 'width=626, height=436'); return false;" rel="nofollow" href="http://www.google.com/reader/link?url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>&amp;srcURL=http://pervushin.com/"><img src="<?php bloginfo('template_url'); ?>/i/social/googlebuzz.gif" width="100" height="21" title="Добавить в Google Buzz"></a>

Для наглядности покажу, как эти коды размещены у меня:

<div align="center">
 <a onclick="window.open('http://vkontakte.ru/share.php?url=<?php the_permalink(); ?>', 'vkontakte', 'width=626, height=436'); return false;" href="http://vkontakte.ru/share.php?url=<?php the_permalink(); ?>" rel="nofollow"><img src="<?php bloginfo('template_url'); ?>/i/social/vkontakte.gif" width="88" height="21" title="Поделиться с друзьями ВКонтакте"></a>
 
<a onclick="window.open('http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>', 'facebook', 'width=626, height=436'); return false;" rel="nofollow" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>"><img src="<?php bloginfo('template_url'); ?>/i/social/facebook.gif" width="76" height="21" title="Поделиться с друзьями в Facebook"></a>
 
<a onclick="window.open('http://connect.mail.ru/share?share_url=<?php the_permalink(); ?>', 'mmir', 'width=626, height=436'); return false;" rel="nofollow" href="http://connect.mail.ru/share?share_url=<?php the_permalink(); ?>"><img src="<?php bloginfo('template_url'); ?>/i/social/mailmir.gif" width="100" height="21" title="Поделиться с друзьями Моего Мира на Mail.ru"></a>
 
<a onclick="window.open('http://wow.ya.ru/posts_share_link.xml?url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>', 'yaru', 'width=626, height=436'); return false;" rel="nofollow" href="http://wow.ya.ru/posts_share_link.xml?url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>"><img src="<?php bloginfo('template_url'); ?>/i/social/yaru.gif" width="100" height="21" title="Поделиться с друзьями на Я.ру"></a>
 
<a onclick="window.open('http://www.livejournal.com/update.bml?event=<?php the_permalink(); ?>&amp;subject=<?php the_title(); ?>', 'lj', 'width=626, height=436'); return false;" rel="nofollow" href="http://www.livejournal.com/update.bml?event=<?php the_permalink(); ?>&amp;subject=<?php the_title(); ?>" title="Опубликовать в своем блоге livejournal.com"><img src="<?php bloginfo('template_url'); ?>/i/social/livejournal.gif" alt="Опубликовать в своем блоге livejournal.com" width="100" height="21"></a>
 
<a onclick="window.open('http://www.odnoklassniki.ru/dk?st.cmd=addShare&amp;st.s=1&amp;st._surl=<?php the_permalink(); ?>', 'odkl', 'width=626, height=436'); return false;" rel="nofollow" href="http://www.odnoklassniki.ru/dk?st.cmd=addShare&amp;st.s=1&amp;st._surl=<?php the_permalink(); ?>"><img src="<?php bloginfo('template_url'); ?>/i/social/odkl.gif" width="69" height="21" title="Поделиться с друзьями в Одноклассниках"></a>
 
<a onclick="window.open('http://www.google.com/reader/link?url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>&amp;srcURL=http://pervushin.com/', 'buzz', 'width=626, height=436'); return false;" rel="nofollow" href="http://www.google.com/reader/link?url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>&amp;srcURL=http://pervushin.com/"><img src="<?php bloginfo('template_url'); ?>/i/social/googlebuzz.gif" width="100" height="21" title="Добавить в Google Buzz"></a></div>

Готово! Теперь по нажатию на одну из кнопок, пользователю во всплывающем окне даже делать ничего не придется, ну разве что только нажать кнопку публикации. Делиться Вашими постами с друзьями в социальных сетях стало еще проще и удобнее.

Удачи Вам в Ваших начинаниях!

Snapshot / @pervushin_com в twitter и в Google+

Сладкое на сегодня: молоденькая мадам на гитаре жжет, наслаждайтесь


  • http://artdeviant.ru/ ShadowKoTT

    честно говоря, он некоторых кнопках не знал, спасибо!

    • http://pervushin.com/ Snapshot

      Всегда рад!

  • Ксения

    Спасибо! Наконец-то нашёлся человек, который выложил код кнопки к одноклассникам! Очень долго искала. Все остальные давно к себе установила, а вот с этой кнопкой никак разобраться не могла :(((
    Спасибо большое!

    • http://pervushin.com/ Snapshot

      Блин, я просто счастлив что смог помочь Вам!

  • Dnstep

    Хорошая статья и хорошие кнопки. Но вот сегодня одну проблемку обнаружил. Где-то в 10-12 по Москве сайт Вконтакте не открывался, и мой сайт куда я установил кнопки грузился в Opere минуты 2, потом ссылка ВКонтакте пропала. При следующей попытке открыть та же песня. Этого явления как-то можно избежать?

    • http://pervushin.com/ Snapshot

      Какая кнопка стоит, от “вконтакте с цифрами”? Поставьте “свои” кнопки, которые не будут обращаться за статистикой к сторонним серверам, в общем выше все написано :)

  • http://webakcha.blogspot.com/ Rail2d

    Интересная и полезная статья, но пока не осилил… Большая)
    Вопрос чайника, не ругайте сильно и отнеситесь серьезно:
    Скажите плс, а вот вы жирный бонус вы выкладываете, а в чем соль того, что бы оставлять там свою ссылочку? траффик или что то еще?)

    • http://pervushin.com/ Snapshot

      трафика там нет, ну так проскочит человек-два, а на самом деле вес (тИЦ)

  • http://allpa.ru/ Allpa

    Вот и я задумала появитья на “Одноклашках” продвижения своих услуг для. Но неудачно: зарегиться зарегилась, а войти не моги :)
    Сюда прибрела в поисках кода для ихной кнопки, каковой ряд нашенских надо было пристроить к панельке от SexyBookmarks (да, лишние скрипты и запросы, но пока она мне нравится, а там посмотрим, – в случае чего, Ваш мануальчик у меня под рукой).
    Благодаря Вашим подробнейшим разъяснениям, я таки смогла преодолеть и победить :)
    Спасибо!

    • http://pervushin.com/ Snapshot

      Я рад, спасибо.

  • http://twitter.com/Anatolij33 Anatolij

    спасибо! я тоже болею кнопками, хорошо что все кнопки описаны в одном месте

    • http://pervushin.com/ Snapshot

      Спасибо Вам!

  • http://twitter.com/Strazikblog Strazik-blog

    Круто! Использовал для регистрации твиттер в дискусе!
    У меня 3 вопроса:
    1. Есть ли в дискусе возможность вставлять смайлики??
    2. Как Вы вставили подписку на email, ретвит и rss в кнопки? Можете поподробнее расказать!

    3. Оффтоп: Вы можете посоветовать кого-нибудь для создания сложной авторской темы с неплохим функционалам по макету? У нас блог примерно 1000 чел в сутки и сейчас думаем над рестайлингом.

    • http://pervushin.com/ Snapshot

      Спасибо.

      1. Пока нет.

      2. Кнопка retweet – http://pervushin.com/twitter-r
      Подписка на емайл – от feedburner? Идете в свой аккаунт, вкладка “Публикуй”, в меню слева “Подписка по электронной почте”, там выбираете язык и забираете код формы, который вставляете в нужном месте шаблона.
      rss кнопка аналогично.

      3. Мне делали ребята из блогоарт http://blogoart.ru/, недорого и делают хорошо. Кстати они же Вам и повтыкают по Вашему желанию все вышеуказанные фишки (подписка, rss и т.д.).

  • Наталья

    Отличный контент и всё доступно. Спасибо!
    У меня тоже сайт на wordpress, но к сожалению нет single.php и куда вставлять коды совершенно непонятно теперь :(. Есть footer.php, header.php, sidebar.php, comments.php, index.php, functions.php, page.php
    Порекомендуйте, пожалуйста, что можно сделать?

    • http://pervushin.com/ Snapshot

      В index.php смотрите, у Вас общий шаблон и одиночная запись в одном файле значит.

      • Наталья

        Спасибо!

  • http://blogreal.ru __LEnIN__

    Спасибо за коды) Воспользуюсь когда-нибудь

  • Manbob

    Хм может, кто сталкивался у меня facebook и mail.ru кнопки не отображаются в Firefox 3,5 ?

    Пользовал стандартные конструкторы.

    Еще есть соц-кнопка «в Кругу друзей» – с ней правда та же проблемка, с остальными кнопками проблем не заметил

  • http://twitter.com/idridze Dmitry Rasakhatsky

    спасибо. так лень было собирать эти коды по страницам :)

  • http://pervushin.com/ Snapshot

    Ответил Вам на e-mail.

    Эти кнопки можно вставить на любой сайт. Достаточно скопировать HTML код и разместить его в нужном месте сайта. К сожалению, я никогда не работал с указанной Вами программой, но подозреваю, что Ваш сайт состоит из статичных HTML страничек. В таком случае Вам придется вставлять код кнопок на все страницы имеющиеся у Вас.

  • ERSEO.RU

    Наконец-то нашел. Спасибо.

  • http://seoonly.ru SEOonly

    спс

  • http://www.expert-seo.ru/ Артем

    Дельные советы.
    Сегодня испытаю.

  • Belevichka

    У меня небольшая проблемка с кнопкой “ВКонтакте” – ее словно разорвало на некоторые части по горизонтальной линии (один блок в одном углу, само тело дальше, закрывающая скобка дальше). Попробовал поставить тег толку нет.
    Подскажите что делать, я в этих делах не профессионал…..

    • http://pervushin.com/ Snapshot

      Адрес сайта пожалуйста, где проблема.

  • Lavriskaya

    Здравствуйте! Подскажите пожалуйста, про добавлении записи на “Фейсбук” вмсесто букв в тексте одни кракозябры. Другие соц кнопки работают без проблем, а с фейсом такая вот беда. Почему так может быть, ведь фейс как раз самая нужная для меня кнопка.

    • http://pervushin.com/ Snapshot

      Проблема в кодировке. Лучше использовать UTF-8, у меня по крайней мере с этой кодировкой никогда проблем не возникало. Обратитесь к Вашему хостеру, думаю они поправят.

      • Lavriskaya

        ээх, как раз у меня эта кодировка даж в скрипте прописана….такая же беда с кнопкой “мне нравится” от фейсбука….вообщем все кнопки нормально работают, а фейсбуковские не хотят(

  • http://blog.liderbiz.ru Ольга

    Здравствуйте!
    У меня картинки кнопок не отображаются, хотя работают, и вместо названия статьи кракозябры кода. Подскажите, с чем это связано? движок – друпал (вообще он во многом глючит, н-р, не могу rss к фидбернеру подключить), может из-за него? 
    Как с этим бороться?

    С уважением, Ольга

    • http://pervushin.com/ Snapshot

       >>У меня картинки кнопок не отображаются
      Пути к картинкам верно указали?

      >>вместо названия статьи кракозябры
      Проблемы с кодировкой. Вероятно база отдает в какой-то другой кодировке. К хостеру обратитесь, он может поправить.

      • http://blog.liderbiz.ru Ольга

        Спасибо. Я думала, за такие моменты создатели движка отвечают… 

  • http://twitter.com/Sakramon Andrei Varzaev

    Доброго, что там у Вас за окном.
    Вопрос немного не по статье, тут все идеально получилось, за что большое спасибо.
    А вопрос такой – у Вас в виджетах есть табы. Это Вы какой плагин использовали?

    • http://pervushin.com/ Snapshot

      >>в виджетах есть табы. Это Вы какой плагин использовали?
      Нет, это css+html. Мастера из блогоарт делали.

      >>как у Вас реализован блок “мне нравится” с facebook?
      Вот так: http://pervushin.com/facebook-i-like-page-friend.html

  • http://world-ens.co.cc Elena Kusnetsova

    Вопрос не по теме – как убрать  в списке постов ( архиве) на главной и тд, вывод ЭТИХ кнопок  и соответственно других кодов подписки и и т.д – то есть хочется что вот ТАКИЕ панели выше были внутри поста а не выводились в списке постов на главной и т.д, не очень получается просто. Где-то видела в интернете инструкцию да вот забыла записать. Заранее спасибо.

    • http://pervushin.com/ Snapshot

      Если в wordpress, тогда добавляйте их в файле single.php. Этот файл отвечает за вывод одиночной записи.

  • http://world-ens.co.cc Elena Kusnetsova

    Вообще ресурс прекрасный, для людей….

  • ametbl4

    Спасибо за полезную информацию и готовые скрипты для создания кнопок. Главное, что все это работает и легко доступно!

  • Mambet21

    прикольно

  • http://ERSEO.RU Дмитрий

    Спасибо за подборку. У меня стоит скрипт, сгенерированый share42, кнопки не очень подходят, возможно потом заменю. 

  • Александр

    Если бы вы привели пример, как вышеприведенные скрипты грузить в пост-загрузке, то было бы очень полезно. Сейчас получается,  что страница подтормаживает, т.к. бразуер качает скрипты с нескольких хостов…

    Под пост-загрузкой я подразумеваю что-то вроде такого:

    function dynLoadJs(url)
    {
        var js = document.createElement(‘script’);
        js.src = url;
        var head = document.getElementsByTagName(‘head’)[0];
        head.appendChild(js);
    }

    • http://pervushin.com/ Snapshot

      Хорошая идея, надо подумать.

  • Александр

    Или еще один вариант для ускорения – это слить все внешние скрипты в один файл и разместить его локально на своем хосте. Явно будет быстрее грузиться. Хотя конечно работоспособность такого надо проверить…

    • http://pervushin.com/ Snapshot

      Работать будет, но ускорить этим способом не получиться. Скрипт в любом случае будет обращаться к своим серверам за данными (сколько по кнопкам кликнули, кликнули ли Вы сами и т.д.), отсюда тормоза. Пост загрузка это выход, но надо это родить.

      • Александр

        Я иногда сталкивался с тем, что если код кнопки вставлен в тело страницы, а удаленный внешний сервере тормозит, то это тормозит загрузку всего того, что идет в теле страницы после скрипта.
        Т.е. суть в том, чтобы реализовать неблокирующую загрузку внешних скриптов.
        А если все слить в один файл локально, то может ускорение и не будет таким существенным, но тем не менее оно будет, т.к. нет расходов на установку N соединений, а будет только одно с локальным сервером. В случае с недоступностью удаленных серверов это тоже поможет избежать задержки в отрисовке страницы.

  • http://osoznanie.liveforums.ru/ Екатерина

    У меня все кнопки если и можно где поставить, то только на форуме…но вставить хотелось бы … интересно, это возможно? Форум на бесплатном хостинге…просто я в этом такой “чайник”…

  • http://www.facebook.com/ajzetullin Кирилл Айзетуллин

    Спасибо! Помогли!

  • http://twitter.com/skosar2011 Сергей Косарь

    Прикольно! Спасибо, очень помогло. А вот ещё бы хорошо было бы если бы автор тут описали такой инструмент  “Опубликовать от имени…” )))

  • Dmitri

    Очень толковая статья и сайт тоже замечательный. Большое спасибо за разъяснения.

    • http://pervushin.com/ Snapshot

      Спасибо Вам!