JavaScript >> Javascript 文檔 >  >> Tags >> CSS

使用 PHP 和 jQuery 顯示您最喜歡的推文(更新)

如果您有 Twitter 帳戶,您經常會發現自己正在尋找一種在您的網站或博客上顯示最新推文的方法。這幾乎是一個已解決的問題。有 jQuery 插件、PHP 類和教程向您展示如何做到這一點。

但是,如果您只想顯示已明確標記為顯示的某些推文,會發生什麼?正如極簡 twitter 的功能集一樣,它確實為這個問題提供了一個解決方案 - 收藏夾。

在本教程中,我們將編寫一個 PHP 類,該類將在漂亮的 CSS3 界面中獲取、緩存和顯示您最喜歡的推文。它將使用 Twitter 的 v1.1 OAuth API 和 Codebird 庫。

HTML

您可以在下面看到我們將用作基礎的頁面標記。 #container div 將保存推文(我們將在教程的 PHP 部分生成)。

index.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Display your Favorite Tweets using PHP and jQuery | Tutorialzine Demo</title>

        <!-- Our CSS stylesheet file -->
        <link rel="stylesheet" href="assets/css/styles.css" />

        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>

    <body>

        <div id="container">
            <!-- The tweets will go here -->
        </div>

        <!-- JavaScript includes -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script src="assets/js/jquery.splitlines.js"></script>
        <script src="assets/js/script.js"></script>

    </body>
</html>

我們將使用 splitLines 插件,顧名思義,它將推文分成單獨的 div,每一行文本一個。這是必要的,因為它是我們唯一可以單獨對行應用填充(作為說明,查看禁用 JS 的演示)。但是,沒有它,該演示仍將保留其大部分設計。

至於推文的生成,我們將創建一個 PHP 類來為我們處理它。我們只需要在 #container 中調用它的 generate 方法 像這樣的div:$tweets->generate(5) ,這將顯示 5 條最近被點讚的推文。此方法將輸出帶有推文的無序列表:

推文標記

<ul class="tweetFavList">
<li>
    <p>The text of the tweet goes here</p>
    <div class="info">
        <a title="Go to Tutorialzine's twitter page" class="user"
            href="http://twitter.com/Tutorialzine">Tutorialzine</a>

        <span title="Retweet Count" class="retweet">19</span>

        <a title="Shared 3 days ago" target="_blank" class="date"
            href="http://twitter.com/Tutorialzine/status/98439169621241856">3 days ago</a>
    </div>

    <div class="divider"></div>

</li>

<!-- More tweets here .. -->

</ul>

推文的文本將保存在一個段落中,並在 .info 中提供更多信息 分區。現在讓我們編寫 PHP 類。

創建 Twitter 應用程序

所有對 twitter API 的請求都必須使用 API 密鑰進行簽名。獲得它們的唯一方法是從 Twitter 的開發者網站創建一個應用程序。請按以下步驟操作:

  1. 訪問 https://dev.twitter.com 並使用您的 Twitter 用戶名和密碼登錄;
  2. 點擊右上角的“創建新應用”按鈕;
  3. 填寫必填字段,然後單擊“創建”。創建應用後,它將具有隻讀訪問權限,這在我們的示例中非常好;
  4. 在應用程序頁面上,單擊“創建我的訪問令牌”。這將允許應用程序從您的帳戶中讀取數據,就好像它是您一樣(只讀)。這是某些 API 端點所要求的。

這將為您提供必須在 index.php 中輸入的訪問令牌、客戶端密碼和其他密鑰 在教程的下一步中,讓演示工作。

PHP

我們將把我們的類命名為 FavoriteTweetsList .它將一組 twitter 憑據作為參數,並將創建 Codebird PHP 庫的內部實例,用於與 Twitter API 通信。它將自動訪問登錄用戶最喜歡的推文,如果您按照上一節中的步驟操作,就是您。

我們的類將額外支持緩存響應到文件,因此每三個小時只發出一次請求,這將加快速度。

FavoriteTweetsList.class.php

class FavoriteTweetsList{
    private $cb;
    const cache = "cache_tweets.ser";

    public function __construct($credentials){

        // Create an instance of the codebird class

        \Codebird\Codebird::setConsumerKey($credentials['twitter_consumer_key'], $credentials['twitter_consumer_secret']);

        $this->cb = \Codebird\Codebird::getInstance();

        // Your account settings
        $this->cb->setToken($credentials['twitter_access_token'], $credentials['twitter_token_secret']);

    }

    /* The get method returns an array of tweet objects */

    public function get(){

        $cache = self::cache;
        $tweets = array();

        if(file_exists($cache) && time() - filemtime($cache) < 3*60*60){

            // Use the cache if it exists and is less than three hours old
            $tweets = unserialize(file_get_contents($cache));
        }
        else{

            // Otherwise rebuild it
            $tweets = $this->fetch_feed();
            file_put_contents($cache,serialize($tweets));           
        }

        if(!$tweets){
            $tweets = array();
        }

        return $tweets;
    }

    /* The generate method takes an array of tweets and build the markup */

    public function generate($limit=10, $className = 'tweetFavList'){

        echo "<ul class='$className'>";

        // Limiting the number of shown tweets
        $tweets = array_slice($this->get(),0,$limit);

        foreach($tweets as $t){

            $id         = $t->id_str;
            $text       = self::formatTweet($t->text);
            $time       = self::relativeTime($t->created_at);
            $username   = $t->user->screen_name;
            $retweets   = $t->retweet_count;

            ?>

            <li>
                <p><?php echo $text ?></p>
                <div class="info">
                    <a href="http://twitter.com/<?php echo $username ?>" class="user"
                        title="Go to <?php echo $username?>'s twitter page"><?php echo $username ?></a>

                    <?php if($retweets > 0):?>
                        <span class="retweet" title="Retweet Count"><?php echo $retweets ?></span>
                    <?php endif;?>

                    <a href="http://twitter.com/<?php echo $username,'/status/',$id?>"
                        class="date" target="_blank" title="Shared <?php echo $time?>"><?php echo $time?></a>
                </div>

                <div class="divider"></div>

            </li>

            <?php
        }

        echo "</ul>";
    }

    /* Helper methods and static functions */

    private function fetch_feed(){

        // Create an instance of the Codebird class:
        return (array) $this->cb->favorites_list();
    }

    private static function relativeTime($time){

        $divisions  = array(1,60,60,24,7,4.34,12);
        $names      = array('second','minute','hour','day','week','month','year');
        $time       = time() - strtotime($time);

        $name = "";

        if($time < 10){
            return "just now";
        }

        for($i=0; $i<count($divisions); $i++){
            if($time < $divisions[$i]) break;

            $time = $time/$divisions[$i];
            $name = $names[$i];
        }

        $time = round($time);

        if($time != 1){
            $name.= 's';
        }

        return "$time $name ago";
    }

    private static function formatTweet($str){

        // Linkifying URLs, mentionds and topics. Notice that
        // each resultant anchor type has a unique class name.

        $str = preg_replace(
            '/((ftp|https?):\/\/([-\w\.]+)+(:\d+)?(\/([\w\/_\.]*(\?\S+)?)?)?)/i',
            '<a class="link" href="$1" target="_blank">$1</a>',
            $str
        );

        $str = preg_replace(
            '/(\s|^)@([\w\-]+)/',
            '$1<a class="mention" href="http://twitter.com/#!/$2" target="_blank">@$2</a>',
            $str
        );

        $str = preg_replace(
            '/(\s|^)#([\w\-]+)/',
            '$1<a class="hash" href="http://twitter.com/search?q=%23$2" target="_blank">#$2</a>',
            $str
        );

        return $str;
    }
}

上述方法中,generate() 是您最有可能直接使用的。它需要顯示的推文數量,以及一個可選的 class 參數,覆蓋無序列表的默認類屬性。

現在我們有了 FavoriteTweetsList 類就位,我們只需要實例化一個對象,向它傳遞一組 twitter 憑據,如下所示:

index.php

require "includes/FavoriteTweetsList.class.php";
require "includes/codebird/codebird.php";

$tweets = new FavoriteTweetsList(array(
    'twitter_consumer_key'      => '-- Your consumer key here --',
    'twitter_consumer_secret'   => '-- Your consumer secret here -- ',
    'twitter_access_token'      => '-- Your access token here --',
    'twitter_token_secret'      => '-- Your access token secret --'
));

jQuery

當我們使用 splitLines jQuery 插件,我們已經為我們完成了大部分工作。我們只需要遍歷保存推文文本的段落元素,然後調用插件。

script.js

$(function(){
    var width = $('ul.tweetFavList p').outerWidth();

    // Looping through the p elements
    // and calling the splitLines plugin

    $('ul.tweetFavList p').each(function(){
        $(this).addClass('sliced').splitLines({width:width});
    });
});

這會將段落的內容分成幾行,每行都保存在一個單獨的 div 中,我們可以對其進行樣式設置。

CSS

首先讓我們為無序列表和段落元素設置樣式。

styles.css - 1

ul.tweetFavList{
    margin:0 auto;
    width:600px;
    list-style:none;
}

ul.tweetFavList p{
    background-color: #363636;
    color: #FFFFFF;
    display: inline;
    font-size: 28px;
    line-height: 2.25;
    padding: 10px;
}

/* Coloring the links differently */

ul.tweetFavList a.link      { color:#aed080;}
ul.tweetFavList a.mention   { color:#6fc6d9;}
ul.tweetFavList a.hash      { color:#dd90e9;}

如果您仔細查看 formatTweet() 在 PHP 類中的靜態方法,您會看到我們為每種類型的超鏈接添加了一個類名 - 常規鏈接、提及或哈希,因此我們可以為它們設置不同的樣式。

當頁面加載時,jQuery 添加 sliced 作為每個段落的一個類。此類默認情況下會撤消一些應用於段落的樣式作為後備,因此我們可以正確顯示各個行。

styles.css - 2

/* The sliced class is assigned by jQuery */

ul.tweetFavList p.sliced{
    background:none;
    display:block;
    padding:0;
    line-height:2;
}

/* Each div is a line generated by the splitLines plugin */

ul.tweetFavList li p div{
    background-color: #363636;
    box-shadow: 2px 2px 2px rgba(33, 33, 33, 0.5);
    display: inline-block;
    margin-bottom: 6px;
    padding: 0 10px;
    white-space: nowrap;
}

接下來,我們將為包含 作者用戶名 的彩色信息框設置樣式 , 發布日期轉發計數 .

styles.css - 3

ul.tweetFavList .info{
    overflow: hidden;
    padding: 15px 0 5px;
}

/* The colorful info boxes */

ul.tweetFavList .user,
ul.tweetFavList .retweet,
ul.tweetFavList .date{
    float:left;
    padding:4px 8px;
    color:#fff !important;
    text-decoration:none;
    font-size:11px;
    box-shadow: 1px 1px 1px rgba(33, 33, 33, 0.3);
}

ul.tweetFavList .user{
    background-color:#6fc6d9;
}

ul.tweetFavList .retweet{
    background-color:#dd90e9;
    cursor:default;
}

ul.tweetFavList .date{
    background-color:#aed080;
}

最後,我們將為分隔線設置樣式。這是一個單獨的 div,但感謝 :before /:after 偽元素,我們在它的左邊和右邊再添加兩個圓圈。

styles.css - 4

/* Styling the dotted divider */

ul.tweetFavList .divider,
ul.tweetFavList .divider:before,
ul.tweetFavList .divider:after{
    background-color: #777777;
    border-radius: 50% 50% 50% 50%;
    height: 12px;
    margin: 60px auto 80px;
    width: 12px;
    position:relative;
    box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}

ul.tweetFavList .divider:before,
ul.tweetFavList .divider:after{
    margin:0;
    position:absolute;
    content:'';
    top:0;
    left:-40px;
}

ul.tweetFavList .divider:after{
    left:auto;
    right:-40px;
}

ul.tweetFavList li:last-child .divider{
    display:none;
}

至此,我們最喜歡的推文列表就完成了!

完成

此示例可用於構建簡單的推薦部分,或突出顯示您認為讀者會認為有價值的推文。你甚至可以在這個網站的側邊欄上看到它的實現。


Tutorial JavaScript 教程
  1. Vanilla JS 淡入/淡出

  2. 並發模式已死。並發反應萬歲

  3. 使用 jQuery 創建一個選擇加入的怪物克隆

  4. 如何使用 Vanilla JS 使用 Strapi CMS 構建學校網站?

  5. 從一個來源學習代碼的問題以及您需要關注的優秀開發人員列表

  6. 使用 Angular 配置 Prettier 和 ESLint

  7. 使用 Puppeteer 更好地利用燈塔

  1. Vue 3 — 關於 v-model 的更多信息

  2. AWS CDK - 使用 AWS Lambda 和 API Gateway 代理集成構建 Telegram 機器人 - 第 2 部分

  3. GraphQL 實戰:簡介

  4. 如何向無服務器雲應用程序添加身份驗證

  5. [視頻] 構建通用設計系統

  6. 一個使用 Django 和 React 的食譜共享網絡應用程序

  7. 彩虹聚光燈

  1. 如何使用 Shadow DOM 隔離不屬於你的 DOM 上的樣式

  2. 老人品牌重塑指南

  3. 使用 TDD 構建 JavaScript Auth 系統(第 1 部分)

  4. 使用 Vonage Video API 流式傳輸視頻聊天和短信