» »

Установить свой социальные кнопки на сайт

Установить свой социальные кнопки на сайт

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

Что пришлось на сайт один установить кнопки, которые и по дизайн красивые, так как они идут квадратные и небольшим закруглением углов. А вот само изображение или логотип, здесь мы прописываем классы от шрифтовых иконок, что вы можете сами какие нужно также добавить на сайт по социальным порталам. Здесь в коде будут прописаны основные сайты, это в контакте, 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 разметки

Также на форуме разбирали эти кнопки и вы узнаете как подключить другие социальные сети.
2017-08-23 Просмотров: 700 Комментарий: (18)

Поделиться в социальных сетях

Материал разместил

Комментарий: 18
First-1
First-1 2017-08-23 22:551
+1
Не будет работать. Двух скриптов не хватает.
Kosten
Kosten 2017-08-23 23:012
0
Как это не будет работать,сейчас проверил все работает в контакт репост сделал.

Что за скрипты?
First-1
First-1 2017-08-23 23:023
0
Проверил где, на киновего там где я скрипты ставил?
Kosten
Kosten 2017-08-23 23:045
0
Ну, все правильно там и поставил, не знал, что еще скрипты нужны, можешь скинуть их, чтоб скрипт рабочий был.
Critic©
Critic© 2017-08-23 23:044
0
Что самого конструктора не пользоваться, там и подсчет есть, что на яндекс поделиться давно на некоторых кнопках не работает и не могут сделать, просто не учитывает.
Kosten
Kosten 2017-08-23 23:097
0
Но явно больше 1 лет с с яндекс поделиться пользуюсь, и как в первый раз поставил, там уже твиттер не учитывал. Но сейчас на главной установлен и можно посмотреть на каких нет, там и не учитывает. Хотя с другой стороны на главной по сути и не нужно, а вот в материале можно поставить, чтоб только все цифры у каждой кнопки выводило или вообще без них можно обойтись.
First-1
First-1 2017-08-23 23:076
+1
Kosten
Kosten 2017-08-23 23:118
0
First, вот спасибо, то сейчас бы ставили и писали, что не работает, а я бы доказывал, все работает и сайт в пример приводил, вот бы пападос был бы.

Его куда прописывать нужно в низ сайта?
First-1
First-1 2017-08-23 23:129
0
Там где кнопки. У меня в подвале
Kosten
Kosten 2017-08-23 23:1510
0
Все понятно, сейчас в материал закину.
-SAM-
-SAM- 2017-08-24 21:5215
0
Ну вот, про это я и говорил здесь в теме и ссылки на статьи дал такие.
Kosten
Kosten 2017-08-24 22:1616
0
А кто то что против имел, если была левая ссылка, то снес ее. Эта ссылка не понять какая, что убираю, прописывайте всю ссылку, если она по теме. Если что то доказываете, не нужно не каких ссылок.
-SAM-
-SAM- 2017-08-24 22:1917
0
Ссылка была на тот пост на форуме, где кинули код без подключения скрипта. Как видно, уже разобрались.
First-1
First-1 2017-08-23 23:2311
0
И иконки пора бы уже подключать не 4.3.0 а 4.7
Kosten
Kosten 2017-08-23 23:2712
0
Не знал что шрифтовые иконки обновились, хотя нужно было предполагать, но на этих тоже работает, но обновленные стили нужно прописать это точно.
Kosten
Kosten 2017-08-23 23:5414
0
First, под них стиль можно сделать, чтоб вывести под какой то цвет, вообщем самому цветовую гамму задавать.
Kosten
Kosten 2017-08-23 23:5313
0
Кнопки по стилю обновились, сто теперь можно поставить вверх сайта или в них эти стили, хотя также старый стиль работает. Но здесь видать кнопок добавили и произошло обновление.

Код
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Kosten
Kosten 2017-08-24 22:4518
0
Вообщем проверил другую социальную сеть как LiveJournal и заменил одноклассники и здесь кнопка отлично показывает.
avatar