Categories: Юзабилити

Фейсбук кнопка “Мне нравится” на сайте

Кнопка Фейсбук “Мне нравится” (Facebook Like Button) маленький, но очень полезный инструмент. И поставить ее на свой сайт очень просто. В интернете очень много инструкций, скриптов и плагинов как установить кнопки социальных сетей. Но в этой статье рассмотрим так сказать оригинал, а именно вариант, который предлагает Фейсбук.

Все варианты установки планинов от Фейсбук находятся по ссылке: https://developers.facebook.com/docs/plugins?locale=ru_RU. И самой первой в списке как раз и есть кнопка “Мне нравится”.

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

Откройте нужную страницу и скопируйте ее индивидуальную ссылку (смотрите в строке своего браузера).Например, ссылка для этой страницы: https://stepfor.top/fejsbuk_knopka_quot_mne_nravitsja_quot/
В отдельном окне открываем ссылку: http://developers.facebook.com/docs/reference/plugins/like/Находим окошко “URL to like” и вставляем туда скопированную ссылку нашей страницы.
Затем нажать “Get code”. Перед Вами открываетя код который состоит из двух частей.
Первую часть кода нужно вставить в шаблон сайта сразу после открывающего тега <body> Эта часть кода вставляетя ТОЛЬКО один раз.
Вторую часть кнопки нужно разместить в режиме html на странице, где она должна быть.

Далее когда будете вставлять код кнопки на другие страницы, Первую часть кода вас вставлять уже не нужно.

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

Установка кнопки Мне нравится от Facebook на сайтах uCoz

Первый код вы втавляете сразу после тега <body>, скорее всего это Первый контейнер.
Нужно перейти: Переходим “Дизайн”-“Управление дизайном (шаблоны)” – Глобальные блоки – Первый контейнер.
Вставить код после тега <body> и нажать “Сохранить”

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ru_RU/sdk.js#xfbml=1&appId=854361701264052&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Второй код нужно вставить в другой шаблон следующим образом. Переходим “Дизайн”-“Управление дизайном (шаблоны)” – Каталог статей (или Новости сайта) – Страница материала и комментариев к нему.
В нужном месте вставляете вторую часть кода, но видоизменив ее. Так как код вставляется в шаблон, а не на конкретную страницу – он является универсальным, и вставлять код вы также будете только один раз. Но код надо вставить тот, который я даю ниже:
```
<div class="fb-like" data-href="$ENTRY_URL$" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
```

Теперь на каждой странице модуля Каталог статей автоматически будет появляться Кнопка “Мне нравится от Фейсбук”

Больше статей: Всплывающее окно на сайте (модальное/pop-up окно)

Установка кнопки “Мне нравится” на Woredpress”

Алгоритм примерно такой же

Внешний вид – Редактор – Шаблон header.php после тега <body> вставляем первую часть кода (см. выше)
Внешний вид – Редактор – Шаблон single.php в нужном месте, обычно после <?php the_content(); ?> вставляете саму кнопку. Код будет выглядеть так:
```
<div class="fb-like" data-href="<?php get_permalink(); ?>" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
```

Теперь на каждой странице поста, после содержимого, будут стоять две кнопочки “Нравится” и “Поделиться”.

А если Вы хотите поставить несколько кнопок социальных сетей, тогда читайте статью: Кнопки социальных сетей на сайт.