Автор

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


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

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

Курсор, или указатель мыши, при просмотре сайтов в интернете обычно имеет вид стрелки, а при наведении на гиперссылки принимает вид руки-указателя. Между тем, в HTML предусмотрено большое разнообразие изображений курсора и их грамотное применение может быть весьма полезно веб-дизайнерам. Простыми средствами с помощью стилей можно переопределить вид курсора и выбрать один из более десяти доступных вариантов.


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

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


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

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


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

Во время просмотра web - я заметил новые интересные библиотека - TN3. Это jQuery коллекции изображений в слайд-шоу, c эффектами перехода, несколько альбомов опций и т.д. Кроме того, вы сможете настроить его (через CSS). Сегодня я покажу вам, как можно реализовать эту галерею, чтобы создать собственный фотоальбом.


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close