Плагін шарінгу постів через ВКонтакті для Octopress

Опублікував Сергій Макаренко 18-01-2013 об 09:25

Дійшли руки все ж таки прикрутити кнопки соціальних мереж до кожної публікації. Точніше, взагалі це все дуже просто. У файліку _config.yml потрібно просто навпроти назви соціальних мереж (наприклад, twitter_tweet_button) поставити параметр true. І все. Після цих змін кнопка з'явиться під кожною публікацією в блозі. З документацією по цій функціональності можна ознайомитись от тут. Але мені цього було замало. Засмучувало, що немає плагіна, для лайка публікацій через ВКонтактик. Погугливши не знайшов нічого, що б могло мені допомогти і я вирішив зробити його сам.

Для того, щоб написати плагін для шарінгу постів нам потрібно дві речі. Знати, як з плагінами працює Octopress і якісь дані для написання від соціальної мережі, підтримку якої ми хочемо додати в блог. Спочатку трохи про перше. Особливістю, за яку я люблю Octopress є те, що це фактично конструктор. Він генерує статичний HTML код блогу так, і з тих частин, з яких ви забажаєте. Завдяки цій особливості додатки для нього дуже просто і легко створювати навіть якщо ви не web-розробник (наприклад, як я). Для цього достатньо уважно подивитись вміст конфігураційного файлу та розібратись зі структурою папок движка.

Фрагменти коду, з яких збирається сторінка блогу при генерації зберігаються в папці /source/_includes/. Зокрема, в ній знаходяться плагіни для шарінгу, якими можна керувати вмикаючи їх, або вимикаючи в конфігураційному файлі. Плагіни, яки створюють користувачі, розробники Octopress пропонують складати в папку /source/_includes/custom/ для того, щоб потім не виникло плутанини. В ній потрібно створити файл vk_like.html, в якому буде зберігатись тіло нашого плагіна. Зазвичай я для таки цілей люблю користуватись терміналом. Тому використаємо для створення порожнього файлу команду touch.

touch /source/_includes/custom/vk_like.html

Всі плагіни підключаються в файлі /source/_includes/after_footer.html, тому переглянемо його вміст.

{% include disqus.html %}
{% include facebook_like.html %}
{% include google_plus_one.html %}
{% include twitter_sharing.html %}
{% include custom/after_footer.html %}

Як ми бачимо, основний конфігураційний файл включає в себе перевірку додаткового файла /source/_includes/custom/after_footer.html на предмет якихось додаткових налаштувань, або плагінів користувача. Тому додамо в цей файл наступний код.

{% include custom/vk_like.html %}

У мене в додатковому файлі /source/_includes/custom/after_footer.html не було нічого, окрім закоментованої підказки розробників. Тому кінцевий вигляд файл мав такий.

{% comment %}
    Add content to be output at the bottom of each page. (You might use this for analytics scripts, for example)
{% endcomment %}
{% include custom/vk_like.html %}

Тепер переходимо до наповнення плагіна. Для цього звернімося до сторінки віджету «Мені подобається». На сторінці заповнюємо необхідні поля і обираємо зовнішній вигляд кнопки з запропонованих варіантів. Це потрібно зробити для того, щоб нам надали apiId, яке ми будемо використовувати в своєму скрипті. Нажаль, це все чим нам допоможе ця сторінка, оскільки движок у нас гіківський, тому з ним не все так просто. Для того, щоб написати скрипт, який буде працювати з Octopress, йдемо на сторінку документації для розробників по віджету. Тут є усі, необхідні нам дані. В файл /source/_includes/custom/vk_like.html додаєм наступний код:

{% if site.vk_like %}
    <script type="text/javascript" src="//vk.com/js/api/openapi.js?75"></script>
{% endif %}

Після цього нам необхідно додати сам скрипт генерації кнопки до файлу /source/_includes/post/sharing.html. В мене він вийшов ось таким:

{% if site.vk_like %}
<div id="vk_like"></div>
<script type="text/javascript">
window.onload = function () {
    VK.init({apiId: 1234567, onlyWidgets: true});
    VK.Widgets.Like("vk_like", {type: "mini"});
}
</script>
{% endif %}

На виході вміст файлу /source/_includes/post/sharing.html має виглядати так:

<div class="sharing">
    {% if site.twitter_tweet_button %}
    <a href="http://twitter.com/share" class="twitter-share-button" data-url="{{ site.url }}{{ page.url }}" data-via="{{ site.twitter_user }}" data-counturl="{{ site.url }}{{ page.url }}" >Tweet</a>
    {% endif %}
    {% if site.google_plus_one %}
    <div class="g-plusone" data-size="{{ site.google_plus_one_size }}"></div>
    {% endif %}
    {% if site.facebook_like %}
    <div class="fb-like" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true" data-font="lucida grande"></div>
    {% endif %}
    {% if site.vk_like %}
    <div id="vk_like"></div>
    <script type="text/javascript">
    window.onload = function () {
        VK.init({apiId: 1234567, onlyWidgets: true});
        VK.Widgets.Like("vk_like", {type: "mini"});
    }
    </script>
    {% endif %}
</div>

Все, тепер нам залишається додати інформацію про плагін vk_like.html в конфігураційний файл для того, щоб движок блогу «знав» про нього при генерації сторінок. Для цього в секцію «3rd Party Settings» додамо наступне:

# VK Like
vk_like: true

Після цього зберігаємо всі внесені зміні і генеруємо блог з новим плагіном. Хотів би зазначити, що при перегляді блогу локально, за допомогою rake preview, плагін не працюватиме через відсутність в назві сайту домену, який ви вказали при створенні apiId. На цьому все. Насолоджуйтесь роботою нового плагіну.