Пример кнопок
btn-adn |
<a class="btn btn-block btn-social btn-adn"> <span class="fa fa-adn"></span> Sing in with App.net </a> |
|
btn-bitbucket |
<a class="btn btn-block btn-social btn-bitbucket"> <span class="fa fa-bitbucket"></span> ... Bitbucket </a> |
|
btn-dropbox |
<a class="btn btn-block btn-social btn-dropbox"> <span class="fa fa-dropbox"></span> ... Dropbox </a> |
|
btn-facebook |
<a class="btn btn-block btn-social btn-facebook"> <span class="fa fa-facebook"></span> ... Facebook </a> |
|
btn-flickr |
<a class="btn btn-block btn-social btn-flickr"> <span class="fa fa-flickr"></span> ... Flickr </a> |
|
btn-foursquare |
<a class="btn btn-block btn-social btn-foursquare"> <span class="fa fa-foursquare"></span> ... Foursquare </a> |
|
btn-github |
<a class="btn btn-block btn-social btn-github"> <span class="fa fa-github"></span> ... Github </a> |
|
btn-google |
<a class="btn btn-block btn-social btn-google"> <span class="fa fa-google"></span> ... Google </a> |
|
btn-instagram |
<a class="btn btn-block btn-social btn-instagram"> <span class="fa fa-instagram"></span> ... Instagram </a> |
|
btn-linkedin |
<a class="btn btn-block btn-social btn-linkedin"> <span class="fa fa-linkedin"></span> ... LinkedIn </a> |
|
btn-microsoft |
<a class="btn btn-block btn-social btn-microsoft"> <span class="fa fa-microsoft"></span> ... Microsoft </a> |
|
btn-odnoklassniki |
<a class="btn btn-block btn-social btn-odnoklassniki"> <span class="fa fa-odnoklassniki"></span> ... Odnoklassniki </a> |
|
btn-openid |
<a class="btn btn-block btn-social btn-openid"> <span class="fa fa-openid"></span> ... OpenID </a> |
|
btn-pinterest |
<a class="btn btn-block btn-social btn-pinterest"> <span class="fa fa-pinterest"></span> ... Pinterest </a> |
|
btn-reddit |
<a class="btn btn-block btn-social btn-reddit"> <span class="fa fa-reddit"></span> ... Reddit </a> |
|
btn-soundcloud |
<a class="btn btn-block btn-social btn-soundcloud"> <span class="fa fa-soundcloud"></span> ... Soundcloud </a> |
|
btn-tumblr |
<a class="btn btn-block btn-social btn-tumblr"> <span class="fa fa-tumblr"></span> ... Tumblr </a> |
|
btn-twitter |
<a class="btn btn-block btn-social btn-twitter"> <span class="fa fa-twitter"></span> ... Twitter </a> |
|
btn-vimeo |
<a class="btn btn-block btn-social btn-vimeo"> <span class="fa fa-vimeo"></span> ... Vimeo </a> |
|
btn-vk |
<a class="btn btn-block btn-social btn-vk"> <span class="fa fa-vk"></span> ... VK </a> |
|
btn-yahoo |
<a class="btn btn-block btn-social btn-yahoo"> <span class="fa fa-yahoo"></span> ... Yahoo! </a> |
Вариации размеров
<a class="btn btn-block btn-social btn-facebook btn-lg"> <span class="fa fa-facebook"></span> Sing in with Facebook </a> | |
<a class="btn btn-block btn-social btn-facebook"> <span class="fa fa-facebook"></span> Sing in with Facebook </a> | |
<a class="btn btn-block btn-social btn-facebook btn-sm"> <span class="fa fa-facebook"></span> Sing in with Facebook </a> | |
<a class="btn btn-block btn-social btn-facebook btn-xs"> <span class="fa fa-facebook"></span> Sing in with Facebook </a> | |
<a class="btn btn-social-icon btn-lg btn-facebook"> <span class="fa fa-facebook"></span> </a> | |
<a class="btn btn-social-icon btn-facebook"> <span class="fa fa-facebook"></span> </a> | |
<a class="btn btn-social-icon btn-sm btn-facebook"> <span class="fa fa-facebook"></span> </a> | |
<a class="btn btn-social-icon btn-xs btn-facebook"> <span class="fa fa-facebook"></span> </a> |
Как использовать
1. Подключите Bootstrap и Font Awesome к вашему проекту
<link href="/path/to/css/bootstrap.min.css" rel="stylesheet"> <link href="/path/to/css/font-awesome.css" rel="stylesheet">
2. Подключите CSS bootstrap-social.css
<link rel="stylesheet" type="text/css" href="/path/to/css/bootstrap-social.css" />
3. Добавте кнопки:
<a class="btn btn-block btn-social btn-facebook"> <span class="fa fa-facebook"></span> Sing in with Facebook </a>
или иконки:
<a class="btn btn-social-icon btn-facebook"> <span class="fa fa-facebook"></span> </a>
Сайт плагина: http://lipis.github.io/bootstrap-social/
Комментарии
Все делал, как тут написано. Сами кнопки получились, а в сети они не переводят(( Что не так? Или надо что-то еще дополнительно подключить? Спасибо.
ОтветитьВсе верно. Это просто шаблоны кнопок. А как вы будете их использовать зависит только от вас. Например для отправки на страницу в соц. сети, авторизацию через эту соц. сеть или как кнопку "поделиться". Соответственно для каждой кнопки свои настройки
ОтветитьСпасибо большое за такой оперативный ответ! А у Вас случайно нет примера, как это сделать? Просто сами сети все дают в скриптах, запутанно, какие ссылки брать...
Ответитьfb с текущей страницы:
Ответить<a class="btn btn-social-icon btn-facebook btn-sm" href="www.facebook.com/sharer.php?u=//xn--d1acnqm.xn--j1amh/%d0%b7%d0%b0%d0%bf%d0%b8%d1%81%d0%b8/bootstrap-3-%d0%b4%d0%be%d0%b1%d0%b0%d0%b2%d0%bb%d1%8f%d0%b5%d0%bc-%d0%b8%d0%ba%d0%be%d0%bd%d0%ba%d0%b8-%d0%b8-%d0%ba%d0%bd%d0%be%d0%bf%d0%ba%d0%b8-%d1%81%d0%be%d1%86%d0%b8%d0%b0%d0%bb%d1%8c%d0%bd%d1%8b%d1%85-%d1%81%d0%b5%d1%82%d0%b5%d0%b9" target="_blank" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" title="Опубликовать ссылку в Facebook">
<span class="fa fa-facebook"></span>
</a>
Лучше читать документацию по api нужной соц. сети
Спасибо большое за помощь! Буду разбираться!
ОтветитьСпасибо за статью!
Ответитьmail.ru и yandex почему нет?
Ответитьсолидарен с вопрошающим
Ответитьяндекс у нас в Украине запрещен, так как это гс
ОтветитьСпасибо за статью, Кодер.Укр !
ОтветитьСпасибо, с меня лайк!
ОтветитьА какой код для youtube? Или он не социальная сеть?
Ответить