Установить свой социальные кнопки на сайт
 | |
| В этом материале разберем как становить кнопки социальных сетей на сайт. Которые будут на шрифтовых иконках и работать по вызову окна. Многие ставят на сайт социальные кнопки от сервис, это Яндекс поделиться и многие другие сайты, что предоставляют коды на эту функцию. Здесь же мы сами поставим свои кнопки, которые не будут не от кого зависеть и ссылаться, а работать на сайте автономно. То бывает такое, что где взяли скрипт кнопок и этот сайт завис или нет на его доступа, то все эти кнопки не отображаются и страницы где они находятся долго загружаются. Что пришлось на сайт один установить кнопки, которые и по дизайн красивые, так как они идут квадратные и небольшим закруглением углов. А вот само изображение или логотип, здесь мы прописываем классы от шрифтовых иконок, что вы можете сами какие нужно также добавить на сайт по социальным порталам. Здесь в коде будут прописаны основные сайты, это в контакте, Twitter, Google plus, Facebook и одноклассники. Но главное мы не будем ставить ссылку, что по клику будет появляться небольшое окно, а не на весь экран, все разберем в статье. Но если вы решили поставить от сервис, так как там меньше код идет, то рекомендую Яндекс поделиться, так как этот код не замечал что зависает. Вот как пример этих кнопок, которые установлены в низ сайта, что отлично по дизайн и стилистике подошли.  Чтоб отображались кнопки с изображение, нужно вверх сайта подключить шрифтовые иконки. Код <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> Этот код ставим там где хотите его видеть. Код <ul class="social-list"> <li> <a class="social_share vk" data-type="vk" style="cursor:pointer;" rel="nofollow"><span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-vk fa-stack-1x"></i> </span></a> </li> <li> <a class="social_share fb" data-type="fb" style="cursor:pointer;" rel="nofollow"><span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-facebook fa-stack-1x"></i> </span></a> </li> <li> <a class="social_share gg" data-type="gg" style="cursor:pointer;" rel="nofollow"><span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-google-plus fa-stack-1x"></i> </span></a> </li> <li> <a class="social_share tw" data-type="tw" style="cursor:pointer;" rel="nofollow"><span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-twitter fa-stack-1x"></i> </span></a> </li> <li> <a href="#"><span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-odnoklassniki fa-stack-1x"></i> </span></a> </li> </ul> И в низ сайта разместить этот код, что отвечает за все функций работы кнопок. Код <script type="text/javascript" src="http://zornet.ru/Aben/ABGEA/Rin/buttons.js"></script> <script type="text/javascript"> $(document).on('click', '.social_share', function(){ Share.go(this); }); </script> Все установка закончена, здесь на одноклассники только не подключено, чтоб подключить, читаем ниже. Чтоб понимали, какой класс отвечает по html разметки Также на форуме разбирали эти кнопки и вы узнаете как подключить другие социальные сети. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 18 | |
|
| |
