Лагодимо плагін для твіттера в Octopress

Опублікував Сергій Макаренко 16-06-2013 об 13:19

Не думав, що в моєму блозі з'явиться ще один запис в цій категорії, бо знання у цій сфері у мене дорівнюють нулю, але життя бентежна штука. Протягом кількох останніх днів помітив, що стрічка з твітами в моєму блозі не оновлюється. Раніше таке теж траплялося, але, зазвичай, це тривало менше доби. Тепер же це твіти не віддавались якось аномально довго. Погугливши, дізнався, що десятого червня соіціальна мережа перейшла на версію API 1.1, а разом з цим переходом закрила свій JSON API, який використовувався вбудованим плагіном для вилучення даних з твіттера.

У веб-інспекторі я побачив ост таку картинку (малюнок нижче) і почав шукати шляхи вирішення проблеми, бо дуже мені не хотілося випилювати цей плагін зі свого бложека. Перейшовши за адресою, по якій старий плагін діставав інформацію про мої твіти побачив таке от повідомлення:

{"errors": [{"message": "The Twitter REST API v1 is no longer active. Please migrate to API v1.1. https://dev.twitter.com/docs/api/1.1/overview.", "code": 68}]}

Цьому повідомленню я не дуже зрадів, але маємо те що маємо. Пошуки на сторінці для розробників тривали не довго і вже через кілька хвилин читав опис створення вставок до сайту, який з'явився з міграцією на більш нову версію API. С перших рядків я зрозумів, що тепер амба всім пиляним власноруч плагінам і твіттер жорстко централізував вивід стрічок користувачів на зовнішніх сайтах. З одного боку це, звичайно, зручно, бо все буде стандартизованим, з іншого не дуже, бо щось нове буде з'являтись дуже повільно через бюрократію великої компанії.

Заглибившись у вивчення документації, зрозумів, що тепер стрічка вставляється iframe-мом у сайта з усіма витікаючими наслідками. Мабуть не варто нагадувати, що якщо у вашому сайтику присутній iframe, то локальні CSS на все, що буде знаходитись у нього в середені не будуть діяти. Фактично, це шматок сторінки твіттера у вас на сайті, який різатиме око зовсім іншим стилем оформлення, шрифтами і т. д. Такий собі чужорідний елемент. І це мене вибішує більш за все. Ну нахіба таке робити? © Точніше, такий крок потрібен для того, щоб твіттер отримував більше трафіку з третіх сайтів, але ж все це можна було зробити набагато людяніше. Але у решті решт все виявилося не так погано, як я думав з самого початку і худо-бідно стрічку можна кастомізувати під вигляд сайту. Для цих цілей до наших послуг такі параметри:

  • data-widget-id — унікальний ідентифікатор плагіна. Видається кожному користувачу окремо.
  • data-theme — тепер для стрічок можна обирати дві теми офрмлення — темну і світлу. Для більшості користувачів, що не схиблені на естетичності цього буде достатньо.
  • data-link-color — можна задавати у хеші колір посилань. Для мене цей параметр згодився, оскільки підсвічування посилань у твіттері не співпадає з кольором посилань в Octopress. Мені ріже око.
  • data-chrome — параметр, яким можна корегувати зовнішній вигляд блоку зі стрічкою. Я не знаю, на що розраховували в твіттері, але header та foother блоку виглядають жахливо. А завдяки додатковим підпараметрам це можна виправити. Ось вони:
    • noheader — прибирає header. Взагалі з цим ще можна погратись, але мені базової функціональності достатньо.
    • nofooter — прибирає footer.
    • noborders — прибирає будь-які роздільні лінії між твітами.
    • noscrollbar — приховує скрол. Стрічка статична, всі щасливі.
    • transparent — прибирає фон. Тобто, якщо ви використовуєте цей параметр, то data-theme до одного місця. В моєму випадку я увімкнув transparent, тому що я не позбавлений відчуття прекрасного, а стандартні теми твіттера для стрічки виглядають як кобиляче лайно і псують зовнішній вигляд мого затишного бложика.
  • data-border-color — змінюємо колір розділових смуг між твітами в стрічці.
  • lang — задає мову виводу стрічки. Української немає, ганьба!
  • data-tweet-limit — фіксує кількість твітів. В купі з data-chrome="noscrollbar" можна взагалі зробити вивід плагіна статичним і зафіксувати його на певній кількості останні твітів (у мене так і було до сьогодні).

Це все, що нам знадобиться для того, щоб нашвидкуруч перепиляти плагін. В специфікації є ще можливість виводити окремі листи, або твіти за конкретним хеш тегом, але мені це все непотрібно. Далі. Згадуємо з яких файлів в Octopress в нас складається плагін для твіттера:

/root_folder/source/_includes/asides/twiiter.html
/root_folder/source/javascripts/twitter.js
/root_folder/sass/partials/sidebar/_twitter.scss
/root_folder/source/images/bird_32_gray_fail.png
/root_folder/source/images/bird_32_gray.png

Вмикання/вимикання плагіна і його налаштування знаходяться в загальному файлі конфігурації _config.yml. Файли _twitter.scss, bird_32_gray_fail.png, bird_32_gray.png і java-скрипт twitter.js нам більше ніколи не знадобляться і тому відправляються на звалище історії. Не забуваємо і про те, що нам потрібно буде в файлі _sidebar.scss вимкнути підвантаження файлу стилів _twitter.scss, який ми видалили. Всі зміни щодо модифікації плагіна будуть відбуватись в файлі twiiter.html.

Спочатку їдемо по data-widget-id на цю сторінку. Після того, як ми тицьнемо на кнопочку «Створити віджет» нам дадуть наш персональний ідентифікатор віджета. Після цього можна в файл плагіна додати параметри, які вам потрібні для кастомізації срічки. У мене вийшов файл з ось такими параметрами і вмістом:

<section>
    <h1>Останні твіти</h1>

    <a class="twitter-timeline" href="https://twitter.com/SerhiyMakarenko" data-widget-id="YOUR-WIDGET-ID-HERE" data-chrome="nofooter transparent noscrollbar noheader" data-link-color="#1863a1" lang="RU">Завантажую…</a>

    <script type="text/javascript">
        !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
    </script>

    <script src="//platform.twitter.com/widgets.js" type="text/javascript"> </script>

    <p>Слідкуй за <a href="http://twitter.com/SerhiyMakarenko">@SerhiyMakarenko</a></p>

</section>

Після цього можна насолоджуватись новим виглядом своєї твіттер-стрічки в блозі. Зазначу, що тепер плагін вміє виводити і прев'юхи зображень, що може здатися незвичним. Особисто у мене до нової функціональності є дві претензії. По-перше, дуже шкода, що немає можливості задавати шрифт, в якому виводиться інформація. Шрифти, які використовує твіттер не гармонують із PT Serif та PT Sans Narrow, які я використовую. Тому, сподіваюсь, з часом з'явиться параметр font, який вирішить цю проблему. По-друге, не зовсім розумію, чому не підтримується українська мова (при використанні lang="UA" виводиться все англійською), інтерфейс вже давно локалізовано. Якщо б не це, то я б був повністю задоволений змінами.

Ледь не забув! В файлі _config.yml цю секцію можна видалити все, окрім twitter_tweet_button (якщо видалити цей параметер зникне кнопка шарінгу в твіттері під постом):

# Twitter
twitter_user: SerhiyMakarenko
twitter_tweet_count: 10
twitter_show_replies: false
twitter_follow_button: false
twitter_show_follower_count: false
twitter_tweet_button: true

В ній задаються параметри для java-скрипта twitter.js, який ми видалили. Тепер всі налаштування зовнішнього вигляду задаються безпосередньо в самому тілі плагіна, а його вмикання/вимикання робиться простим додаванням прямого посилання на файл twiiter.html в параметрах blog_index_asides, post_asides та page_asides. От тепер все. Насолоджуйтесь.