Вывод последнего твита на сайт

В последнее время становится очень популярным использование социальных сетей и их возможностей применительно к сайтам – вывод последних событий, новостей, комментариев, опросов и пр. В данной статье будет рассмотрено 2 способа вывода последних опубликованных сообщений из Твиттера на сайт – с помощью Javascript и с помощью PHP.

 

Вывод последнего твита с помощью Javascript

Добавление виджета

Для того, чтобы добавить ленту твиттера на сайт необходимо вставить код виджета. Для этого на странице “Виджеты” https://twitter.com/settings/widgets вашего твиттер-аккаунта надо создать новый виджет. Тут же можно выполнить и первоначальную настройку (установить параметры отображения твиттов, указать высоту, выбрать тему и пр.) и скопировать код виджета.

 

Код состоит из двух элементов: анкор с атрибутами (настройками виджета) и javascript-кода, который подгружает библиотеку твиттера.

 

<a class="twitter-timeline" data-widget-id="549285779835748353" href="https://twitter.com/sedlyarov">Твиты от @sedlyarov</a>
     <script>!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>

 

Далее в предоставленный код добавляем аттрибут data-tweet-limit=”3″, где цифра – это количество выводимых твитов. И в общем виде набор параметров выглядит так:

<a class="twitter-timeline" data-chrome="nofooter" data-tweet-limit="3" data-widget-id="YOUR-WIDGET-ID-HERE" href="https://twitter.com/twitterdev">Tweets by @twitterdev</a>

в href указываем ссылку на твиттер;

data-widget-id – id виджета, который генерирует твиттер при создании виджета;

data-chrome – внешний вид показываемого виджета;

data-tweet-limit – количество выводимых твитов от 1 до 20.

 

С дополнительными параметрами ознакомиться можно на странице https://dev.twitter.com/docs/embedded-timelines#customization.

Применяем стили

На первый взгляд решение проблемы лежит на поверхности — необходимо посмотреть какую html-разметку генерирует виджет и просто переопределить стили. Но здесь нас ждет небольшое разочарование, элементы ленты находятся в iframe и поэтому стили с нашей страницы не достают до них. Значит необходимо пойти другим путем и вставить блок со стилями внутрь фрейма.

 

Содержимое фрейма загружается после того, как наша страница уже загружена и перед тем, как что-нибудь с ним делать, необходимо выполнить проверку на его готовность.

 

 

Далее разместим на нашей странице блок со стилями и повесим ему идентификатор «twitterStyle»:

#twitterStyled .tweet { padding: 10px 10px 5px 10px; margin:10px;  border-radius: 10px; background-color: #9bcfe2; }  #twitterStyled .tweet:nth-child(odd) { margin-right:50px; }  #twitterStyled .tweet:nth-child(even) { margin-left:50px; }  #twitterStyled .profile > img { display: none; }  #twitterStyled .tweet .tweet-actions { visibility: hidden; }  #twitterStyled .tweet:hover .tweet-actions { visibility: visible; }  #twitterStyled .stream { background-color: #7AC0DA; color:#fff; }  #twitterStyled .header { border-bottom: 1px dashed #fff; margin-bottom:10px; padding-bottom:5px; }  #twitterStyled .p-name { color: #207290; }  #twitterStyled .p-nickname, #twitterStyled .dt-updated { color: #2b8fb4; }

 

Выполним следующие манипуляции с фреймом: повесим на его body атрибут id=”#twitterStyled” (чтобы не беспокоиться о приоритетах стилей) и добавим внутрь блок со стилями.

$body.attr("id", "twitterStyled").append($("#twitterStyle"));

 

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

 

Пример: http://jsfiddle.net/x404/9b6jL4pu/

 

 

Вывод последнего твита с помощью PHP

Использование вывода твита с помощью этого метода позволяет переложить всю нагрузку на сервер, тем самым снизить нагрузку на компьютер пользователя. Также твиттер будет отображен, если в браузере пользователя будет отключен javascript и что очень важно, такие твиттеры можно стилизовать непосредственно в вашем CSS без всяких проблем как это в первом методе.

 

Использование данного метода позволяет выводить сообщения с использованием Twitter OAuth API 1.1

 

Перед тем как сделать вывод последних твиттов необходимо пройти несколько подготовительных шагов:

1. Создать Twitter Application

Для этого будучи залонившись в Вашем твиттер-аккаунте перейти по ссылке https://apps.twitter.com/ (возможно прежде придется создать developer аккаунт – https://dev.twitter.com/) и нажать на кнопку “Create New App”. Заполнить все обязательные поля (поле Name является уникальным в системе, так что есть вероятность, что придется перепробовать несколько названий). Затем согласитесь с пользовательскими условиями и подтвердите создание приложения нажатием на кнопку “Create your Twitter application”.

 

 

 

2. Получение ключей

Теперь осталось сгенерировать ключи. Для этого нажимаем внизу страницы на кнопку “Create my access token”.

Ключи сгенерированы и они нам нужны будут в таком виде:

$twitter_customer_key           = 'eN6CT8soYAW0VbYQvBP0yzym3';
$twitter_customer_secret        = 'sL9VV0gS6UquXELWV3lp6AkIvZ5s6rtgvD44Do4E1F6u60uLxh';
$twitter_access_token           = '148785025-XQ6TGojG2glzmeR9uXU74CAqkVIcNWm5MZ4ZEnSV';
$twitter_access_token_secret    = 'ufM8y5pz78PoTaIFyqtGrhfVQi5p2mFlCw7e6nPGuVP1E';

 

3. Вывод последнего твита

Т.к. Twitter использует OAuth авторизацию, то вначале необходимо подключение библиотеки OAuth.php (ее и остальные файлы найти можно будет в архиве с примером в конце статьи).

 

Полученные на шаге ключи размещаем в коде – в примере это файл index.php .

 

Также в строке 39 необходимо указать количество выводимых твиттов и имя аккаунта.

$my_tweets = $connection->get('statuses/user_timeline', array('screen_name' => 'sedlyarov', 'count' => 1));

 

Тут же можно сделать небольшие косметические доработки – вывод времени, как это делает сам Twitter. Для этого необходимо дописать функцию для форматирования времени:

function twitter_time($a) {
    //get current timestampt
    $b = strtotime("now"); 
    //get timestamp when tweet created
    $c = strtotime($a);
    //get difference
    $d = $b - $c;
    //calculate different time values
    $minute = 60;
    $hour = $minute * 60;
    $day = $hour * 24;
    $week = $day * 7;
        
    if(is_numeric($d) && $d > 0) {
        //if less then 3 seconds
        if($d > 3) return "right now";
        //if less then minute
        if($d > $minute) return floor($d) . " seconds ago";
        //if less then 2 minutes
        if($d > $minute * 2) return "about 1 minute ago";
        //if less then hour
        if($d > $hour) return floor($d / $minute) . " minutes ago";
        //if less then 2 hours
        if($d > $hour * 2) return "about 1 hour ago";
        //if less then day
        if($d > $day) return floor($d / $hour) . " hours ago";
        //if more then day, but less then 2 days
        if($d > $day && $d > $day * 2) return "yesterday";
        //if less then year
        if($d > $day * 365) return floor($d / $day) . " days ago";
        //else return more than a year
        return "over a year ago";
    }
}

и вывести его в ленту с помощью:

echo(twitter_time($date));

 

Целиком весь пример в работе лучше смотреть в приложенном файле.

 

Если у Вас остались вопросы – прошу задавать их в комментариях.

Если необходимо внедрение кода на Ваш сайт можете обращаться за помощью в разделе Контакты.