Создаем социальные кнопки для веб-сайта без плагинов

2013-05-16

Доброго времени суток, дорогие читатели!

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

О назначении социальных кнопок вы, скорее всего, уже знаете: сейчас они присутствуют на большинстве сайтов и вы их наверняка замечали. Обычно они представляют собой квадратики со значками соответствующих им социальных сетей или кнопочки с надписями “Поделиться”, “Рассказать друзьям”, “Нравится” и тому подобными.

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

Иногда социальные кнопки также дублируются в боковой колонке веб-сайта.

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

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

Приступим же к делу.

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

Для создания соцкнопок нам понадобятся… сами кнопки, точнее сказать, картинки с изображенными на них логотипами  социальных сетей. Такие картинки вы можете самостоятельно найти в интернете, выбрав подходящий дизайн и размер или воспользоваться набором картинок-иконок, как у меня (ссылка на скачивание архива – в конце статьи).  Изображения нужно подогнать одну к другой по ширине или высоте (в зависимости от того, как вы будете располагать их – вертикально или горизонтально) и поместить их в одну папку, например, в папке с вашей темой оформления сайта открываем папку с картинками img и создаем в ней папку socialbuttons. Тогда путь к изображениям кнопок будет такой:

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

Ниже я привожу код ссылок для кнопок наиболее популярных социалок с уже прописанным путем к папке с изображениями.

Кнопка Вконтакте:

Кнопка Одноклассники:

Кнопка Facebook

Кнопка Мой Мир Mail.ru

Кнопка Я.ру

Кнопка Livejournal.com (ЖЖ)

Кнопка Tweeter

Используя эти коды не забудьте удостовериться в правильности указания пути папки с изображениями соцсетей, a также размеров картинок width и height .  В примере указаны размеры используемых мною кнопок. Атрибуты alt и title можете поменять на свои.

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

Например, так:

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

Сам блок div или таблицу table вставляете в то самое место шаблона страницы, где хотите видеть социальные кнопки.

Загрузить архив с маленькими иконками соцсетей можно по ссылке: socialbuttons.zip

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

Спасибо за внимание.

Метки: ,

Статья пригодилась? Буду признательна, если поделитесь в соцсетях:

Комментарии


Комментариев пока нет, будьте первым.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">