Кнопка Вконтакте. Как установить кнопку на движке WordPress

Кнопка Вконтакте. Как установить кнопку на сайт «Мне нравится»  на Wordpress.

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

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

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

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

И так, как установить кнопку мне нравится?  Первое, что сразу нужно сделать, это зайти на сеть Вконтакте, что бы сервис определил вас под вашим профилем, если конечно вы уже там зарегистрированы. Если ещё не успели зарегистрироваться, то сделайте
это прямо сейчас здесь.
Регистрация понятная, так что объяснять не буду.

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

Выскочит окошко (смотреть вторую картинку), вписываете в нем «код«, который вы получите на ваш мобильный. Если вы не указывали при

регистрации номер вашего телефона, то обязательно сделайте это. Смотрите в настройках профиля. И так, вставили полученный код, нажали «отправить«. Через пару секунд всплывет вот такое окошко (смотрите третью картинку).

Заполняем поля в ней. В самом верху, где название, которые вы уже оказали и описание, ничего можете не делать. Обращаем внимание только на «Защищенный ключ«,  скопировав вы можете вставить к примеру в полезный плагин кнопок для сайта Share Buttons, если он у вас есть. А также немного внимания на «ID приложения«, запоминать и копировать это не надо, просто я к тому, что именно этот номер и будет определяющим для вашей кнопки, именно для вашего сайта. На картинке эти поля выделены желтым.

Теперь самое главное о том, как вставить кнопку на сайт.

Внизу окна  видим Open API (выделено красным), в поле «Адрес сайта» вставляем ваш адрес.  Обратите внимание, как выглядит адрес: https://nachnisnachala.life —не правильно, https://nachnisnachala.life/- правильно. Все отличие в значке «/» в конце названия. В поле «Базовый домен» вставляем ваш домен, как пример,- nachnisnachala.life, без http://. Сохраняем настройки.  Пример на картинке 4

Настройка и вставка кнопки на сайт

Все необходимые данные зарегистрированы, теперь заходим на страницу «подключения виджета к Вашему сайту» . В панели Сайт/приложение, уже будет указан адрес вашего сайта, либо нажмите стрелку на против (справа) и выберите в ручную. Далее выбираем из предложенного дизайн кнопки. Это по своему вкусу. Я выбрал первый вариант «Кнопка с текстовым счетчиком». «Высота кнопки» — я не трогал, и название по вашему желанию «Мне нравится» либо «Это интересно«. Ниже видим сам код кнопки, код состоит из двух частей, и вставляться будет тоже в двух местах. Сразу замечу. делайте резервную копию нетронутого документа, в которые будем вставлять код, на всякий случай.

 Первая часть кода,-  (не копируйте у меня- это пример) 

<script type="text/javascript" src="http://userapi.com/js/api/openapi.js?45"></script>

<script type="text/javascript">
 VK.init({apiId: 2638339, onlyWidgets: true});
</script>

Теперь, скопировав вставляем на сайт. Смотрим картинку 6, изображающую панель инструментов, (колонка слева). Находим «Дизайн» и в нем меню «Редактор«. Это редактор настроек вашей темы. Смотрим в правой колонке и находим «Заголовок», файл называется (header.php). Открываем его и видим следующее окно ( смотрите картинку). Документ выглядит в виде набора символов и значков, но не пугайтесь, разбираться во всем вам не надо, просто сделайте то, что я напишу.

И так, сначала сразу скажу, первую часть кода будем вставлять между вот этих тегов..<head>( открывающий) </head>( закрывающий). Один из этих тегов  будет в верху, второй, только со значком «/»  внизу документа. Между ними будут другие символы. но не обращаем на это внимания, сейчас главное правильно вставить нашу первую часть кода. Все внимание на нижний тег </head>, не спеша просматриваем документ и внизу находим этот символ (тег будет отдельно в строке). Я подчеркнул его красным на картинке 7.  Зеленым- вставленную часть кода.

Скопированную часть кода вставляем выше этого тега </head> . Проще это сделать так, поднимаемся чуть выше < /head>, нажимаем «ентер» и получаем «пробел«. Теперь вставляем часть кода. «Пробел» для того, что бы вам потом было легче найти эту «часть кода», если вы захотите удалить, либо внести какие то изменения.

Далее, идем назад на страницу данного вам кода. Спускаемся ниже (смотрим картинку 8). Вновь пропускаем (не копируем) <!— Put this div tag to the place, where the Like block will be —>а только саму часть кода. Выглядит так:

 Вторая часть кода:

<div id="vk_like"></div>
<script type="text/javascript">
VK.Widgets.Like("vk_like", {type: "full"});
</script>

Заходим опять в «панель инструментов«. Находим «Дизайн», далее нажимаем «Редактор» (как я уже писал) и в открывшемся окне ( в правой

колонке) находим- Одиночная запись (single.php). Откроется документ. В котором, вам нужно будет найти тег- <?php the_content(); ?> так он выглядит в документе. Смотрите на картинку 9, обведен красным. Скопированную вторую часть кода ( обведен зеленым) вставляем после этого тега, лучше через «пробел», как я описал выше, что бы потом можно было его легче найти и отличить. Почему именно в этом месте? Можно конечно поэксперементировать и вставить в другие места. Но лучше если ваша кнопочка будет внизу вашей статьи, а не где нибудь сверху. Все, кнопка установлена ,- позже расскажу как установить кнопки от Facebook и Mail.ru. Для начала сам вставлю..  Удачи!
 
Статьи могут быть вам полезны:

1. Как проверить сайт на вирусы
2. Какой лучший файлообменник или файлообменник GetFiles опасно.