Реакции в Twitter. Вывод реакций на своём сайте.
Заметные публикации распространяются по интернету быстро. Тем более популярного ресурса. Используя API Twitter можно просмотреть, у кого в твиттах отмечена ваша страница. Просмотреть описание того, что он думает об этой странице. Если всю эту информацию вывести вместе, то получатся своего рода twitter-комментарии к странице. Мне то же захотелось сделать такое. И сделал — сейчас внизу под кнопкой твиттера можно просмотреть реакции в твиттере на публикацию. Посмотрим, как я это сделал.
Самое первое и очевидное моё действие — поиск плагина для WordPress. Порыскав, просмотрев описание нашёл один, который по описанию должен был выводить реакции — Twitter Comments — Twitoaster. Но, о горе. Присмотревшись увидел — плагин больше не работает из за закрытия API, с которым он работал. Искал ещё и ещё плагины и в конец мне надоело их искать. Начал искать как сделать своими руками. Наткнулся на статью, на основе которой и сделал вывод твитов.
Опишу в кратце для тех, кто не любит читать или для тех, кто не знает английского. Автор так же находился в поиске плагина, но работающего не нашёл. После обращался в документации API Twitter, но там есть ограничение на поиск — можно искать твиты не более чем недельной давности. А нам нужны все твиты. После он нашёл Topsy c otterapi решил этим API воспользоваться. Как я понял Topsy — это поисковая машина по социальным ресурсам.
Как это сделать, рассмотрим пошагово
1. по первых создадим пустой блок на странице, куда и будем писать эти твиты.
|
1 |
<div id="twitter-reactions"></div> |
2. далее обращаемся к otter api за нужной информацией — данные этот сервис возвращает в JSON
|
1 |
<script src="http://otter.topsy.com/trackbacks.json?callback=twitterReactions&perpage=30&url=page_address"></script> |
Желательно данный код вставлять в конце страницы, например перед </body>
Дополнительную информацию по использованию API вы можете узнать на странице API.
Опишем параметры, с которыми обращаемся к http://otter.topsy.com/trackbacks.json
callback=twitterReactions — данный параметр означает, что будет выдаче будет не просто JSON, а непосредственный вызов функции twitterReactions, в которую передаются данные в JSON. Данную функцию, которая будет принимать JSON, обрабатывать и записывать в блок с id twitter-reactions вы напишем чуть ниже.
perpage=30 — сколько выводить на странице твитов
url=page_eddress — адрес страницы, вместо page_eddress вставляем адрес нужной страницы
3. в месте подключения предыдущего скрипта происходит вызов функции twitterReactions, в которую передаётся вся информация.
Напишем эту функцию. Код с этой функцией надо вставить до кода обращения к API, например между мета-тегами страницы.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
function twitterReactions (json) { // Checking the JSON response var results = json.response.list; // If there are any results, iterate over them if (typeof results !== "undefined") { var resultsLength = results.length, twitterReactionsPresenter = document.getElementById("twitter-reactions"), twitterReactionsHeader = document.createElement("span"), tweets = '<ul class="comments">', twitterReactionsText = "Реакции в Twitter на публикацию поста: " + resultsLength, current, currentAuthor, tweet; // Creating header before tweets container twitterReactionsHeader.id = "twitter-reactions-header"; twitterReactionsHeader.innerHTML = twitterReactionsText; twitterReactionsPresenter.parentNode.insertBefore(twitterReactionsHeader, twitterReactionsPresenter); // Iterating over all tweets for (var i=resultsLength-1; i>=0; i--) { current = results[i]; currentAuthor = current.author; tweet = '<li>'; tweet += '<img src="' + currentAuthor.photo_url + '" alt="" width="48" height="48" />'; tweet += '<a href="' + currentAuthor.url + '">' + currentAuthor.nick + " (" + currentAuthor.name + ")" + "</a>"; tweet += " " + current.date_alpha; tweet += '<div class="comment-text">' + current.content.replace(/(http:\/\/[\w\.\d%\/\-\_]+)/gi, '<a href="$1">$1</a>') + '</div>'; tweet += '</li>'; tweets += tweet; } tweets += '</ul>'; // Apply all tweets into the tweet presenting element twitterReactionsPresenter.innerHTML = tweets; } } |
Данная функция принимает JSON, обрабатывает и записывает всё в ранее созданный пустой блок с id twitter-reactions.
Далее мы через CSS подгоняем нужный нам вид блока twitter-reactions и всё готово.
Вот пример, как это всё работает.
Стоит наверное отметить, что данный функционал есть у системы комментирования DISQUS.
Ну и наверняка всё же есть какой нибудь плагин для WordPress.
