1 USD 
1 EUR 
Социальные кнопки или кнопки социальных сетей на сайте
- Кнопка Vkontakte.ru
- Кнопка FaceBook.com
- Кнопка Odnoklassniki.ru
- Кнопка Tweet.com
- Кнопка Мой Мир (mail.ru)
- Кнопка Google Buzz
- Кнопка LiveJurnal
- Кнопка FriendFeed
- Кнопка Google+1
- Собственные социальные кнопки
Социальные сети настолько прочно вошли в жизнь каждого пользователя Интернета, что рассказывать о том, что это такое просто нет смысла. А вот что такое социальные кнопки или как их еще называют кнопки социальных сетей и зачем они нужны на Вашем сайте – об этом и пойдет речь в этой статье.
Если Вам часто приходится посещать различные сайты и блоги Интернета, а так оно скорее всего и есть, то может быть обращали внимание на кнопки с названиями или символами сайтов социальных сетей. Таких, как Twitter, Facebook, Freandfeed, LiveJournal, В контакте многих других – вот такие:
или такие
В общем, они могут быть настолько разными, насколько хватает фантазии их авторам. Зачем они нужны. Нужны социальные кнопки как Вам, то есть хозяину сайта, так и посетителям, зашедшим на Ваш сайт.
Посетителям кнопки социальных сетей дают возможность добавить ссылку на статью, которая им понравилась в ту социальную сеть, в которой есть аккаунт посетителя и где он активно общается с такими же завсегдатаями социальной сети. А так как людям свойственно делиться полезной информацией друг с другом, то ссылка на Ваш сайт может стать доступной многим людям и вполне может быть они станут постоянными посетителями Вашего сайта.
Кроме этого, Вы, как хозяин сайта, получаете анонс страницы сайта в социальной сети и обратную ссылку на Ваш сайт, что никогда лишним не будет. Тем более, что популярные сайты социальных сетей очень уважают поисковые системы и ссылки с этих сайтов очень быстро индексируются.
Так что если я Вас убедил, и Вы хотите сами создать и установить на сайт социальные кнопки, то давайте сделаем это. Немного о функциональных возможностях создаваемых нами кнопок социальных сетей. Так как человек ленив по своей природе, то создаваемая социальная кнопка должна свести к минимуму объем работы по созданию ссылки на страницу Вашего сайта. Поэтому скрипт кнопки откроет стандартную форму социальной сети, позволяющую добавить новую запись в аккаунт пользователя, причем автоматом передаст адрес статьи Вашего сайта и ее название. Естественно, что в таком случае, посетителю сайта не нужно будет набирать текст названия статьи и копировать ссылку на нее.
В какое место страницы сайта будем вставлять социальные кнопки? Да в какое хотите! По моему мнению, самое удачное место – это конец статьи. Вот туда и вставим.
Кнопка Vkontakte.ru
http://vkontakte.ru/developers.php?o=-1&p=Share
Разместив под статьями Вашего издания или блога кнопку "Опубликовать ВКонтакте", Вы позволите 70 миллионам пользователей ВКонтакте быстро делиться ссылками на Ваши материалы со своими друзьями.
Ссылка на Ваш сайт навсегда останется доступной всем посетителям страницы опубликовавшего. Таким образом, Ваш сайт сможет привлечь внимание дополнительных посетителей не только в короткий промежуток после появления новости. Данная особенность выгодно отличает публикацию ВКонтакте от других методов публикации в интернете.
Вы можете выбрать вид кнопки для публикации статьи ВКонтакте в зависимости от оформления Вашего сайта. Кнопка может иметь прямые или скругленные углы, содержать или не содержать счётчик с количеством отправленных публикаций. Вы можете оформить кнопку в виде обычной текстовой ссылки или же маленькой иконки ВКонтакте.
Пример кнопки Вконтакте:
Новый вариант (скрипт js и можно спокойно копировать к себе на сайт):
<script type="text/javascript" src="http://vkontakte.ru/js/api/share.js?11" charset="windows-1251"></script>
<script type="text/javascript"><!--
document.write(VK.Share.button(false,{type: "round", text: "Сохранить"}));
--></script>
Старый вариант (картинку можно спокойно скопировать на сайт и вызывать ее без задержек):
<a rel="nofollow" title="Поделиться ВКонтакте" target="_blank" href="http://vkontakte.ru/share.php?url={адрес страницы}" ><img src="/вашсайт/images/кнопкаВконтакте.jpg" alt="Добавить в ВКонтакте"></a>
Wordpress вариант (если вы используете GA.js):
<a href="http://vkontakte.ru/share.php?url=<?php the_permalink(); ?>" target="_blank" rel="nofollow" onmouseup="javascript: pageTracker._trackPageview('/vkontakte-post');">
<img src="<?php bloginfo('template_url'); ?>/images/vkontakte.jpg" width="84" height="18" title="Поделиться ВКонтакте"></a>
Wordpress вариант (если вы используете Асинхронный код GA):
<a href="http://vkontakte.ru/share.php?url=<?php the_permalink(); ?>" target="_blank" rel="nofollow" onmouseup="javascript:_gaq.push(['_trackPageview','/vkontakte-post']);">
<img src="<?php bloginfo('template_url'); ?>/images/vkontakte.jpg" width="84" height="18" title="Поделиться ВКонтакте">
</a>
Для сайтов без поддержки JavaScript
Если Вы не можете выполнять JavaScript-сценарии на Вашем сайте, например Ваша блог-платформа не поддерживает этой функциональности, Вы можете размещать прямую ссылку для публикации ВКонтакте. Эта ссылка имеет следующий вид:
http://vkontakte.ru/share.php?url={адрес страницы}
Код для ее размещения может выглядеть так:
<a href="http://vkontakte.ru/share.php?url=http://mysite.com" target="_blank">Поделиться ВКонтакте</a>
Кнопка FaceBook.com
http://developers.facebook.com/docs/reference/plugins/like/
Как кнопка позволяет пользователю поделиться контентом с друзьями на Facebook. Когда пользователь нажимает кнопку Как на вашем сайте, история появляется в друзья пользователя Лента новостей со ссылкой на ваш сайт.
Если ваш веб-страница представляет реальные лица, вещи, как кино, спортивных команд, знаменитостей, и ресторанов, использующих протокол Open Graph указать информацию об объекте. Если вы включите Open Graph теги на веб-странице, ваша страница становится эквивалентной страница на Facebook. Это означает, что когда пользователь нажимает кнопку Как на вашей странице, соединения между вашей страницы и пользователей. Ваша страница будет отображаться в "Любит и интересов" раздела профиля пользователя, и у вас есть возможность публиковать обновления для пользователей. Ваша страница будет отображаться в тех же местах, что того, страницы отображаются вокруг объекта (например, поиск), и вы можете ориентировать объявления на людей, которые, как ваш контент.
Есть два Как кнопку реализации: XFBML и Iframe. Версия XFBML является более универсальным, но требует использования JavaScript SDK. XFBML динамически повторно размеры его высота в зависимости от того Есть профиль фотографии для отображения, дает вам возможность (через библиотеку JavaScript) для прослушивания, как события так, что вы знаете, в режиме реального времени, когда пользователь нажимает кнопку "Как, и это всегда дает пользователю возможность добавить дополнительный комментарий к тому подобное. Если пользователи делают добавить комментарий, рассказ опубликован обратно того, дается больше внимания.
Пример кнопки FaceBook:
Новый вариант (iframe):
<iframe src="http://www.facebook.com/plugins/like.php?app_id=211602055536993&href&send=false&layout=button_count&width=110&show_faces=true&action=like&colorscheme=light&font=verdana&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe>
Новый вариант (XFBML):
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=211602055536993&xfbml=1"></script><fb:like href="" send="false" layout="button_count" width="110" show_faces="true" font="verdana"></fb:like>
Старый вариант (картинку можно спокойно скопировать на сайт и вызывать ее без задержек):
<a rel="nofollow" title="Поделиться ссылкой в FaceBook" target="_blank" href="http://www.facebook.com/sharer.php?u={адрес страницы}"><img src="/вашсайт/images/кнопкаФейсбук.jpg" alt="Поделиться ссылкой в FaceBook"></a>
Wordpress вариант (если вы используете Асинхронный код GA):
<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>" target="_blank" rel="nofollow" onmouseup="javascript:_gaq.push(['_trackPageview','/facebook-post']);">
<img src="<?php bloginfo('template_url'); ?>/images/facebook.jpg" width="84" height="18" title="Добавить в FaceBook">
</a>
Атрибуты:
- HREF - URL любить. Версия XFBML по умолчанию текущей страницы.
- SEND - указывает, следует ли включать кнопку "Отправить" с помощью кнопки Как. Это работает только с версией XFBML.
- LAYOUT - Есть три варианта:
- standard - отображает социальные текст справа от кнопки и друзей фотографии в профиль ниже. Минимальная ширина: 225 пикселей. Стандартная ширина: 450 пикселей. Высота: 35 пикселей (без фотографий) или 80 пикселей (с фотографиями).
- button_count - отображает общее число любит справа от кнопки. Минимальная ширина: 90 пикселей. Стандартная ширина: 90 пикселей. Высота: 20 пикселей.
- box_count - отображает общее число любит над кнопкой. Минимальная ширина: 55 пикселей. Стандартная ширина: 55 пикселей. Высота: 65 пикселей.
- show_faces - указывает, следует ли отображать фотографии в профиль под кнопкой (стандартная раскладка только).
- width - ширине Как кнопку
- action - глагол для отображения на кнопку. Функции: 'как', 'рекомендовать '
- font - шрифт для отображения в кнопку. Функции: "Arial", "Lucida Grande", "Segoe UI ', ' Tahoma ',' Trebuchet MS ', ' Verdana '
- colorscheme - цветовую схему для как кнопки. Функции: "свет", "темный"
- ref - ярлык для отслеживания клиентов; должно быть меньше 50 символов и может содержать буквы и цифры и некоторые знаки пунктуации (в настоящее время +/=-.:_). реф атрибут приводит к развитию двух параметров, которые будут добавлены к реферер URL, когда пользователь нажимает ссылку на поток рассказ о как действия:
- fb_ref - реф параметра
- fb_source - поток типа ('дом', 'Профиль', 'Поиск', 'другой'), в котором нажмите произошло, и история типа ('oneline "или" многострочный), объединенные с подчеркивания.
Кнопка Odnoklassniki.ru
http://dev.odnoklassniki.ru/wiki/display/plugins/Social+Plugins
Кнопка «Класс!» позволяет посетителям вашего сайта выразить своё положительное отношение к размещённому на сайте материалу (статья, новость, видео...) в одно нажатие кнопки. Заголовок страницы, являющийся прямой ссылкой, вместе с описанием и фотографией попадают в Ленту – то есть сообщение об этом событии вместе со ссылкой видят все друзья этого человека на Одноклассниках.
Кнопка «Поделиться», также работающая в одно нажатие, позволяет посетителям вашего сайта разместить в Ленте на Одноклассниках ссылку на понравившийся им материал, без личной оценки этого материала.
Из всех кнопок, предлагаемых партнёрам Одноклассников, эти две, пожалуй, самые удобные для посетителей вашего сайта. Одно нажатие на кнопку – и все друзья уже видят в Ленте интересную ссылку. Закономерным результатом такого распространения ссылок на ваш сайт станет рост количества его посетителей.
Кнопка создаёт трафик на ваш сайт. Друзья пользователя, опубликовавшего страницу, увидят её в Ленте и перейдут по прямой ссылке. Более того, если друзьям статья понравилась, они нажмут на Одноклассниках на линк «Класс!», расположенный под записью о вашей статье в Ленте. В этом случае статья появится в их Ленте, и, в свою очередь, их друзья увидят статью. Таким образом, трафик на ваш сайт возрастает ещё больше
Пример кнопки Вконтакте:
Кнопка «Класс!» (без статистики):1. В заголовок страницы включить ссылки на Javascript и CSS файлы, находящиеся на серверах Одноклассников.
<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>
2.1. Вставить HTML код кнопки в удобное для вас место на странице. [Кнопка "Класс"]
<div style="float: left;">
<a class="odkl-klass-oc" href="Замените на АБСОЛЮТНЫЙ адрес страницы" onclick="ODKL.Share(this);return false;" ><span>0</span></a>
</div>
2.2. Вставить HTML код кнопки в удобное для вас место на странице. [Кнопка "Поделиться"]
<div style="float: left;">
<a class="odkl-share-oc" href="Замените на АБСОЛЮТНЫЙ адрес страницы" onclick="ODKL.Share(this);return false;" ><span>0</span></a>
</div>
3. После окончания загрузки страницы необходимо ОБЯЗАТЕЛЬНО вызвать ODKL.init();, например:
<body onload="ODKL.init();">
Для указания позиции кнопки на вашей странице используйте атрибут style элемента <div style="float: left;">.
Изменения внешнего вида кнопок «Класс!» и «Поделиться», работающих в одно нажатие, не предусмотрены.
Кнопка «Класс!» (со статистикой):1. В заголовок страницы включить ссылки на Javascript и CSS файлы, находящиеся на серверах Одноклассников.
<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>
2. Вставить HTML код кнопки в удобное для вас место на странице. [Кнопка "Класс"]
<a class="odkl-klass-stat" href="Абсолютный адрес страницы" onclick="ODKL.Share(this);return false;" ><span>0</span></a>
Код этой кнопки, в отличие от обычной кнопки «Класс!», модифицировать нельзя, всё, что находится внутри <a></a>, будет заменено.
Важно сохранить оригинальное имя класса CSS, так как оно используется как признак кнопки.
3. Чтобы появилась статистика, после окончания загрузки страницы необходимо ОБЯЗАТЕЛЬНО вызвать ODKL.init();, например:
<body onload="ODKL.init();">
Заголовок, описание и фотография на странице определяются автоматически.
Заголовок берётся из тэга <title>, описание из мета тэга description.
У вас есть возможность заменить картинку кнопки на другую, более удобную для вас. Для этого следует использовать скрипт и CSS с наших серверов. Свою картинку можно получить, переопределив два CSS правила на своей стороне:
<style type="text/css">
.odkl-klass, .odkl-klass:hover {background:none;}
.odkl-klass {background: url(http://www.ваш сайт/share/odkl.gif) no-repeat;}
</style>
Важно сохранить оригинальное имя класса CSS, так как оно используется как признак кнопки.
Кнопка Tweet.com
http://twitter.com/about/resources/tweetbutton
Добавьте эту кнопку на свой сайт, чтобы люди могли обмениваться информацией в Твиттере, не покидая вашей страницы. Сделайте вашу учётную запись популярнее и увеличивайте посещаемость сайта.
Пример кнопки Tweet:
Кнопка добавления в Twitter:
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="{ваш id в системе}" data-lang="ru">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
Кнопка добавления в Twitter для Wordpress (если вы используете GA.js):
<a rel="nofollow" target="_blank" onmouseup="javascript: pageTracker._trackPageview('/twitter-post');" href="http://twitter.com/home?status=RT {линк на ваш сайт}<?php the_title(); ?>: <?php the_permalink(); ?>" title="Добавить в Twitter"><img src="<?php bloginfo('template_url'); ?>/twitter.jpg" alt="Опубликовать в twitter" width="85" height="20"></a>
В код ссылки добавляется инструкция для Google analytics: onmouseup=”javascript: pageTracker._trackPageview(‘/twitter-post’);”
Записывать нажатие на кнопку твиттера как переход к странице /twitter-post
Кнопка добавления в Twitter для Wordpress (если вы используете Асинхронный код GA):
<a rel="nofollow" target="_blank" onmouseup="javascript:_gaq.push(['_trackPageview','/twitter-post']);" href="http://twitter.com/home?status=RT {линк на ваш сайт} <?php the_title(); ?>: <?php the_permalink(); ?>" title="Добавить в Twitter"><img src="<?php bloginfo('template_url'); ?>/twitter.jpg" alt="Опубликовать в twitter" width="85" height="20"></a>
Кнопка Мой Мир (mail.ru)
http://api.mail.ru/sites/plugins/share/
Кнопка «Нравится» позволяет всем пользователям отмечать и показывать друзьям интересные страницы. Описание страницы вместе с картинкой и прямой ссылкой на нее попадает в ленты новостей «Что нового» всех друзей поделившегося пользователя.
Профит сайту: трафик. Друзья поделившегося пользователя переходят по ссылкам из «Что нового» на ваш сайт.
Пример кнопки Мой Мир (mail.ru):
Кнопка добавления в Мой Мир:
<a target="_blank" class="mrc__plugin_like_button" href="http://connect.mail.ru/share" data-mrc-config="{'type' : 'button', 'width' : '150'}">Нравится</a>
<script src="http://cdn.connect.mail.ru/js/loader.js" type="text/javascript" charset="UTF-8"></script>
Мы предложим пользователю поделиться той страницей, на которой расположена кнопка. Поэтому указывайте URL только если кнопка располагается на другой странице, например, на странице списка статей когда вы хотите чтобы пользователи делились конкретными статьями.
Ширина плагина по-умолчанию считается в пикселях. Но вы можете указать, например, 70% или 15em.
Мы сами определяем заголовок и описание вашей страницы, а так же соответствующую картинку. Узнайте про дополнительные возможности по улучшению представления ваших страниц в Моем Мире и возможности изменения кнопки в детальной документации.
Кнопка добавления в Мой Мир для Wordpress (если вы используете GA.js):
<a href="http://connect.mail.ru/share?share_url=<?php the_permalink(); ?>" target="_blank" rel="nofollow" onmouseup="javascript: pageTracker._trackPageview('/moimir-post');"><img src="<?php bloginfo('template_url'); ?>/images/moimir.jpg" width="84" height="18" title="Добавить в Мой мир"></a>
В код ссылки добавляется инструкция для Google analytics: onmouseup=”javascript: pageTracker._trackPageview(‘/twitter-post’);”
Записывать нажатие на кнопку твиттера как переход к странице /twitter-post
Кнопка добавления в Мой Мир для Wordpress (если вы используете Асинхронный код GA):
<a href="http://connect.mail.ru/share?share_url=<?php the_permalink(); ?>" target="_blank" rel="nofollow" onmouseup="javascript:_gaq.push(['_trackPageview','/moimir-post']);"><img src="<?php bloginfo('template_url'); ?>/images/moimir.jpg" width="84" height="18" title="Добавить в Мой мир"></a>
Кнопка Google Buzz
http://www.google.com/buzz/api/admin/configPostWidget
Помогите людям доля материал с вашего сайта в Google Buzz.
Профит сайту: трафик. Друзья поделившегося пользователя переходят по ссылкам из службы на ваш сайт.
Пример кнопки Google Buzz:
Кнопка добавления в Google Buzz:
<a title="Post to Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="small-count"></a>
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>
Кнопка добавления в Google Buzz для Wordpress (если вы используете GA.js):
<a href="http://www.google.com/reader/link?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>&srcURL=http://blog.mokoron.com/" target="_blank" rel="nofollow" onmouseup="javascript: pageTracker._trackPageview('/buzz-post');"><img src="<?php bloginfo('template_url'); ?>/images/buzz.jpg" width="84" height="18" title="Добавить в Google Buzz"></a>
В код ссылки добавляется инструкция для Google analytics: onmouseup=”javascript: pageTracker._trackPageview(‘/twitter-post’);”
Записывать нажатие на кнопку твиттера как переход к странице /twitter-post
Кнопка добавления в Google Buzz для Wordpress (если вы используете Асинхронный код GA):
<a href="http://www.google.com/reader/link?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>&srcURL=http://blog.mokoron.com/" target="_blank" rel="nofollow" onmouseup="javascript:_gaq.push(['_trackPageview','/buzz-post']);"><img src="<?php bloginfo('template_url'); ?>/images/buzz.jpg" width="84" height="18" title="Добавить в Google Buzz"></a>
Кнопка LiveJournal
Помогите людям доля материал с вашего сайта в LiveJournal.
Профит сайту: трафик. Друзья поделившегося пользователя переходят по ссылкам из службы на ваш сайт.
Так сложилось, что у ЖЖ нет официальной Share Button, по этому, что бы пользователи могли публиковать ссылки на вашу статью у себя, есть несколько способов.
Пример кнопки LiveJournal:
Кнопка добавления в LiveJournal:
<a rel="nofollow" target="_blank" href="http://www.livejournal.com/update.bml?event=URL_СТРАНИЦЫ&subject=ЗАГОЛОВОК">
<img src="ПУТЬ_ИКОНКИ" width="48" height="48" title="Поделиться в Livejournal" alt="Поделиться в Livejournal" />
</a>
Кнопка добавления в LiveJournal для Wordpress (если вы используете GA.js):
<a href="http://www.livejournal.com/update.bml?event=<?php the_permalink(); ?>&subject=<?php the_title(); ?>" target="_blank" rel="nofollow" onmouseup="javascript: pageTracker._trackPageview('/lj-post');"><img src="<?php bloginfo('template_url'); ?>/images/lj.jpg" width="84" height="18" title="Опубликовать в жж"></a>
В код ссылки добавляется инструкция для Google analytics: onmouseup=”javascript: pageTracker._trackPageview(‘/twitter-post’);”
Записывать нажатие на кнопку твиттера как переход к странице /twitter-post
Кнопка добавления в LiveJournal для Wordpress (если вы используете Асинхронный код GA):
<a href="http://www.livejournal.com/update.bml?event=<?php the_permalink(); ?>&subject=<?php the_title(); ?>" target="_blank" rel="nofollow" onmouseup="javascript:_gaq.push(['_trackPageview','/lj-post']);"><img src="<?php bloginfo('template_url'); ?>/images/lj.jpg" width="84" height="18" title="Опубликовать в жж">
Кнопка FriendFeed
Помогите людям доля материал с вашего сайта в FriendFeed.
Профит сайту: трафик. Друзья поделившегося пользователя переходят по ссылкам из службы на ваш сайт.
В социальной сети FriendFeed, нет кнопки поделиться ссылкой, но есть 2 способа поделиться ссылкой: JavaScript-закладка (которая по сути является скриптом) и ссылка — FriendFeed share button.
Пример кнопки FriendFeed:
JavaScript-закладка добавления в FriendFeed:
- Пользователь размещает JavaScript-закладку в своем браузере
- На понравившейся странице пользователь нажимает на закладку
- Подгружается скрипт FriendFeed
- Появляется окошко с текстом и кнопкой разместить «в моем канале»
Лично мне этот способ не нравится. Скрипт подгружается, пользователь ждет, слой вылезает в верхнем правом углу в виде окошка.
FriendFeed share button добавления в FriendFeed:
Во FriendFeed можно перейти по ссылке с определенными GET-параметрами и данные в форме будут заполнены автоматически.
Формат ссылки: http://friendfeed.com/?url=АДРЕС_СТРАНИЦЫ&title=ЗАГОЛОВОК
Параметры: url — адрес страницы. и title — заголовок.
<a href="http://friendfeed.com/?url={линк на ваш сайт}" style="text-decoration:none;"><img src="http://www.shram.kiev.ua/img/talk/share/friendfeed.gif" alt="FriendFeed Share Button" align="middle" border="0"><ins>поделиться ссылкой</ins></a>
Кнопка Google +1
http://www.google.com/webmasters/+1/button/index.html
Что дает кнопка Google +1? Например, посетителям вашего сайта понравилась какая-либо статья (новость, страница товара, услуги и т.д.). Если вы предусмотрительно добавите кнопку Google +1 на страницы своего сайта, то посетители смогут кликнуть по ней на понравившейся странице.
Что происходит дальше? А дальше друзья ваших читателей в результатах поиска Google будут видеть, кто уже поделился какой-либо страницей. Кроме этого, вы сможете видеть отметки о страницах, за которые вы сами голосовали, то есть будет проще искать нужную информацию.
То есть суть кнопки Google +1 такая же, как и других социальных кнопок - помогать пользователям распространять понравившуюся им информацию.
Итак, приступим. За кодом кнопки идем на эту страницу. Там выбираем нужный язык и желаемый размер кнопки:
Сообщение о том, что «Рекомендации +1 в настоящее время доступны только на английском языке (США) в домене Google.com» нас не смущает - в ближайшее время все будет доступно на всех языках.
Приведу таблицу с размерами кнопки Гугл Плюс Один:
Если необходимо, раскрываем расширенные настройки кнопки Google +1, чтобы, например, убрать счетчик:
Я счетчик оставлю, так как мне интересно, сколько посетителей будет кликать по новой социальной кнопке от Google.
В следующем поле копируем предложенный код кнопки Google +1:
>Как понятно из комментария, первую часть кода нужно вставить в пределах тега <head> или до закрывающего тега </body> в HTML коде вашего сайта. Вторую часть кода - непосредственно в том месте, где будет выводиться кнопка Google +1 на вашем сайте.
В случае с блогом Wordpress первую часть кода нужно вставить в файл header.php в папке с темой вашего блога, вторую - в файл single.php (в некоторых темах такого файла нет, поэтому нужно будет вставлять в index.php) в той же папке. Я разместил кнопку после содержимого статей (то есть после кода <?php the_content; ?>).
Собственные социальные кнопки
Ниже выложен код социальных кнопок, где можно использовать для каждой кнопки любую собственную картинку
<!--Begin Vkontakte Share Button--> <a rel="nofollow" target="_blank" href="http://vkontakte.ru/share.php?url=URL_СТРАНИЦЫ" > <img src="ПУТЬ_ИКОНКИ" width="48" height="48" title="Поделиться ВКонтакте" alt="Поделиться ВКонтакте" /> </a> <!--End Vkontakte Share Button--> <!--Begin Odnoklassniki Share Button--> <a rel="nofollow" target="_blank" href="http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=URL_СТРАНИЦЫ" > <img src="ПУТЬ_ИКОНКИ" width="48" height="48" title="Поделиться в Одноклассниках" alt="Поделиться в Одноклассниках" /> </a> <!--End Odnoklassniki Share Button--> <!--Begin Facebook Share Button--> <a rel="nofollow" target="_blank" href="http://www.facebook.com/sharer.php?u=URL_СТРАНИЦЫ" > <img src="ПУТЬ_ИКОНКИ" width="48" height="48" title="Поделиться в Facebook" alt="Поделиться в Facebook" /> </a> <!--End Facebook Share Button--> <!--Begin Twitter Share Button--> <a rel="nofollow" target="_blank" href="http://twitter.com/share?&text=Заголовок%20-%20&url=URL_СТРАНИЦЫ&via=ВАШ ЛОГИН" > <img src="ПУТЬ_ИКОНКИ" width="48" height="48" title="Поделиться в Twitter" alt="Поделиться в Twitter" /> </a> <!--End Twitter Share Button--> <!--Begin Mail.ru Share Button--> <a rel="nofollow" target="_blank" href="http://connect.mail.ru/share?share_url=URL_СТРАНИЦЫ" > <img src="ПУТЬ_ИКОНКИ" width="48" height="48" title="Поделиться в Mail.ru" alt="Поделиться в Mail.ru" /> </a> <!--End Mail.ru Share Button--> <!--Begin Livejournal Share Button--> <a rel="nofollow" target="_blank" href="http://www.livejournal.com/update.bml?event=URL_СТРАНИЦЫ&subject=ЗАГОЛОВОК"> <img src="ПУТЬ_ИКОНКИ" width="48" height="48" title="Поделиться в Livejournal" alt="Поделиться в Livejournal" /> </a> <!--End Livejournal Share Button--> <!--Begin Google-Buzz Share Button--> <a rel="nofollow" target="_blank" href="http://www.google.com/buzz/post?message=ЗАГОЛОВОК&url=URL_СТРАНИЦЫ"> <img src="ПУТЬ_ИКОНКИ" width="48" height="48" title="Поделиться в Google-Buzz" alt="Поделиться в Google-Buzz" /> </a> <!--End Google-Buzz Share Button-->
