Как Начать Встречаться с Парнем Одноклассником

Делаем кнопки социальных сетей самостоятельно

Это уже далеко не первая статья, которая затрагивает социальные кнопки на сайте. А все почему? Да потому что без них никуда. В этот раз мы будем делать кнопки социальных сетей самостоятельно, т. е. без использования сторонних плагинов и сервисов, типа socialtools.

Преимущества ручного размещения

Чаще всего к такому методу приходят тогда, когда не хотят зависимости от сторонних сервисов. Допустим, что тот же UpToLike или SocialTools лег, соответственно, кнопки на вашем сайте тоже легли, так как запросы все идут через него. Вот здесь и начинается работа над ускорением блога, загрузки страницы и т. д. В общем, кому этот метод понадобился, рассмотрим вариации.

Кнопка поделиться Twitter

Переходим на официальный сайт представителя, т. е. сюда

и выбираем подходящее для себя оформление и тип кнопки. Вариантов для выбора достаточно, кроме того, здесь же можно взять и кнопку «Читать». Каждая из них настраивается, после чего выводится готовый код для вставки на сайте. Пример такого варианта можете увидеть на скрине:

Кнопка поделиться Вконтакте

Принцип размещения от предыдущей ничем не отличается. Переходим на страницу документации публикации ссылок Вконтакте по ссылке:

Также выбираем оформление, которое может быть как со счетчиком, так и без. Все по вашему желанию и усмотрению. В итоге получаем готовый код для размещения. Вот, собственно, скрин:

Кнопка поделиться Одноклассники

Здесь уже настройки более интересные. Переходим в документацию новой кнопки класс по адресу:

Кнопка регулируется как по виду, так и по размеру. Счетчик можно выставить справа и сверху. Результат выводимой кнопки сразу перед глазами, готовый код конфигурируется ниже в режиме онлайн, в соответствии с выбираемыми вариантами оформления.

Кнопка поделиться Facebook

Документация вся на английском, поэтому у кого проблемы с этим языком, то придется не так уж и просто. Хотя, все, что вам понадобится, это получить код с этой страницы:

Жмем по кнопке «Get Code» и получаем необходимый код для вставки на сайте.

Кнопка поделиться Mail.ru

Очень схожее руководство и оформление с Одноклассниками. Настройки абсолютно такие же, и если вы разобрались с предыдущими, то и с этими проблем не возникнет. Получаем кнопку здесь:

Если возникнут вопросы, то ниже настроек, как и на вышеописанных сервисах, есть ссылка на детальную документацию.

Более простой вариант — All in One

Вам показалось это все сложным? Возможно, потому как все эти кнопки нужно получить, влепить код и скрипты на сайт, но если вы в этом разбираетесь, то это всего нескольких минут дело. Все скрипты можно поместить в один файл, и подключить его в необходимом месте. Но если вам все равно это кажется сложным, то есть более простой вариант. Для этого нам снова придется пойти на сторонний сервис и скачать готовую библиотеку, которая подключает все необходимое одним файлом javascript, а также выводит в красивом оформлении посредством готового файла стилей css. Переходим на этот сервис:

Играемся с настройками, выбираем необходимое количество социальный сетей, скин, вид, и после этого качаем готовый вариант файлов кликом по кнопке «Скачать кнопки» в самом низу. В архиве получится 3 файла, из которых 2 уже были описаны выше, а 3-й выступает примером для вставки блоков div на сайте.

Заключение: какой из этих вариантов больше подойдет вам, решайте сами. Оба они исключают зависимость от посторонних сервисов, но если так рассуждать, то не будем забывать, что сами социальные сети очень часто тупят, а соответственно и тянут за собой сайт(увеличивают время загрузки страницы). Так что, здесь противоречие одно за другим. Желаю вам успехов!

1. 5
2. 4
3. 3
4. 2
5. 1

(9 голосов, в среднем: 4.2 из 5 ) не скупись ставь лайк Рябухин Максим

Я фрилансер веб-разработчик. Последние несколько лет занимаюсь версткой и веб-программированием на PHP и Javascript. Если вам понадобится помощь с блогом WordPress, либо адаптация сайта, я всегда рад помочь.

🗣 Возможность узнать количество «классов» к своей странице без установки кнопки:

Своя Кнопка Поделиться Одноклассники Для Сайта

Кнопка Одноклассники для сайта; Класс, ; Нравится, ; Поделиться

Делаем кнопки социальных сетей самостоятельно

Некоторые тонкости установки на сайт кнопок «Поделиться» (share) социальных сетей

Далее, на следующей странице нажмите на вкладку – Кнопка «Класс» .

Кнопка одноклассники поделиться на сайт

Кнопку одноклассники очень легко сделать.

Далее, код кнопки вам нужно вставить на сайт, на страницу где будет отображаться кнопка.

.

Если ваш сайт на WordPress, вы можете вставить код кнопки в содержание записи или страницы, на вкладке «Текст».

Со временем популярные решения обрастают дополнительными функциями, которые не только увеличивают размер подгружаемых скриптов, но и могут содержать вредоносный код.

Красивые кнопки социальных сетей для сайта

С помощью стилей оформим наши кнопочки, зададим цвет фона и текста, добавим эффект при наведении указателя курсора мыши. В style.css добавим следующий код:

.

На очереди заключительный шаг — подключение обработчика share.js, его вы найдете в архиве с исходниками. Для этого в заголовке перед закрывающим тегом вставляем строку, меняя путь к файлу на своем хостинге:

§ Она поможет вам понять, что больше нравится вашей аудитории, и заодно привлечет новых посетителей на ваш сайт.
🏫 Также для недоверенных доменов граббер не обрабатывает изображения и видео. Чтобы граббер начал обрабатывать такие ссылки, необходимо использовать один из протоколов разметки страницы: