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

 

twitter

 

Вывод последнего твита с помощью 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».

 

создание twitter token ключей 

 

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

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

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

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

Получение twitter token ключей

 

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

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

 

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

 

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

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

php код вставки последнего твита

 

Тут же можно сделать небольшие косметические доработки — вывод времени, как это делает сам 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));

 

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

 

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

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

comments powered by HyperComments
Понравился материал - нажмите, пожалуйста, на кнопку
=)
Константин
2015-04-29 05:48:29
Спасибо за информацию!