首页 前端HTML正文

利用最新的 Twitter API 设计 Twitter 小部件

原创
ithorizon 5个月前 (10-19) 阅读数 53 #HTML

twitter 在推出 1.1 版 api 时做出了一些更改。最显着的变化之一是身份验证的引入。也就是说，应用程序需要经过身份验证才能向 api 发送请求。

身份验证由 OAuth 提供支持 - 一种开放协议，允许通过简单且标准的方法进行安全授权，从而允许用户批准 申请代表他们行事而不共享他们的密码。

在本教程中，我们将学习如何以编程方式与 Twitter 的 API 进行交互，同时开发一个 Twitter 时间线 WordPress 小部件，该小部件显示 Twitter 用户发布的最新推文列表。

以下是本教程末尾要构建的 Twitter 时间轴小部件的预览。

至成功向 Twitter API 发送请求，您需要创建一个 具有 OAuth 授权的应用程序，因为未经授权的请求不会被拒绝 允许。

要创建 Twitter 应用程序，您需要登录 Twitter 使用您的 Twitter 帐户的开发人员仪表板。创建一个的要点 应用程序就是给你自己（和Twitter）一组密钥。

其中包括：

  • 消费者密钥
  • 消费者的秘密
  • 访问令牌
  • 访问令牌秘密

按照以下步骤创建 Twitter 应用程序并生成密钥。

  • 使用您的 Twitter 帐户登录 Twitter 开发者帐户并导航至应用程序管理控制台。

  • 点击创建新应用按钮启动 Twitter 应用程序创建。
  • 填写表单并点击提交按钮以创建申请。
  • 点击该应用程序，导航至权限选项卡，然后将访问级别更改为读取和写入。

    如果您想要执行任何操作，正确使用这个API，你需要改变 如果您正在执行除以下操作以外的任何操作，请将您的设置设置为读取和写入 使用 GET 请求的标准数据检索。

要获取应用程序使用者密钥和秘密，请导航到 API 密钥选项卡。

API 密钥和 API 秘密分别是使用者密钥和使用者秘密。

要获取应用程序访问令牌和访问令牌机密，仍在 API 密钥 strong> 选项卡，向下滚动并单击“创建我的访问令牌”按钮以创建访问令牌。

刷新页面，您将看到您的应用程序访问令牌。

我们 现在拥有消费者密钥和秘密以及访问令牌和秘密密钥。这些 OAuth 凭据在向 API 发送请求时由 Twitter 进行身份验证。

我们正在编码的 Twitter 时间线小部件的小部件设置将包含表单字段，这些字段将收集这些 OAuth 凭据并将其保存到数据库中，以供小部件重用。

让我们开始编写 Twitter 时间线小部件插件的代码。

Twitter 时间轴小部件开发

标题是 进入插件文件的第一件事是插件头。

<?php
/*
  Plugin Name: Twitter Tweets Widget
  Plugin URI: http://code.tutsplus.com
  Description: Displays latest tweets from Twitter.
  Author: Agbonghama Collins
  Author URI: http://tech4sky.com
 */

创建一个扩展 WP_Widget 父类的类。

class Twitter_Tweets_Widget extends WP_Widget {
// ...

通过 __construct() 魔术方法为小部件指定名称和描述。

function __construct() {
    parent::__construct(
        'twitter-tweets-widget',
        __( 'Twitter Tweets Widget', 'twitter_tweets_widget' ),
        array(
            'description' => __( 'Displays latest tweets from Twitter.', 'twitter_tweets_widget' )
        )
    );
}

下面的 form() 方法创建小部件设置表单，该表单将 OAuth 凭据保存到数据库以供小部件稍后重用。

public function form( $instance ) {

    if ( empty( $instance ) ) {
        $twitter_username = '';
        $update_count = '';
        $oauth_access_token = '';
        $oauth_access_token_secret = '';
        $consumer_key = '';
        $consumer_secret = '';
        $title = '';
    } else {
        $twitter_username = $instance['twitter_username'];
        $update_count = isset( $instance['update_count'] ) ? $instance['update_count'] : 5;
        $oauth_access_token = $instance['oauth_access_token'];
        $oauth_access_token_secret = $instance['oauth_access_token_secret'];
        $consumer_key = $instance['consumer_key'];
        $consumer_secret = $instance['consumer_secret'];

        if ( isset( $instance['title'] ) ) {
            $title = $instance['title'];
        } else {
            $title = __( 'Twitter feed', 'twitter_tweets_widget' );
        }
    }
    
    ?>
    <p>
        <label for="<?php echo $this->get_field_id( 'title' ); ?>">
            <?php echo __( 'Title', 'twitter_tweets_widget' ) . ':'; ?>
        </label>
        <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
    </p>
    <p>
        <label for="<?php echo $this->get_field_id( 'twitter_username' ); ?>">
            <?php echo __( 'Twitter Username (without @)', 'twitter_tweets_widget' ) . ':'; ?>
        </label>
        <input class="widefat" id="<?php echo $this->get_field_id( 'twitter_username' ); ?>" name="<?php echo $this->get_field_name( 'twitter_username' ); ?>" type="text" value="<?php echo esc_attr( $twitter_username ); ?>" />
    </p>
    <p>
        <label for="<?php echo $this->get_field_id( 'update_count' ); ?>">
            <?php echo __( 'Number of Tweets to Display', 'twitter_tweets_widget' ) . ':'; ?>
        </label>
        <input class="widefat" id="<?php echo $this->get_field_id( 'update_count' ); ?>" name="<?php echo $this->get_field_name( 'update_count' ); ?>" type="number" value="<?php echo esc_attr( $update_count ); ?>" />
    </p>
    <p>
        <label for="<?php echo $this->get_field_id( 'oauth_access_token' ); ?>">
            <?php echo __( 'OAuth Access Token', 'twitter_tweets_widget' ) . ':'; ?>
        </label>
        <input class="widefat" id="<?php echo $this->get_field_id( 'oauth_access_token' ); ?>" name="<?php echo $this->get_field_name( 'oauth_access_token' ); ?>" type="text" value="<?php echo esc_attr( $oauth_access_token ); ?>" />
    </p>
    <p>
        <label for="<?php echo $this->get_field_id( 'oauth_access_token_secret' ); ?>">
            <?php echo __( 'OAuth Access Token Secret', 'twitter_tweets_widget' ) . ':'; ?>
        </label>
        <input class="widefat" id="<?php echo $this->get_field_id( 'oauth_access_token_secret' ); ?>" name="<?php echo $this->get_field_name( 'oauth_access_token_secret' ); ?>" type="text" value="<?php echo esc_attr( $oauth_access_token_secret ); ?>" />
    </p>
    <p>
        <label for="<?php echo $this->get_field_id( 'consumer_key' ); ?>">
            <?php echo __( 'Consumer Key', 'twitter_tweets_widget' ) . ':'; ?>
        </label>
        <input class="widefat" id="<?php echo $this->get_field_id( 'consumer_key' ); ?>" name="<?php echo $this->get_field_name( 'consumer_key' ); ?>" type="text" value="<?php echo esc_attr( $consumer_key ); ?>" />
    </p>
    <p>
        <label for="<?php echo $this->get_field_id( 'consumer_secret' ); ?>">
            <?php echo __( 'Consumer Secret', 'twitter_tweets_widget' ) . ':'; ?>
        </label>
        <input class="widefat" id="<?php echo $this->get_field_id( 'consumer_secret' ); ?>" name="<?php echo $this->get_field_name( 'consumer_secret' ); ?>" type="text" value="<?php echo esc_attr( $consumer_secret ); ?>" />
    </p>
    <?php
    
}

下面是由上面的 form() 方法创建的小部件设置的屏幕截图。

何时值被输入到设置表单字段中，需要将它们保存到数据库中。 update() 方法通过去除恶意数据来清理小部件表单值，然后将清理后的数据保存到数据库中。

public function update( $new_instance, $old_instance ) {
    $instance = array();
    
    $instance['title']                      = ( ! empty( $new_instance['title'] ) )                     ? strip_tags( $new_instance['title'] ) : '';
    $instance['title']                      = ( ! empty( $new_instance['title'] ) )                     ? strip_tags( $new_instance['title'] ) : '';
    $instance['twitter_username']           = ( ! empty( $new_instance['twitter_username'] ) )          ? strip_tags( $new_instance['twitter_username'] ) : '';
    $instance['update_count']               = ( ! empty( $new_instance['update_count'] ) )              ? strip_tags( $new_instance['update_count'] ) : '';
    $instance['oauth_access_token']         = ( ! empty( $new_instance['oauth_access_token'] ) )        ? strip_tags( $new_instance['oauth_access_token'] ) : '';
    $instance['oauth_access_token_secret']  = ( ! empty( $new_instance['oauth_access_token_secret'] ) ) ? strip_tags( $new_instance['oauth_access_token_secret'] ) : '';
    $instance['consumer_key']               = ( ! empty( $new_instance['consumer_key'] ) )              ? strip_tags( $new_instance['consumer_key'] ) : '';
    $instance['consumer_secret']            = ( ! empty( $new_instance['consumer_secret'] ) )           ? strip_tags( $new_instance['consumer_secret'] ) : '';

    return $instance;
}

我发现了一个非常有用的 Twitter API 的简单 PHP 包装器，它可以轻松地发送请求并从 API 接收响应，我们的小部件将使用它。

从 GitHub 存储库下载 zip 存档中的 PHP 包装器，提取并包含包含包装器类的 TwitterAPIExchange.php 文件。

下面的 twitter_timeline() 方法接受以下参数作为其参数，这在向 Twitter API 发出请求时会派上用场。

  1. $username: Twitter 用户名

  2. $limit: 小部件要显示的推文数量

  3. $oauth_access_token: Twitter 应用程序 OAuth 访问令牌。

  4. $oauth_access_token_secret: 应用程序 OAuth 访问令牌 秘密。

  5. $consumer_key: Twitter 应用程序消费者密钥。

  6. $consumer_secret: 应用程序消费者秘密。

public function twitter_timeline( $username, $limit, $oauth_access_token, $oauth_access_token_secret, $consumer_key, $consumer_secret ) {
    require_once 'TwitterAPIExchange.php';

    /** Set access tokens here - see: https://dev.twitter.com/apps/ */
    $settings = array(
        'oauth_access_token'        => $oauth_access_token,
        'oauth_access_token_secret' => $oauth_access_token_secret,
        'consumer_key'              => $consumer_key,
        'consumer_secret'           => $consumer_secret
    );

    $url = 'https://api.twitter.com/1.1/statuses/user_timeline.json';
    $getfield = '?screen_name=' . $username . '&count=' . $limit;
    $request_method = 'GET';
    
    $twitter_instance = new TwitterAPIExchange( $settings );
    
    $query = $twitter_instance
        ->setGetfield( $getfield )
        ->buildOauth( $url, $request_method )
        ->performRequest();
    
    $timeline = json_decode($query);

    return $timeline;
}

该方法使用 PHP Wrapper for Twitter API 向 Twitter API 发送请求，保存并返回响应（用户时间线的 JSON 数据）。

创建或制作推文的时间由 API 以英文文本日期时间保存。例如。 星期四 6 月 26 日 08:47:24 +0000 2014

为了使推文时间更加用户友好，我创建了方法 tweet_time()，它通过以下方式显示时间。

  • 如果时间少于三秒，则返回现在。
  • 不到一分钟，返回x秒前。
  • 不到两分钟，返回大约 1 分钟前。
  • 不到一小时，n 分钟前返回，依此类推。

这是 tweet_time() 方法的代码。

public function tweet_time( $time ) {
    // Get current timestamp.
    $now = strtotime( 'now' );

    // Get timestamp when tweet created.
    $created = strtotime( $time );

    // Get difference.
    $difference = $now - $created;

    // Calculate different time values.
    $minute = 60;
    $hour = $minute * 60;
    $day = $hour * 24;
    $week = $day * 7;

    if ( is_numeric( $difference ) && $difference > 0 ) {

        // If less than 3 seconds.
        if ( $difference < 3 ) {
            return __( 'right now', 'twitter_tweets_widget' );
        }

        // If less than minute.
        if ( $difference < $minute ) {
            return floor( $difference ) . ' ' . __( 'seconds ago', 'twitter_tweets_widget' );;
        }

        // If less than 2 minutes.
        if ( $difference < $minute * 2 ) {
            return __( 'about 1 minute ago', 'twitter_tweets_widget' );
        }

        // If less than hour.
        if ( $difference < $hour ) {
            return floor( $difference / $minute ) . ' ' . __( 'minutes ago', 'twitter_tweets_widget' );
        }

        // If less than 2 hours.
        if ( $difference < $hour * 2 ) {
            return __( 'about 1 hour ago', 'twitter_tweets_widget' );
        }

        // If less than day.
        if ( $difference < $day ) {
            return floor( $difference / $hour ) . ' ' . __( 'hours ago', 'twitter_tweets_widget' );
        }

        // If more than day, but less than 2 days.
        if ( $difference > $day && $difference < $day * 2 ) {
            return __( 'yesterday', 'twitter_tweets_widget' );;
        }

        // If less than year.
        if ( $difference < $day * 365 ) {
            return floor( $difference / $day ) . ' ' . __( 'days ago', 'twitter_tweets_widget' );
        }

        // Else return more than a year.
        return __( 'over a year ago', 'twitter_tweets_widget' );
    }
}

接下来是 widget() 方法，用于在 WordPress 前端显示 Twitter 时间线。

public function widget( $args, $instance ) {
    $title                     = apply_filters( 'widget_title', $instance['title'] );
    $username                  = $instance['twitter_username'];
    $limit                     = $instance['update_count'];
    $oauth_access_token        = $instance['oauth_access_token'];
    $oauth_access_token_secret = $instance['oauth_access_token_secret'];
    $consumer_key              = $instance['consumer_key'];
    $consumer_secret           = $instance['consumer_secret'];

    echo $args['before_widget'];

    if ( ! empty( $title ) ) {
        echo $args['before_title'] . $title . $args['after_title'];
    }

    // Get the tweets.
    $timelines = $this->twitter_timeline( $username, $limit, $oauth_access_token, $oauth_access_token_secret, $consumer_key, $consumer_secret );

    if ( $timelines ) {

        // Add links to URL and username mention in tweets.
        $patterns = array( '@(https?://([-\w\.]+)+(:\d+)?(/([\w/_\.]*(\?\S+)?)?)?)@', '/@([A-Za-z0-9_]{1,15})/' );
        $replace = array( '<a href="$1">$1</a>', '<a href="http://twitter.com/$1">@$1</a>' );

        foreach ( $timelines as $timeline ) {
            $result = preg_replace( $patterns, $replace, $timeline->text );

            echo '<div>';
                echo $result . '<br/>';
                echo $this->tweet_time( $timeline->created_at );
            echo '</div>';
            echo '<br/>';
        }

    } else {
        _e( 'Error fetching feeds. Please verify the Twitter settings in the widget.', 'twitter_tweets_widget' );
    }

    echo $args['after_widget'];
}

小部件类 Twitter_Tweets_Widget 最终使用 widgets_init 挂钩注册，因此 WordPress 可以识别它。使用结束语 } 结束您的课程，然后添加以下代码来初始化 

function register_twitter_widget() {
    register_widget( 'Twitter_Tweets_Widget' );
}

add_action( 'widgets_init', 'register_twitter_widget' );

最后，我们完成了 Twitter 时间轴小部件的编码。

摘要

在本文中，我们学习了如何在实际项目中使用 Twitter API 来构建我们自己的 Twitter 时间线 WordPress 小部件。尽管本教程应该相对简单，但我们涵盖了 OAuth、密钥等主题，以及其他对于使用 API 的人员来说可能比较陌生的主题。

如果您有任何问题或代码改进建议，请在评论中告诉我。

以上就是利用最新的 Twitter API 设计 Twitter 小部件的详细内容，更多请关注IT视界其它相关文章！

文章标签： 部件密钥应用程序令牌时间


上一篇：使用JavaScript RegExp查找数字 下一篇：使用Twig和Timber图像、菜单和用户，快速启动WordPress开发
相关文章
ithorizon

ithorizon

作者文章
浏览更多
热门
标签列表
友情链接

探索IT视界，获取最前沿的技术资讯和实用教程。我们的内容涵盖IT技术,编程教程,软件开发,网络安全,IT资讯,开发工具,技术博客,编程开发,数据库,软件分享等多个领域，旨在为技术爱好者和专业人士提供有价值的信息和资源。

 豫公网安备41012202000391号  豫ICP备2024071179号

网站地图


Powered By Z-BlogPHP Theme By 编程老白