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

推特列表支持的粉絲頁面

簡介

最近,Twitter 在他們的網站上推出了一項很棒的新功能——列表。您現在可以創建和編譯一個 twitter 用戶列表,讓其他人更容易一次關注所有用戶。

同時,他們擴展了 API 以包含列表管理功能。這使我們能夠使用這些新工具創建一個可以反向翻轉列表的小部件 - 您可以將其放在側邊欄中的粉絲頁面,允許您的訪問者填寫他們的推特名稱並在您的推特中加入特製的粉絲列表帳戶。

所以下載示例文件,讓我們開始編碼吧!

第 1 步 - XHTML

像往常一樣,我們從 XHTML 開始。由於該小部件完全基於 AJAX,因此這是您需要直接包含到您的站點中的唯一代碼。其餘部分異步獲取。

demo.html

<div id="fanPage">

<div class="title">

<a class="fanPageLink" href="http://twitter.com" title="Go to fanpage!"><img src="img/twitter-bird.png" id="twitBird" alt="twitter bird" /></a>
<a class="fanPageLink" href="http://twitter.com" title="Go to fanpage!">Fanpage</a>

</div>

<div class="content">
<div class="fans"><img src="img/loader.gif" alt="loading.." /></div>
</div>

<div class="subscribe">
<a href="#" class="joinFP">Join!</a>

<div class="membersCount">
<a class="fanPageLink" id="counter" href="http://twitter.com" title="Total Fans"></a>
</div>

</div>
</div>

這裡我們有主 fanPage 容器 DIV,它保存我們的小部件,在其中我們有 title , 內容訂閱 DIV。

這些稍後使用 CSS 進行樣式化,並通過 AJAX 填充數據。另請注意,我們有三個鏈接共享一個 FanPageLink 班級。目前他們指向 twitter 的主站點,但稍後我們將編輯他們的 href 動態屬性,並將它們指向列表的成員頁面。

第 2 步 - CSS

一旦我們有了標記,我們就可以移動到 CSS。這裡只介紹了小部件直接使用的規則。您可以在源存檔中查看 demo.css 中的所有代碼。

demo.css

#fanPage{
    /* This is the container that holds the widget */
    background-color:#002233;
    color:white;
    height:300px;
    margin:30px auto;
    padding:10px;
    text-align:left;
    width:170px;
}

#fanPage a, #fanPage a:visited{
    /* This styles the title and total fans links */
    color:white;
    text-decoration:none;
}

#fanPage a:hover{
    text-decoration:underline;
}

.title{
    /* The title on the top */
    background-color:#013853;
    font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
    font-size:16px;
    letter-spacing:1px;
    margin:3px 0 10px;
    padding:4px 8px;
    position:relative;
    text-align:right;
    text-transform:uppercase;
}

#twitBird{
    /* The twitter icon on the top */
    left:-10px;
    position:absolute;
    top:-28px;
}

.content{
    /* The div that holds the twitter avatars */
    background-color:#eeeeee;
    padding:6px;
    text-align:left;
    height:208px;
    position:relative;
    color:#333333;
}

#mask{
    /* Inserted once you click the green "Join" button */
    font-size:10px;
    left:0;
    padding:10px;
    position:absolute;
    top:0;
}

#mask label{
    display:block;
    font-weight:bold;
    margin:8px 0 4px;
    text-transform:uppercase;
}

#twitterName{
    /* The twitter name input box */
    background-color:#FCFCFC;
    border:1px solid #CCCCCC;
    color:#333333;
    font-family:Arial,Helvetica,sans-serif;
    font-size:12px;
    padding:2px;
}

#mask a.greyButton,#mask a.greyButton:visited{
    /* The default state of the gray join button */
    display:inline-block;
    height:19px;
    margin-top:10px;
    padding:6px 0 0;
    text-align:center;
    width:70px;
    background:url(img/button_gray.png) no-repeat;
    color:#222222;
}

#mask a.greyButton:hover{
    /* The hover effect on the "Join" button */
    background-position:bottom left;
    text-decoration:none;
}

div#mask a, div#mask a:hover, div#mask a:visited{
    color:#0196e3;
}

#response{
    /* The div that holds the response messages in the "Join area" */
    margin-top:10px;
    font-size:10px;
    text-align:center;
}

.subscribe{
    position:relative;
}

.membersCount{
    /* The total number of fans div */
    position:absolute;
    right:0;
    top:5px;
    color:white;
    display:block;
    font-size:22px;
    font-weight:bold;
}

.content img{
    /* The twitter avatars */
    margin:2px;
}

#fanPage, .content, .title{
    /* Rounding three elements at once */
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
}

a.joinFP, a.joinFP:hover{
    /* The green "Join" button */
    display:block;
    background:url(img/buttons.png) no-repeat;
    width:94px;
    height:38px;
    text-indent:-9999px;
    margin:5px 0 0 -4px;
}

a.joinFP:hover{
    /* The hover state of the button */
    background-position:bottom left;
}

a img{
    border:none;
}

這裡沒有什麼接地氣。請注意我們如何同時為三種類型的元素設置 CSS 圓角規則(第 127 行 )。這樣我們可以更輕鬆地編輯小部件的圓度(如果所有瀏覽器都直接支持border-radius,並且不需要供應商特定的代碼,那就更好了)。

您還可以在下面看到我用來製作懸停按鈕的技術的演示。

第 3 步 - jQuery

正如我之前提到的,整個小部件都是基於 AJAX 的。這實際上是必要的,因為與 twitter API 的通信會導致網站停止運行。

下面是代碼背後的主要思想:

  1. 將包含小部件的頁面加載到訪問者的瀏覽器中;
  2. 有了它,script.js (包含我們所有的 jQuery 代碼)被執行;
  3. $(document).ready() 正在運行;
  4. 發起AJAX請求,從load.php中加載數據,成功時顯示;
  5. 所有帶有 fanPageLink 的鏈接 類指向 twitter 上的列表成員頁面;
  6. 點擊功能綁定到綠色加入按鈕;

script.js 的前半部分

$(document).ready(function(){
    /* Executed on DOM load */

    $.getJSON("load.php",function(data){

        /* Loading the widget data */
        if(data.error)
        {
            /* If there is an error, output and exit */
            $(".content").html(data.error);
            return false;
        }

        $(".content .fans").html('');
        /* Remove the rotating GIF */

        $.each(data.members,function(i,val){

            /* Loop through all the shown members and add them to the .content DIV */
            $(".content .fans").append('<a href="http://twitter.com/'+i+'" target="_blank"><img src="'+val+'" width="48" height="48" title="'+i+'" alt="'+i+'" /></a>');
        });

        $('#counter').html(data.membersCount);
        /* Set the member counter */

        $('.fanPageLink').attr('href',data.fanPage+'/members').attr('target','_blank');
        /* Set the .fanPageLink-s to point to the profile page */
    });

    $('.joinFP').click(function(e){

        /* IF the green button has been clicked.. */

        if($('.content').html().indexOf('id="mask"')!=-1)
        {
            /* ..and the form is already shown exit */
            e.preventDefault();
            return false;
        }

        /* ..in the other case, start a fade out effect */
        $(".content .fans").fadeOut("slow",function(){

            $('.content').append('<div id="mask">\
            To join our fan page, you just have to fill in your name\
            <label>Twitter username:</label>\
            <input id="twitterName" name="twitter" type="text" size="20" />\
            <a href="" class="greyButton" onclick="sendData();return false;">Join!</a> or <a href="#" onclick="cancel();return false;">cancel</a>\
            <div id="response"></div>\
            </div>');
        });

        /* Prevent the link from redirecting the page */
        e.preventDefault();
    });
});

稍後,如果點擊綠色的“加入”按鈕,頭像會淡出,並在其位置出現一個表單。

代碼的後半部分處理將數據發送到 add.php

script.js 的後半部分

function sendData()
{
    /* This function sends the form via AJAX */
    $('#response').html('<img src="img/loader.gif" />');
    var twitter = $('#twitterName').val();
    if(!twitter.length)
    {
        $('#response').html('<span style="color:red">Please fill in your twitter username.</span>');
        return false;
    }

    $.ajax({
        type: "POST",
        url: "add.php",
        data: "twitter="+encodeURIComponent(twitter),
        /* Sending the filled in twitter name */
        success: function(msg){

            /* PHP returns 1 on success, and 0 on error */
            var status = parseInt(msg);

            if(status)
            {
                $('#response').html('Thank you for being a fan! You will be added in a few minutes. <a href="#" onclick="cancel();return false">Hide this form</a>.');
                $('#twitterName').val('');
            }
            else
                $('#response').html('<span style="color:red">There is no such twitter user.</span>');
        }
    });
}

function cancel()
{
    /* Hides the "Join" form */
    $('#mask').remove();
    $('.content .fans').fadeIn('slow');
}

如果用戶單擊輸入字段下方新創建的灰色“加入”按鈕,則會調用 sendData 函數。它還檢查 AJAX 請求的返回狀態以選擇正確的狀態消息。

還要記住,對於上面的代碼,我們需要包含 jQuery 庫和 script.js 進入文檔的頭部:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>

第 4 步 - PHP

現在我們已經了解了前端的所有代碼,現在是本教程的最後一部分 - PHP 後端的時候了。

PHP 的重要任務是與 twitter API 進行通信。這是通過一個特殊的擴展來完成的 - CURL .為了方便,我做了一個特殊的函數——curlMe 它封裝了 CURL 代碼,並且可以更輕鬆地從腳本中的其他位置發送請求。

functions.php

function error($msg)
{
    // Format the error as a JSON object and exit the script:
    die('{error:"'.$msg.'"}');
}

function fetchElement($element,$src)
{
    // Takes in an XML document as string $src, and returns the required nod value

    $match = array();
    preg_match_all('/<'.$element.'>(.*)<\/'.$element.'>/u',$src,$match);
    // Matching the required property in the xml

    return $match[1];

    // ..and returning it
}

function curlMe($url,$gp='')
{
    // Using CURL to communicate with the Twitter API

    global $username,$password;

    $cc = curl_init();

    curl_setopt($cc, CURLOPT_URL, $url);

    if($gp)
    {
        // If the $gp parameter is set, send it by a POST request:
        curl_setopt($cc, CURLOPT_POST, 1);
        curl_setopt($cc, CURLOPT_POSTFIELDS, $gp);
    }
    else
        curl_setopt($cc, CURLOPT_GET, 1);

    curl_setopt($cc, CURLOPT_HTTPAUTH, CURLAUTH_BASIC);
    curl_setopt($cc, CURLOPT_USERPWD, $username.':'.$password);
    curl_setopt($cc, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($cc, CURLOPT_RETURNTRANSFER, 1);

    $xml = curl_exec($cc);
    curl_close($cc);

    return $xml;
}

現在我們已經定義了這些函數,我們可以在任何 PHP 文件中使用它們,只需包含或要求 functions.php 在腳本中。

在列表中添加新粉絲是在 add.php 中完成的

添加.php

require "functions.php";
require "config.php";

if(!$_POST['twitter'])
die('0');

$userXML = curlMe("http://twitter.com/users/show.xml?screen_name=".urlencode($_POST['twitter']));
// Initiating an API request

if(strpos($userXML,'<error>Not found</error>') !== false)
{
    // If there is no such user, return an error:
    die('0');
}

// fetchElement returns an array, and the list function assigns its first element to $id:
list($id) = fetchElement('id',$userXML);

curlMe('http://api.twitter.com/1/'.$username.'/'.$list.'/members.xml','id='.$id);

echo 1;

與任何 API 一樣,存在使用限制。這樣做是為了防止濫用服務並破壞每個人的一天。 Twitter 強制執行每小時 150 個請求的規則,這限制了我們可以為 twitter 列表獲取數據的次數。

這就是為什麼我構建了一個簡單的緩存機制,在向 API 發出請求後將獲取的數據存儲 15 分鐘。

以下是它的工作原理:

  1. 小部件向 load.php 發出 AJAX 請求;
  2. php 腳本檢查是否存在緩存文件;
  3. 如果是,則獲取其內容並返回;
  4. 如果沒有,或者緩存超過 15 分鐘,則從 API 獲取數據,將其存儲在緩存文件中供以後使用並返回;

這種簡單的機制可確保小部件始終有空閒的 API 調用。可以看下面的代碼:

加載.php

require "functions.php";
require "config.php";

$cache_file = 'twitter.cache';
// The cache file

$cache_expire_time = 15*60;
// The cache expires after 15 minutes

$twitterers_shown = 12;

// If you are making changes and want to destroy the cache while testing,
// uncomment the line below:

//$cache_expire_time = 1;

if(!file_exists($cache_file) || time() - filemtime($cache_file) > $cache_expire_time)
{
    // If there isn't a cache file, or if it is older than allowed

    $xml = curlMe("http://api.twitter.com/1/".$username."/".$list."/members.xml");
    //$xml = curlMe("http://api.twitter.com/1/chouka/design/members.xml");

    if(strpos($xml,'<error>Not found</error>') !== false)
    {
        // If there is not such a list, create it automatically:
        curlMe('http://api.twitter.com/1/'.$username.'/lists.xml','name='.$list);
    }

    $usernames = fetchElement('screen_name',$xml);
    $avatars = fetchElement('profile_image_url',$xml);

    $json = '';
    foreach($usernames as $k=>$u)
    {
        if($k!=0) $json.=', ';
        $json.='"'.$u.'":"'.$avatars[$k].'"';
        // Generating the json object with a structure: username:avatar_image

        if($k>=$twitterers_shown-1) break;
    }

    // Getting the total number of fans requires an additional API call:

    $membersXML = curlMe("http://api.twitter.com/1/".$username."/lists/".$list.".xml");
    $membersCount = fetchElement('member_count',$membersXML);

    $json = '{members:{'.$json.'}, membersCount:'.$membersCount[0].',fanPage:"http://twitter.com/'.$username.'/'.$list.'"}';

    // Save the generated json variable in the cache for later use:
    $fp = fopen($cache_file,'w');

    if($fp == false)
    {
        error("Your cache file could not be created! You have to chmod the script directory to 777!");
    }

    fwrite($fp,$json);
    fclose($fp);
}
else
{
    $json = file_get_contents($cache_file);
    // Fetch the data from the cache file
}

echo $json;

此外,您可能會注意到 API 要求您提供用戶名和密碼才能使用它。所以如果你打算在自己的服務器上運行demo,一定要在config.php中填寫你的登錄信息 .

有了這個,我們的 Twitter List Powered Fan Page 就完成了!

結論

今天我們學習瞭如何使用新發布的推特列表和 REST API 創建一個社區驅動的粉絲頁面。

您可能還記得,這實際上不是我們製作的第一個 twitter 小部件。如果你只是想在你的博客中展示你最新的推文,你可以使用我們幾週前製作的 jQuery Twitter Ticker。

此外,如果您已經自定義了本教程並在網站中使用了它,那麼通過我們的Tutorial Mashups 與社區分享您所做的工作將會非常棒 功能,在評論部分上方。


Tutorial JavaScript 教程
  1. 在窗口外拖動時如何檢測Firefox中的dragleave事件

  2. 我的編碼訓練營經驗

  3. 將 JS 項目遷移到 Yarn Berry

  4. 使用輸入 id 使用多個鍵更新狀態對象

  5. Firefox 上的 event.target

  6. 使用 ReactJs 的簡單 Firebase 圖像上傳器/顯示

  7. 將 Bootstrap 4 與 Angular 4|5 一起使用

  1. 使用 JavaScript 構建退出彈出窗口

  2. JavaScript 安全隱患

  3. 類型安全的 TypeScript

  4. 使用 HTML5 構建 Windows 8 應用程序 - 第 2 部分

  5. 電子冒險:第 18 集:向後端發送數據

  6. 2021年Regex超級終極指南(如何在JavaScript中使用)

  7. 帶有 HSV 和透明 PNG 的蒙皮和調色板

  1. 如何繞過驗證碼?

  2. 什麼是數據綁定?

  3. 如何使用 JWT Streams 安全過濾器保護流?

  4. 使用 Azure 存儲緩存實現無服務器 JavaScript Node.js 函數