Автор

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


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

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

Окончено создание сайта. Процесс от начала до окончания проекта был очень долгим:) Заказ на создание сайта был сделан 2 года назад, но только со сменой руководства в прошлом месяце всё сдвинулось с места!!!


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

Параллакс это изменение видимого положения объекта относительно удалённого фона в зависимости от положения наблюдателя. Параллакс используется в геодезии и астрономии для измерения расстояния до удалённых объектов. На явлении параллакса основано бинокулярное зрение. Но также параллакс активно используется дизайнерами для разработки необычных эффектов как в повседневной жизни, так и в веб-дизайне.


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

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


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close