Мне нравится! в Octopress от vk.com

30 января 2015. Комментарии .

Из коробки Octopress умеет выдавать кнопки от google+, twitter и facebook. Для их размещения внизу каждой страницы достаточно прописать эти настройки в файле _config.yml:

1
2
3

facebook_like: true
google_plus_one: true
twitter_tweet_button: true

А сейчас мы научим Octopress добавлять кнопку «Мне нравится!» от социальной сети «В контакте».

Вводим название своего сайта здесь, чтобы получить api Id — идентификатор контактовского виджета для Вашего сайта. Там и получаем код, который надо будет вставить. Код меняется в зависимости от того, какие параметры кнопки выбрать, так что мой код может Вам не подойти — тогда пользуйтесь тем кодом, который вам выдаст «В контакте».

Создаем файл source/_includes/vk_head.html с таким содержанием:

<script type="text/javascript" src="//vk.com/js/api/openapi.js?116"></script>

<script type="text/javascript">
VK.init({apiId: Номер_Вашего_ID, onlyWidgets: true});
</script>

Этот код пойдет внутри <head>. Не забудьте вставить Ваше apiId. Затем добавьте в конец файла source/_includes/custom/head.html:

1
2
3

{% if site.vk_like %}
{% include head.html %}
{% endif %}

Создавайте файл source/_includes/vk_sharing.html:

1
2
3

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

Этот код пойдет в том месте, где мы хотим нашу кнопку.

Добавляйте в конец файла source/_includes/post/sharing.html:

1
2
3

{% if site.vk_like %}
<div id="vk_like"></div>
{% endif %}

Добавьте в файл source/_includes/custom/after_footer.html:

1
2
3

{% if site.vk_like %}
{% include vk_sharing.html %}
{% endif %}

Добавьте в файл _config.yml строку:

1	vk_like: true

Почти готово. Осталось только расположить кнопку в нужном месте. Если у Вас есть кнопки от Twitter, Google+ и Facebook (с английским словом Like — по умолчанию Octopress и добавляет английскую кнопку), то подойдет стиль со следующими цифрами, который можно записать в sass/custom/_styles.scss:

#vk_like {margin: 0 0 0 80px; padding: 25px 0 33px 0px;}
@media screen and (min-width: 520px){
  #vk_like {margin: -28px 0 0 320px; padding: 0 0 30px 0;}
}

Так кнопка «Мне нравится» от «В контакте» стройно встанет в ряд с остальными кнопками. При ширине окна меньше 520 пикселей кнопка «Мне нравится» съедет во второй ряд и ровненько при этом займет место посередине под этими тремя. Впрочем, если что-то Вас не устраивает, поменяйте цифры. Отключить кнопку можно, прописав в _config.yml параметр

1	vk_like: false

Так что процесс автоматизирован. Будьте только внимательны при смене темы — файл source/_includes/post/sharing.html, скорее всего, будет переписан. Зато все файлы, которые мы создали, и все файлы из поддиректорий custom должны сохраниться. Впрочем, бэкапиться перед сменой темы все равно необходимо.