21:07:2014

Как установить кнопку нравится от Facebook и VK на сайт

Установка кнопок мне нравитсяКак установить кнопку нравится на сайт от Facebook и Vk(вконтакте)? Я собрался поведать о том, как установить кнопки от фейсбука и вконтакте не используя плагины. Понятное дело, что существует огромное количество плагинов, установив которые, вы решите подобные проблемы и в миг получите свои кнопки, но не все так просто. Многие блогеры, веб-мастера устанавливают на свои ресурсы социальные кнопки именно напрямую, без использования сторонних расширений(плагинов).

Как установить кнопки нравится от facebook и vk на сайт

 

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

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

В этой статье я расскажу как установить кнопки мне нравится от facebook и vk, в следующей это будет twiiter и google+, а последней статьей будет урок о том, как выровнять эти кнопки в один ряд, поэтому, чтобы не пропустить статьи, подписывайтесь на обновления блога по email. По итогу вы будете видеть вот такую картину:Установить кнопки мне нравится

Ну, а я еще не дошел до этого, я только установил все кнопки, но не выравнял их, возникли проблемы с этим, поэтому пока что довольствуюсь этим:Установить кнопки мне нравится

В общем ладно, все придет в норму, со временем, а пока что мы с вами просто установим две из четырех кнопок, а начнем с facebook.

Как установить кнопку мне нравится от facebook

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

Чтобы установить кнопку мне нравится от facebook вам нужно перейти по этой ссылке и вы попадете в кабинет разработчиков facebook! Перед собой вы видите нечто похожее: Установить кнопку мне нравится от facebook

Никуда более переходить не нужно, мы работаем в этом окне! Теперь нам нужно опустошить поле URL to like, для того, чтобы отменить привязку кнопки к определенной странице. Если же вы хотите сделать кнопку, нажав на которую читатель делился какой-то одной страницей, например главной, или же вы маг-чернокнижник-blackseoman-черносеошник и хотите сделать так, чтобы с какой либо страницы не была нажата эта кнопка делилась она всегда одной и той же (только что раскрыл новую стратегию черного сео), то можете указать там определенный URL, но, мы же с вами борцы добра поэтому оставляем пустой:Установить кнопку мне нравиться от facebook

Если вы точно знаете, какую хотите ширину кнопки(что редко), то можете указать параметр Width, но, поверьте моему совету, лучше оставить её пустой, так как её и без вас сделали идеальной(ну почти).Кнопка от facebook

Советую вам убрать галочку с “Show Friends’ Faces“, потому что со временем ваших читателей станет слишком много(да-да, я верю в вас) и их лица могут сбить ваш шаблон, поэтому лучше уберите галочку с этого пункта. Что касается “Include share button“, то тут уж как хотите, оставлять ли вам кнопку поделиться или нет, в любом случае нажимая “Нравится” запись будет отражаться на странице читателя в facebook, поэтому её можно снять.

Я снял галочки с обоих пунктов и получил вот такую кнопку, ничего лишнего, только то, что мне нужно:Кнопка facebook

Теперь нужно изменить вид кнопки, ибо этот не очень красиво выглядит и своей длинной записью будет мешать размещению остальных социальных-кнопок, поэтому мы меняем поле “Layout” :Кнопка facebook

Я изменил значение с “standart” на “button_count“, потому именно в такой форме кнопка мне нравится больше всего. Вы можете выбрать такую форму, которая вам больше всего по душе. Итак, мы решили, какой нам больше всего нравится дизайн, теперь самое время разместить кнопку на сайте. Для этого нажимаем “Get Code” :Кнопка facebook

Перед нами появляется самый страшный(для многих) момент установки социальной кнопки от facebook, но, уверяю вас, тут все просто!Установка кнопки facebook

Теперь, копируем тот код, что побольше(верхний) и идем в админ панель сайта по следующему пути: Внешний вид-редактор-header.php , если у вас интерфейс сайта устроен как-то иначе, то вам все равно нужно найти файл header.php(может быть head.php), заходим в этот файл и ищем тег <body>:Установка кнопки facebook

Вставили код сразу за <body>! Я буду делать картинки кликабельными, чтобы вы могли лучше рассматривать то, что на них происходит.  Вставили код, не забываем сохранить изменения, теперь возвращаемся и копируем тот код, что поменьше.Установка кнопки facebook

Скопировали, теперь наш путь лежит в: Внешний вид-редактор-single.php и тут нам нужно выбрать, куда вставить нашу кнопку. В данный момент все переходит на вас, куда вставите там и будет отображаться кнопка от facebook. Советую вам скопировать ваш код и вставить его в какой-нибудь документ, вдруг накосячите, а так и восстановить не проблема.

Теперь давайте перейдем к установке кнопки мне нравится от vk.com!

Как установить кнопку мне нравиться от vk.com

Установка кнопки мне нравится от вконтакте на сайт принципиально ничем не отличается от установки кнопки facebook, поэтому сильно затягивать не буду, а сразу к делу. Переходим по этой ссылке в кабинет разработчиков vk.com и, если у вас еще не создано ваше приложение(обычно  просто просят название придумать) вам нужно его создать, а потом сразу к настройке кнопки.

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

Вставляем её туда же, куда мы вставляли код кнопки от facebook, теперь берем вторую часть кода:кнопка мне нравится вконтакте

Вставляем её туда, где хотим видеть свою кнопку от vk, все точно так же как и с кнопкой от facebook – никаких проблем.

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

 

One Response к “Как установить кнопку нравится от Facebook и VK на сайт”

  1. Саруман пишет:

    *MACHO*

Ответить