Автор

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

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


 

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

 

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

Кнопка Вконтакте- Мне нравится
Кнопка 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

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


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

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

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


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

Есть довольно много методов для <input type="file" /> элемента. Я попробовал большинство из них, но ни один не был достаточно хорош. Вероятно, худшей техникой была та, в которой входной элемент помещается в емкость (которая имитирует кнопки), а на вход следует за курсором, так что, когда вы щелкните в любом месте на контейнере, вы нажимаете на ввод. Звучит интересно и странно одновременно, верно?


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

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


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

Простой, отзывчивый слайдер с радиальным эффектом перехода на основе SVG clipPath и элементов маски.


105 Публикаций

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

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


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

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

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

Close