Войти через VK Войти через FB Войти через Google Войти через Яндекс
Поиск по сайту
PHP Поиск
Добавление кнопок социальных сетей себе на сайт
При создании новостного портала или просто блога с интересными заметками, для увеличения количества реальных посетителей, я рекомендую разместить кнопки добавления в популярные социальные сети: Однокласники, Вконтакте, Twitter, Facebook, LiveJournal и другие.
Для добавления каждой кнопочки приходится перечитать гору документации. Здесь в одной статье я собрал все свои поиски.
Адрес перехода на Twitter:
http://twitter.com/timeline/home?status=__ЗАГОЛОВОК_СТРАНИЦЫ__%20__АДРЕС__
Пример ссылки:
<a href="#"
onclick="this.href='http://twitter.com/timeline/home?status='+document.title+'%20'+window.location.href+window.location.hash">
Добавить в Twitter</a>
Обратите внимание, что длина сообщения не должна превышать 140 символов.
“Твит” с ссылкой на страницу и дополнительным текстом.
<a href="#"
onclick="this.href='http://twitter.com/share?text='+document.title+'&url='+window.location.href+window.location.hash+'&via=+ссылка на Twitter-аккаунт, например официальный канал сайта">
Twitter-нуть</a>
Документация Twitter-API-Documentation, Application-Ideas.
Иконки:
Адрес перехода на Facebook:
http://www.facebook.com/share.php?u=__АДРЕС__
Пример ссылки:
<a href="#"
onclick="this.href='http://www.facebook.com/share.php?u='+window.location.href+window.location.hash">
Добавить в Facebook</a>
Если Вы хотите не поделиться, а только Like-нуть то ссылка:
<a href="#"
onclick="this.href='http://www.facebook.com/plugins/like.php?u='+window.location.href+window.location.hash">
Like в Facebook</a>
Документация Specifying_Meta_Tags, Facebook_Share. Использование meta тегов на странице для задания параметров шаринга описано в Open Graph Protocol.
Иконки:
VK- Вконтакте
Адрес перехода на vk.ru:
https://vk.com/share.php?url=__АДРЕС__&title=__ЗАГОЛОВОК_СТРАНИЦЫ__&image=URL на картинку
Пример ссылки:
<a href="#"
onclick="this.href='https://vk.com/share.php?url='+window.location.href+window.location.hash+'&title='+document.title">
Добавить в ВКонтакт</a>
Если на странице присутствуют соответствующие теги, то информация берется из них:
- Заголовок: <meta name="title" content="...">, если его нет то из тега <title>.
- Описание: <meta name="description" content="...">.
- Картинка: <link rel="image_src" href="...">, если его нет, то первые 8 тегов <img src="..."> на странице не превышающие 100x100.
Документация Документация » Сайты » Публикация ссылок, Документация » Сайты » Open API.
Иконки:
LiveJournal
Адрес перехода на LiveJournal:
http://www.livejournal.com/update.bml?mode=full&subject=test&event=__АДРЕС__
Пример ссылки:
<a href="#"
onclick="this.href='http://www.livejournal.com/update.bml?mode=full&subject=test&event='+window.location.href+window.location.hash">
Добавить в LiveJournal</a>
Документация lj_dev.
Иконки:
Адрес перехода на LinkedIn:
http://www.linkedin.com/shareArticle?mini=true&url=__АДРЕС__&title=__ЗАГОЛОВОК_СТРАНИЦЫ__&source=htmlweb.ru
Документация docs.
Buzz
Адрес перехода на Buzz:
http://www.google.com/buzz/post?message=__ЗАГОЛОВОК_СТРАНИЦЫ__&url=__АДРЕС__&hl=ru
Документация apis.
Pinterest Pin
Поделиться медиа-файлом и URL на Pinterest.
http://www.pinterest.com/pin/create/button/?url=url&media=URL на картинку или видео&description=Описание страницы сайта
Surfingbird Surf!
Поделиться (“расшарить”) URL. Имейте ввиду, что Surfingbird не парсит предоставленный URL-страницы, все параметры ниже обязательны к заполнению.
http://surfingbird.ru/share?url=url&title=Название страницы сайта&description=Описание страницы сайта&screenshot=URL на изображение со скриншотом сайта
Яндекс
Адрес перехода на Яндекс:
http://wow.ya.ru/posts_share_link.xml?url=__АДРЕС__&title=__ЗАГОЛОВОК_СТРАНИЦЫ__&body=__ЧАСТЬ_СТРАНИЦЫ__
<script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script> <div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="button" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,lj,friendfeed,moikrug"> </div>
Документация share, блок "поделиться".
Иконки:
Мой мир
Адрес перехода на Мой мир:
http://connect.mail.ru/share?url=__АДРЕС__&title=__ЗАГОЛОВОК_СТРАНИЦЫ__&description=&imageurl=
<a target="_blank" class="mrc__plugin_like_button" href="http://connect.mail.ru/share" data-mrc-config="{'type' : 'button', 'width' : '550', 'show_text' : 'true', 'show_faces' : 'true'}">Нравится</a> <script src="http://cdn.connect.mail.ru/js/loader.js" type="text/javascript" charset="UTF-8"></script>
Документация share, кнопка "нравится".
Иконки:
Google Plus
+1 к URL
https://apis.google.com/_/+1/fastbutton?url=url &usegapi — Принимает значения true/false. Используется для включения/выключения показа дополнительного окна “расшарить” &size — Принимает значения: small, medium, standard (по умолчанию), tall &hl — Язык, список доступных языков С полным списком принимаемых параметров можно ознакомится — тут https://developers.google.com/+/web/+1button/#tag_parametersПоделиться (“расшарить”) URL.
https://plus.google.com/share?url=Счетчик поделившихся
Если Вы хотите добавить счетчик поделившихся, используйте следующее решение:
<style>
.share-button-container{
text-align:center;
margin: 20px 0;
padding: 10px 0;
border-top: solid 1px #e4e4e4;
border-bottom: solid 1px #e4e4e4;
}
.share-button-container p{
margin:0 0 10px 0;
font-weight:700;
}
.share-button {
margin-left: 20px;
}
.share-button a{
text-decoration:none;
}
.share-button, .share-button .count{
display:inline-block;
}
.share-button .count, .share-button .share {
font-family:"Helvetica Neue";
font-weight:700;
text-decoration:none;
text-align:center;
}
.share-button .count {
background-color:#F1F3F6;
color:#333;
font-size:12px;
line-height:25px;
margin-left:4px;
text-transform:uppercase;
min-width:40px;
}
.share-button .share {
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
color:#FFF;
display:inline;
font-size:13px;
width:40px;
padding:4px 8px;
}
.share-button-twitter .share {
background-color:#00ABF0;
}
.share-button-facebook .share {
background-color:#3b5998;
}
.share-button-googleplus .share {
background-color:#F53424;
}
.share-button-twitter .share:active,.share-button-facebook .share:active,.share-button-googleplus .share:active {
background-color:#353535;
}
/* Responsive */
@media (max-width: 925px) {
.share-button .share{
font-size:15px;
padding: 8px 16px; /* Double the padding */
}
.share-button .count{
font-size:14px;
line-height: 32px;
}
}
</style>
<div class='share-button-container'>
<p>Понравилось? Поделись!</p>
<div class='share-button share-button-twitter' data-share-url="http://htmlweb.ru">
<div class='box'>
<a href="https://twitter.com/share?url=http://htmlweb.ru&text=Static%20Buttons&via=Xafke" target='_blank'>
<span class='share'>Твитнуть</span>
<span class='count'>0</span>
</a>
</div>
</div>
<div class="share-button share-button-facebook" data-share-url="http://htmlweb.ru">
<div class="box">
<a href="https://www.facebook.com/sharer/sharer.php?u=http://htmlweb.ru">
<span class='share'>Поделиться в FaceBook</span>
<span class='count'>0</span>
</a>
</div>
</div>
</div>
<script>
var StaticShareButtons = {
twitterButton: document.querySelector('.share-button-twitter'),
facebookButton: document.querySelector('.share-button-facebook'),
init: function(){
this.injectScript('http://urls.api.twitter.com/1/urls/count.json?url=' +
escape(this.twitterButton.dataset.shareUrl) + '&callback=' + 'StaticShareButtons.processTwitter');
this.injectScript('http://graph.facebook.com/?id='+
escape(this.facebookButton.dataset.shareUrl) +'&callback=StaticShareButtons.processFacebook');
},
injectScript: function(url){
var script = document.createElement('script');
script.async = true;
script.src = url;
document.body.appendChild(script);
},
processTwitter: function(data){
if(data.count != undefined){
this.twitterButton.querySelector('.count').innerHTML = data.count;
}
},
processFacebook: function(data){
if(data.shares != undefined){
this.facebookButton.querySelector('.count').innerHTML = data.shares;
}
}
};
StaticShareButtons.init();
</script>
Готовый блок кода:

<script language="JavaScript"><!--
function addSoc(a) {
h=encodeURIComponent(window.location.href+window.location.hash);
t=encodeURIComponent(document.title);
if(a==1)h='vkontakte.ru/share.php?url='+h+'&title='+t;
else if(a==2)h='odnoklassniki.ru/dk?st.cmd=addShare&st.s=1000&st._surl='+h+'&tkn=3009';
else if(a==3)h='www.livejournal.com/update.bml?mode=full&subject='+t+'&event='+h;
else if(a==4)h='twitter.com/timeline/home?status='+t+'%20'+h;
else if(a==5)h='www.facebook.com/share.php?u='+h;
else if(a==6)h='wow.ya.ru/posts_share_link.xml?url='+h+'&title='+t;
else if(a==7)h='connect.mail.ru/share?url='+h+'&title='+t+'&description=&imageurl=';
else if(a==8)h='moikrug.ru/share?ie=utf-8&url='+h+'&title='+t+'&description=';
else return;
window.open('http://'+h,'Soc','screenX=100,screenY=100,height=500,width=500,location=no,toolbar=no,directories=no,menubar=no,status=no');
return false;
//--></script>
<a href="#" onclick="return addSoc(1);" title="Twitter"><img src="/pic/ico_twitter.gif" width=8 height=12></a>
<a href="#" onclick="return addSoc(2);" title="Facebook"><img src="/pic/ico_facebook.gif" width=12 height=12></a>
<a href="#" onclick="return addSoc(3);" title="Vkontakte"><img src="/pic/ico_vk.gif" width=12 height=12></a>
<a href="#" onclick="return addSoc(4);" title="Одноклассники.ru"><img src="/pic/ico_odno.gif" width=12 height=12></a>
<a href="#" onclick="return addSoc(5);" title="livejournal"><img src="/pic/ico_lj.png" width=12 height=12></a>
<a href="#" onclick="return addSoc(6);" title="Яндекс"><img src="/pic/ico_ya.png" width=12 height=12></a>
<a href="#" onclick="return addSoc(7);" title="Мой мир"><img src="/pic/ico_mymail.gif" width=12 height=12></a>
Более сложное, но красивое решение.
Здесь все иконки собраны в один файл и отображаются отдельные куски с помощью таблицы стилей. Такое решение гораздо быстрее отрабатывает, т.к. не застравляет браузер обращаться на сервер для подгрузки каждого отдельного изображения.
Представлено два варианта с иконками:
16x16:12x12:
<style type="text/css">
.social-net-buttons-16 a{
background-image: url(/pic/social-net-16.png);
width: 16px;
height: 16px;
display: block;
float: left;
margin-right: 5px;
}
.social-net-buttons-16 a.icon-vk-16{background-position: 0 0;}
.social-net-buttons-16 a.icon-ok-16{background-position: 0 -16px;}
.social-net-buttons-16 a.icon-lj-16{background-position: 0 -32px;}
.social-net-buttons-16 a.icon-twitter-16{background-position: 0 -48px;}
.social-net-buttons-16 a.icon-facebook-16{background-position: 0 -64px;}
.social-net-buttons-16 a.icon-yaru-16{background-position: 0 -80px;}
.social-net-buttons-16 a.icon-moimir-16{background-position: 0 -96px;}
.social-net-buttons-16 a.icon-moikrug-16{background-position: 0 -112px;}
.social-net-buttons-12 a{
background-image: url(/pic/social-net-12.png);
width: 12px;
height: 12px;
display: block;
float: left;
margin-right: 5px;
}
.social-net-buttons-12 a.icon-vk-12{background-position: 0 0;}
.social-net-buttons-12 a.icon-ok-12{background-position: 0 -12px;}
.social-net-buttons-12 a.icon-lj-12{background-position: 0 -24px;}
.social-net-buttons-12 a.icon-twitter-12{background-position: 0 -36px;}
.social-net-buttons-12 a.icon-facebook-12{background-position: 0 -48px;}
.social-net-buttons-12 a.icon-yaru-12{background-position: 0 -60px;}
.social-net-buttons-12 a.icon-moimir-12{background-position: 0 -72px;}
.social-net-buttons-12 a.icon-moikrug-12{background-position: 0 -84px;}
</style>
<div class="social-net-buttons-16">
<a href="#" onclick="return addSoc(1);" title="Vkontakte" class="icon-vk-16"></a>
<a href="#" onclick="return addSoc(2);" title="Одноклассники.ru" class="icon-ok-16"></a>
<a href="#" onclick="return addSoc(3);" title="livejournal" class="icon-lj-16"></a>
<a href="#" onclick="return addSoc(4);" title="Twitter" class="icon-twitter-16"></a>
<a href="#" onclick="return addSoc(5);" title="Facebook" class="icon-facebook-16"></a>
<a href="#" onclick="return addSoc(6);" title="Я.ру" class="icon-yaru-16"></a>
<a href="#" onclick="return addSoc(7);" title="Мой Мир" class="icon-moimir-16"></a>
<a href="#" onclick="return addSoc(8);" title="Мой Круг" class="icon-moikrug-16"></a>
</div>
<br />
<div class="social-net-buttons-12">
<a href="#" onclick="return addSoc(1);" title="Vkontakte" class="icon-vk-12"></a>
<a href="#" onclick="return addSoc(2);" title="Одноклассники.ru" class="icon-ok-12"></a>
<a href="#" onclick="return addSoc(3);" title="livejournal" class="icon-lj-12"></a>
<a href="#" onclick="return addSoc(4);" title="Twitter" class="icon-twitter-12"></a>
<a href="#" onclick="return addSoc(5);" title="Facebook" class="icon-facebook-12"></a>
<a href="#" onclick="return addSoc(6);" title="Я.ру" class="icon-yaru-12"></a>
<a href="#" onclick="return addSoc(7);" title="Мой Мир" class="icon-moimir-12"></a>
<a href="#" onclick="return addSoc(8);" title="Мой Круг" class="icon-moikrug-12"></a>
</div>
</br>
Яндекс предлагает готовый скрипт для блока "Поделиться". Но незабывайте, что используя скрипты от яндекса, Вы также делитесь с ним всем своим внутренним "хозяйством".
Всего за 250 рублей Вы можете получить представленные здесь примеры в виде одного архива со всеми иконками и стилями.
Регистрация Войти Войти через VK Войти через FB Войти через Google.
Прокомментировать/Отблагодарить
Популярное:
- Анализ сайта
- Проверка email
- Чей IP-адрес?
- Чей домен?
- Где телефон?
- Генератор Sitemap
- Примеры Ajax
- Примеры PHP
- Примеры Javascript
- Примеры HTML, CSS
- Бесплатные прокси
- GEO-сервисы
- Сайт в ТОП (SEO)
- Полезные ссылки
- Генератор Robots.txt
Содержание:
- HTML
- Что такое HTML
- <!DOCTYPE>
- Мета теги в <head>
- Тег <base>
- Текст в html
- HTML списки
- Ссылки
- Картинки на сайте
- Таблицы
- Фреймы
- Формы
- DHTML
- Музыка
- Видео
- Карты изображений
- SVG карты
- Графика в HTML
- SSI .shtml
- Таблица цветов RGB
- Правильное
сочетание цветов - Таблица
«безопасных»
цветов - Таблица символов
- Примеры HTML, CSS
- CSS
- JavaScript
- PHP + MySQL
- Введение в PHP
- Основы языка
- Использование
массивов - $_server
- Создание функций
- Строки
- Функции работы
со строками - Объектное
программирование - Формы
- Файлы
- Загрузка файлов
на сервер - MySQL
- Cookie
- htaccess
- Безопасность
- Сессии
- Отправка почты
- Кэширование
- Дата, время
- Математические
функции - Дополнительные
возможности - Регулярные
выражения - Библиотека Curl
- IMAP, POP3, NNTP
- Оптимизация
- Примеры скриптов
- XML + XSLT
- AJAX
- Графика CorelDRAW
- SEO
- Сервисы
- Разное
- Движки сайтов (CMS)
- Регистрация
доменов и хостинг - Заработок для
web-мастеров - Хостинг
- Настройка DNS
- ADSL
- RSS
- ActiveX и HTML
- Паролирование
страницы - HTTP коды
- HTTP протокол
- HTTP заголовки
- Прячем ссылки
- ☠ Черный список
сайтов - ☭ Заработок
в интернете - Термины и
определения - Продажа доменов
- ✉ Настройки
Яндекс-почты - Кнопки социалок
- ☎ Настроки SIP
в телефоне - Создание
поискового плугина - Сервис
коротких ссылок - Telegram: бот, ссылки
- Шаблоны сайтов
- Друзья
- Задания к л/р
- Примеры
зачетных задач
- Статьи, обзоры
- Новости