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

製作一個簡單的推文下載系統

Twitter 無疑是一個非常受歡迎的社交網絡。其成功的關鍵之一是其簡單而強大的 API,它為您打開了無數新穎方式使用該服務的大門。

其中一種用途是允許您的訪問者“通過推文付款”。也就是說,你拿走你本來可以免費提供的東西(比如電子書、mp3 或其他類型的數字媒體),並且只有在用戶發布關於你的網站的推文後才能將其提供給用戶。這是宣傳您的產品和引起關注的好方法,而且不會對您的訪問者產生任何費用。

構建這樣的功能並不像你想像的那麼難。 Twitter 通過他們的 Web Intents 讓事情變得更加容易——這是一種將平台集成到您的網站中的簡單方法。在本教程中,我們將圍繞該 API 構建一個 jQuery 插件,並在用戶發推文後激活下載按鈕。那麼讓我們開始吧!

HTML

首先,我們需要一個簡單的網頁來將示例放在一起。

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />

        <title>Tweet to Download | 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>

        <header>
            <h1>Tweet to Download</h1>
            <h2><a href="https://tutorialzine.com/2011/05/tweet-to-download-jquery/">&laquo; Back to Tutorialzine</a></h2>
        </header>

        <section id="container">
            <p>The button below is activated<br />only* after you tweet. <a href="#" id="tweetLink">Try it.</a></p>
            <a href="#" class="downloadButton">Download</a>
        </section>

        <footer>*Not exactly. Read more in the tutorial..</footer>

        <img src="assets/img/twitter_bird.png" alt="Twitter Bird" />

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <script src="assets/js/jquery.tweetAction.js"></script>
        <script src="assets/js/script.js"></script>

    </body>
</html>

我們使用一些 HTML5 標記——頁眉、節和頁腳,將頁面邏輯地分成三個部分。我們的#container 部分包含兩個錨元素。

第一個鏈接 - #tweetLink,將觸發插件並顯示一個包含 Twitter 提交表單的彈出窗口。第二個 - #downloadButton,樣式為按鈕,一旦用戶發推文,其 href 屬性設置為我們提供下載的文件的屬性。

在文件的底部,在結束 body 標記之前,我們有一組常用的 JavaScript 包括 - jQuery 庫的 1.6 版,tweetAction.js 稍後我們將編寫插件,以及 script.js ,它會監聽鏈接的點擊並觸發插件。

讓我們轉到本教程的 jQuery 部分。

jQuery

正如您從 Web Intents 文檔中看到的那樣,它可以被描述為用於與 Twitter 交互的基於彈出窗口的界面。你只需要加載一個特定的intent URL 在彈出窗口中傳遞 GET 參數以及推文文本、Twitter 用戶名等,具體取決於意圖。這將生成一個表單,用戶可以使用該表單發布新推文、回复或關注您。

讓我們把它放在一個為我們處理它的 jQuery 插件中:

jquery.tweetAction.js

(function($){

    var win = null;

    $.fn.tweetAction = function(options,callback){

        // Default parameters of the tweet popup:

        options = $.extend({
            url:window.location.href
        }, options);

        return this.click(function(e){

            if(win){
                // If a popup window is already shown,
                // do nothing;
                e.preventDefault();
                return;
            }

            var width   = 550,
                height  = 350,
                top     = (window.screen.height - height)/2,
                left    = (window.screen.width - width)/2; 

            var config = [
                'scrollbars=yes','resizable=yes','toolbar=no','location=yes',
                'width='+width,'height='+height,'left='+left, 'top='+top
            ].join(',');

            // Opening a popup window pointing to the twitter intent API:
            win = window.open('http://twitter.com/intent/tweet?'+$.param(options),
                        'TweetWindow',config);

            // Checking whether the window is closed every 100 milliseconds.
            (function checkWindow(){

                try{
                    // Opera raises a security exception, so we
                    // need to put this code in a try/catch:

                    if(!win || win.closed){
                        throw "Closed!";
                    }
                    else {
                        setTimeout(checkWindow,100);
                    }
                }
                catch(e){
                    // Executing the callback, passed
                    // as an argument to the plugin.

                    win = null;
                    callback();
                }

            })();

            e.preventDefault();
        });

    };
})(jQuery);

使用 window.open() 打開一個彈出窗口 ,我們需要傳遞一個逗號分隔的參數列表。其中包括要顯示哪些地址欄,以及窗口的尺寸和位置。

我們打開http://twitter.com/intent/tweet之後 我們檢查 closed 通過運行 checkWindow() 每 100 毫秒窗口的屬性 setTimeout() 的函數 .這是我們知道彈出窗口已關閉的唯一方法,因為瀏覽器會阻止任何類型的跨域交互。當彈出窗口關閉時,將執行作為函數的第二個參數傳遞的回調函數。

您可以在下面看到我們如何使用此插件:

script.js

$(document).ready(function(){

    // Using our tweetAction plugin. For a complete list with supported
    // parameters, refer to http://dev.twitter.com/pages/intents#tweet-intent

    $('#tweetLink').tweetAction({
        text:       'How to make a simple Tweet to Download system',
        url:        'https://tutorialzine.com/2011/05/tweet-to-download-jquery/',
        via:        'tutorialzine',
        related:    'tutorialzine'
    },function(){

        // Callback function. Triggered when the user closes the pop-up window:

        $('a.downloadButton')
                .addClass('active')
                .attr('href','tweet_to_download.zip');

    });

});

在上面的片段中,我們觸發了 tweetAction #tweetLink 上的插件 錨。當它點擊時,我們將顯示一個彈出窗口,當它關閉時,將觸發回調。這是我們啟用按鈕並設置其 href 的地方 文件的屬性。

CSS

我們唯一要做的就是添加一些花哨的 CSS 樣式。我將在這裡只介紹一些更有趣的聲明。您可以在 assets/css/styles.css 中查看其餘部分 .

我們為 html 元素使用多個背景。背景圖像一個接一個地顯示,從最上面的圖像開始 - bg_gradient.jpg .

html{
    /* CSS3 Multiple backgrounds with a fallback */

    background-color:#e4e4e4;
    background:url('../img/bg_gradient.jpg') no-repeat center center,url('../img/bg_tile.jpg');
}

body{
    color:#888;
    padding:10px;
    min-height:600px;
    font:14px/1.3 'Segoe UI',Arial, sans-serif;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.7);
}

再往下,我們有 twitter 鳥圖標的樣式。我使用> 字符表示這只會影響作為 body 的直接子級的圖像。

body > img{
    /* The twitter illustration */

    margin:50px auto 0;
    display:block;
}

最後我們有#container 部分。在 :before 的幫助下 /:after 偽元素,我們在容器上方和下方顯示微妙的陰影。

#container{
    width:450px;
    height:300px;
    padding:10px;
    text-align:center;
    margin:0 auto;
    position:relative;
    background-color:#fff;
    display:block;

    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
}

#container:before,
#container:after{

    /* Adding subtle shadows with before/after elements */

    content:'.';
    text-indent:-99999px;
    overflow:hidden;
    display:block;
    height:12px;
    width:470px;
    background:url('../img/shadows.png') no-repeat center top;
    position:absolute;
    left:0;
    top:-12px;
}

#container:after{
    top:auto;
    bottom:-12px;
    background-position:center bottom;
}

這兩個偽元素幾乎共享它們的所有代碼,因此我將它們定義為一個組。 :after 元素也是單獨設置樣式的,但只有不同的樣式會被重新定義。

至此,我們的“通過推文付費”實驗完成!

但是等等!這不起作用!

你是完全正確的。正如您從代碼中看到的(並從演示中確認),我們假設關閉彈出窗口等於發布推文。它沒有。

由於這是跨域交互,因此無法訂閱實際發布推文的時間。做到這一點的唯一方法是使用 Twitter 更複雜的 @Anywhere API,但即便如此,人們也可以熱鏈接到您的文件。

這還重要嗎?這種技術的真正目的是激勵人們在推特上發布有關您的產品/服務的信息,這是很多人喜歡做的事情,只是為了獲得“僅限會員”下載的感覺。


Tutorial JavaScript 教程
  1. MongoDB 中的事務

  2. 買家當心!

  3. 輸入 16 位新的全棧開發人員!

  4. 一個 React 測試技巧

  5. 手電筒網站

  6. 如何從 Highcharts 中刪除按鈕

  7. 編寫現代 JavaScript 代碼

  1. 使用 Node.js 和 Socket.io 構建一個簡單的聊天應用程序

  2. 從字符串中刪除非字母數字字符

  3. 將 React Native App 與 Jest 集成

  4. 項目 7:Array Cardio Day 2

  5. 🚀 GitHub 上面向 Web 開發人員的 10 個熱門項目 - 2020 年 10 月 9 日

  6. 賽普拉斯初學者教程:端到端測試入門

  7. JavaScript 字符串對象 |基本

  1. Angular 實用指南:服務和依賴注入

  2. 語義訪問器簡介

  3. 回調與承諾

  4. JavaScript Array.map() 教程 – 如何使用 map() 遍歷數組中的元素