05 Сентября

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

Время последнего обновления записи: 2013-09-05 в 22:23 автор: Денис Воеводин

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

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

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

Установка кнопки Вконтакте вручную

Вконтакте имеет большую популярность среди  Российских пользователей интернета и поэтому будет глупо не брать во внимание данную социальную сеть. Для того, чтобы установить кнопку для своего сайта, необходимо перейти на страницу: http://vk.com/developers.php?oid=-1&p=Like, на открывшейся странице перед Вами будет следующая картина.

Форма выбора параметров кнопки Мне нравится ВконтактеСоветую выбрать параметры кнопки такие же, как представлены на скриншоте, так как в дальнейшем все параметры кнопок будут иметь одинаковую высоту, равную 18px, иначе кнопка «Мне нравится» будет выделяться и на фоне других кнопок будет громоздкой.

После того, как выбрали все параметры кнопки, под формой будет демонстрироваться вид полученного творения, но не в этом суть. Для добавления кнопки на страницу необходимо скопировать первую часть кода, расположенную после строки <!— Put this script tag to the <head> of your page —> и до строки <!— Put this div tag to the place, where the Like block will be —> и вставить ее в секцию <head></head> сайта, на той странице, где хотите, чтобы кнопка функционировала. Если Вы используете CMS WordPress, то зайдите в админку, кликните по элементу левого навигационного меню «Внешний вид» и в раскрывшемся списке выберите «Редактор», далее найдите файл с названием «header.php», который является шапкой сайта и дублируется на всех страницах и добавьте код в секцию <head></head>.

После этого необходимо сохранить получившийся код и скопировать вторую часть скрипта после текста <!— Put this div tag to the place, where the Like block will be —> и до коонца, которая будет выполнять функцию отображения кнопки «Мне нравится» на сайте и вставить в то место, где необходимо отобразить данную кнопку. Все достаточно просто, ничего сложного. Первая кнопка готова.

Установка кнопки Facebook для сайта

Для установки кнопки «Мне нравится» социальной сети Facebook, потребуется перейти на страницу: http://developers.facebook.com/docs/reference/plugins/like/, после открытия которой перед Вами будет форма.

Форма настройки кнопки Like от FacebookПоле ввода URL необходимо оставить пустым, для того, чтобы кнопку можно было расположить на любой странице Вашего сайта. Все остальные поля оставьте как на скриншоте и нажмите кнопку «Get Code».

Перед Вами появится новое окно.

Код сгенерированной кнопки FacebookЧасть кода, расположенную в первой половине формы, необходимо скопировать и вставить после тега <body> на той странице сайта, где хотите разместить кнопку. Если хотите разместить на страницах с записями и CMS Вашего сайта WordPress, воспользуйтесь файлом «header.php», о котором я ранее упомянул.

Вторую часть кода вставьте именно в то место, где кнопка должна быть расположена.

Установка кнопки социальной сети Google +1

Установка кнопки G+1 еще проще, сем установка предыдущих кнопок. Осуществить настройку кнопки и ее установку можно перейдя на страницу: https://developers.google.com/+/plugins/+1button/. На странице будут следующие данные.

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

Установка кнопки Twitter

Также не потребуется особых усилий, аналогично кнопке G+1, необходимо перейти по ссылке: https://twitter.com/about/resources/buttons#tweet. Установить все значения так, как показано на скриншоте, добавив только собственные названия источников, метки и имя пользователя, от лица которого будет рекомендоваться запись в Twitter.

кнопка Twitter для сайтаПосле установки всех кнопок получится, что все они будут расположены в столбец, для того, чтобы расположить кнопки социальных сетей в строку, необходимо обернуть полученный код в контейнер <div></div> и прописать для контейнера стили, как Вашей душе угодно :)

Буду благодарен Вам, если Вы поделитесь статьей в социальных сетях, заодно и протестируете установленные мной кнопки социальных сетей на блоге. Если хотите и дальше следить за новостями блога, подписывайтесь на мой канал в RSS и Twitter, воспользовавшись кнопками в левом углу шапки сайта. Желаю Вам удачи в установке кнопок социальных сетей :)

Добавляем кнопки известных социальных сетей для сайта или блога: 2 комментария

  1. Елена

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

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

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