» »

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

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

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

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

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

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

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

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

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

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

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