Как установить кнопки соц сетей на сайт

Как установить кнопки соц сетей на сайт


 

Как установить кнопки социальных сетей для своего сайта или как добавить блок с кнопками социальных сетей — тема данного урока. Я постараюсь дать вам информацию о самых популярных способах размещения кнопок.

 

Размещение кнопок социальных сетей на сайте при помощи официальных виджетов:

Кнопка Вконтакте- Мне нравится
Кнопка FaceBook — Like
Кнопка Twitter — Твитнуть
Кнопка Одноклассники — Класс
Кнопка Google — Plus 1

Кнопки социальных сетей для блога (сайта)

 

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

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

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

Я вижу несколько вариантов:

Пользоваться сторонним сервисом
Прописывать код и стиль кнопок самостоятельно
Использовать официальные кнопки


Применять плагины для сайта

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

 

Кнопка Вконтакте «Мне нравится»

Как установить кнопки соц сетей предоставляемые самими социальными сетями я уже писал на примере кнопки от Вконтакте

Все действия происходят в четыре шага:

Подключение сайта
Выбираем как отображается
Добавляем код в шапку сайта до тега </head>
Размещаем вторую часть кода в месте, где будет отображаться кнопка

 

Вариантов отображения кнопки Вконтакте через API самой социальной сети всего четыре, верней их восемь, но здесь можно настроить четыре разных: для «Мне нравится» и для «Это интересно». Вот пример как выглядят кнопки Вконтакте если использовать официальный виджет «Мне нравится».

 

 

Кнопка Facebook «Like»

 

Хотя кнопка от фейсбук и настраивается через англоязычный виджет, но делается все по аналогии с ВК:

Подключаем URL-адрес нашего сайта
Выбираем отображение нашей кнопки, задаем размер в пикселях
Настраиваем цветовую гамму и шрифт
Задаем кнопке имя «Like» или «recommend»
Все жмем «Get code» (получить код) и размещаем на сайте

 

 

 

Кнопка Twitter «Ретвит»

 

В 2011 году Твиттер был русифицирован и в ряде изменений конечно затронули кнопку «твитнуть»

Если вдруг вам захочется нестандартный вариант кнопки или в стиле, скажем так — ретро, то на странице документации самого твиттера есть примеры кодов для всевозможных кнопок и их свойств.

 

Кнопка «Класс» и «Нравится»

 

Две социальные сети Одноклассники и Мой Мир на сегодня объединились, создали совместный проект. Кнопки «класс» и «нравится»  можно настроить в одном месте:

 

Код размещается в месте,  где будут отображаться кнопки.

 

Кнопка Google +1

 

Кнопка, которая завоевывает все большую популярность и которая  влияет на пользовательский поиск — это кнопка от Google  (под простеньким названием плюс один). Здесь все как и везде, выбираем вариант кнопки и размещаем код на сайте.

Важно! Обязательно отметьте язык Русский и код размещайте, как и ВК — первую часть в шапке до тега head, а вторую в месте отображения кнопки.

 

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

 

 

Сервисы предоставляющие готовые кнопки с выбором дизайна:

На мой взгляд это самое интересное что я нарыл в интернете!

 

www.likebtn.com

 

 

www.sharethis.com


Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеРазное

Как установить кнопки соц сетей на сайт

Во время поиска в Интернете для вдохновения мы столкнулись с красиво оформленным веб-сайтом Honda HR-V. Когда вы переходите от раздела к другому, переход украшается анимированной фигурой, созданной с помощью элемента <canvas>.


Как установить кнопки соц сетей на сайт

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


Как установить кнопки соц сетей на сайт

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


Как установить кнопки соц сетей на сайт

Порой на сайте хочется выделить красиво какую либо информацию, тем самым привлечь внимание пользователя к необходимой информации. Все это можно сделать с помощью различных эффектов, в данном уроке мы рассмотрим как создать эффект размытия элементов сайта сайта с помощью CSS3 и jQuery.  Идея заключается в организации набора блоков с текстом, которые будут размываться и уменьшаться в масштабе при наведении курсора мыши на один из них. Блок, который получает фокус ввода, наоборот будет увеличиваться.


Раскрутка в соцсетях

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


Перейти в Блог