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

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

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

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

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

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

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

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

其中包括:

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

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

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

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

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

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

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

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

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

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

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

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

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

我们现在拥有消费者密钥和秘密以及访问令牌和秘密密钥。这些 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' );        }    }        ?>    

<label for="get_field_id( 'title' ); ?>"> <input class="widefat" id="get_field_id( 'title' ); ?>" name="get_field_name( 'title' ); ?>" type="text" value="" />

<label for="get_field_id( 'twitter_username' ); ?>"> <input class="widefat" id="get_field_id( 'twitter_username' ); ?>" name="get_field_name( 'twitter_username' ); ?>" type="text" value="" />

<label for="get_field_id( 'update_count' ); ?>"> <input class="widefat" id="get_field_id( 'update_count' ); ?>" name="get_field_name( 'update_count' ); ?>" type="number" value="" />

<label for="get_field_id( 'oauth_access_token' ); ?>"> <input class="widefat" id="get_field_id( 'oauth_access_token' ); ?>" name="get_field_name( 'oauth_access_token' ); ?>" type="text" value="" />

<label for="get_field_id( 'oauth_access_token_secret' ); ?>"> <input class="widefat" id="get_field_id( 'oauth_access_token_secret' ); ?>" name="get_field_name( 'oauth_access_token_secret' ); ?>" type="text" value="" />

<label for="get_field_id( 'consumer_key' ); ?>"> <input class="widefat" id="get_field_id( 'consumer_key' ); ?>" name="get_field_name( 'consumer_key' ); ?>" type="text" value="" />

<label for="get_field_id( 'consumer_secret' ); ?>"> <input class="widefat" id="get_field_id( 'consumer_secret' ); ?>" name="get_field_name( 'consumer_secret' ); ?>" type="text" value="" />

<?php }

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

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

何时值被输入到设置表单字段中,需要将它们保存到数据库中。 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 发出请求时会派上用场。

$username: Twitter 用户名

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

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

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

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

$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 && $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( '$1', '@$1' );        foreach ( $timelines as $timeline ) {            $result = preg_replace( $patterns, $replace, $timeline->text );            echo '
'; echo $result . '
'; echo $this->tweet_time( $timeline->created_at ); echo '
'; echo '
'; } } 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 小部件的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1551590.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 21:53:40
下一篇 2025年12月21日 21:54:16

相关推荐

  • 如何使用正则表达式完整匹配HTML中Script标签的中间内容?

    完整匹配Script标签中间内容的正则表达式 正则表达式是用于从文本中查找特定模式的高级工具。对于HTML中Script标签中间内容的匹配,需要一个特定的正则表达式来实现完整的匹配。 匹配表达式 /(<scriptb([^”]+|”[^”]*”)*>)([sS]*?)()/g 立即学习“…

    2025年12月24日
    2300
  • CSS mask属性无法获取图片:为什么我的图片不见了?

    CSS mask属性无法获取图片 在使用CSS mask属性时,可能会遇到无法获取指定照片的情况。这个问题通常表现为: 网络面板中没有请求图片:尽管CSS代码中指定了图片地址,但网络面板中却找不到图片的请求记录。 问题原因: 此问题的可能原因是浏览器的兼容性问题。某些较旧版本的浏览器可能不支持CSS…

    2025年12月24日
    900
  • 如何用dom2img解决网页打印样式不显示的问题?

    用dom2img解决网页打印样式不显示的问题 想将网页以所见即打印的的效果呈现,需要采取一些措施,特别是在使用了bootstrap等大量采用外部css样式的框架时。 问题根源 在常规打印操作中,浏览器通常会忽略css样式等非必要的页面元素,导致打印出的结果与网页显示效果不一致。这是因为打印机制只识别…

    2025年12月24日
    800
  • 如何用 CSS 模拟不影响其他元素的链接移入效果?

    如何模拟 css 中链接的移入效果 在 css 中,模拟移入到指定链接的效果尤为复杂,因为链接的移入效果不影响其他元素。要实现这种效果,最简单的方法是利用放大,例如使用 scale 或 transform 元素的 scale 属性。下面提供两种方法: scale 属性: .goods-item:ho…

    2025年12月24日
    700
  • 如何调整Flexbox布局中项目对齐方式?

    正文: 调整弹性盒子(Flexbox)布局中项目的对齐方式有几个方法: 文本对齐问题 对于第一个问题,即文字不在 中的问题,这是因为设置了 height 属性。Flexbox 子元素的高度被拉伸到了 height 规定的大小,因此文字无法正常显示在内容内。解决方案是移除 height 属性,让子元素…

    2025年12月24日
    400
  • 如何利用BFC和inline-block解决兄弟元素间margin塌陷问题?

    BFC清除兄弟元素间margin塌陷原理 margin塌陷问题 当相邻的块级元素垂直排列,它们的margin可能会塌陷并重叠,称为margin塌陷。 BFC清除margin塌陷 清除margin塌陷的一种常见方法是将下方元素包裹在一个新的块级格式化上下文(BFC)中,因为BFC之间不会相互影响。 d…

    2025年12月24日
    500
  • Uniapp 中如何不拉伸不裁剪地展示图片?

    灵活展示图片:如何不拉伸不裁剪 在界面设计中,常常需要以原尺寸展示用户上传的图片。本文将介绍一种在 uniapp 框架中实现该功能的简单方法。 对于不同尺寸的图片,可以采用以下处理方式: 极端宽高比:撑满屏幕宽度或高度,再等比缩放居中。非极端宽高比:居中显示,若能撑满则撑满。 然而,如果需要不拉伸不…

    2025年12月24日
    400
  • PC端H5项目如何实现适配:流式布局、响应式设计和两套样式?

    PC端的适配方案及PC与H5兼顾的实现方案探讨 在开发H5项目时,常用的屏幕适配方案是postcss-pxtorem或postcss-px-to-viewport,通常基于iPhone 6标准作为设计稿。但对于PC端网项目,处理不同屏幕大小需要其他方案。 PC端屏幕适配方案 PC端屏幕适配一般采用流…

    2025年12月24日
    300
  • CSS 元素设置 10em 和 transition 后为何没有放大效果?

    CSS 元素设置 10em 和 transition 后为何无放大效果? 你尝试设置了一个 .box 类,其中包含字体大小为 10em 和过渡持续时间为 2 秒的文本。当你载入到页面时,它没有像 YouTube 视频中那样产生放大效果。 原因可能在于你将 CSS 直接写在页面中 在你的代码示例中,C…

    2025年12月24日
    400
  • 如何实现类似横向U型步骤条的组件?

    横向U型步骤条寻求替代品 希望找到类似横向U型步骤条的组件或 CSS 实现。 潜在解决方案 根据给出的参考图片,类似的组件有: 图片所示组件:图片提供了组件的外观,但没有提供具体的实现方式。参考链接:提供的链接指向了 SegmentFault 上的另一个问题,其中可能包含相关的讨论或解决方案建议。 …

    2025年12月24日
    800
  • 如何让小说网站控制台显示乱码,同时网页内容正常显示?

    如何在不影响用户界面的情况下实现控制台乱码? 当在小说网站上下载小说时,大家可能会遇到一个问题:网站上的文本在网页内正常显示,但是在控制台中却是乱码。如何实现此类操作,从而在不影响用户界面(UI)的情况下保持控制台乱码呢? 答案在于使用自定义字体。网站可以通过在服务器端配置自定义字体,并通过在客户端…

    2025年12月24日
    800
  • 如何优化CSS Grid布局中子元素排列和宽度问题?

    css grid布局中的优化问题 在使用css grid布局时可能会遇到以下问题: 问题1:无法控制box1中li的布局 box1设置了grid-template-columns: repeat(auto-fill, 20%),这意味着容器将自动填充尽可能多的20%宽度的列。当li数量大于5时,它们…

    2025年12月24日
    800
  • SASS 中的 Mixins

    mixin 是 css 预处理器提供的工具,虽然它们不是可以被理解的函数,但它们的主要用途是重用代码。 不止一次,我们需要创建多个类来执行相同的操作,但更改单个值,例如字体大小的多个类。 .fs-10 { font-size: 10px;}.fs-20 { font-size: 20px;}.fs-…

    2025年12月24日
    000
  • 绝对定位元素在不同分辨率下偏移,如何解决?

    盒子里的绝对定位元素偏移问题及解决方法 在自定义的输入框checkbox中,对于不同的分辨率设置的居中样式会发生意外的像素偏移,影响选中状态下小红点的居中效果。 偏移的原因在于使用像素单位px。不同分辨率下,像素点的显示方式不同,导致视觉上的错位。 解决方法是将像素单位替换为相对单位,如rem或em…

    2025年12月24日
    400
  • 如何在地图上轻松创建气泡信息框?

    地图上气泡信息框的巧妙生成 地图上气泡信息框是一种常用的交互功能,它简便易用,能够为用户提供额外信息。本文将探讨如何借助地图库的功能轻松创建这一功能。 利用地图库的原生功能 大多数地图库,如高德地图,都提供了现成的信息窗体和右键菜单功能。这些功能可以通过以下途径实现: 高德地图 JS API 参考文…

    2025年12月24日
    400
  • 如何使用地图库制作悬浮信息框和右键菜单?

    使用地图库制作悬浮信息框和右键菜单的地图显示 想要创建交互式的带有悬浮信息框和右键菜单的地图显示,使用地图库是一个便捷的方法。一般的地图库都提供对应的功能,让你轻松实现这些特性。 功能使用 以高德地图为例,在使用它的 JS API 1.4 时,可以通过以下方式添加信息窗体和右键菜单: 信息窗体:使用…

    2025年12月24日
    000
  • 如何使用 scroll-behavior 属性实现元素scrollLeft变化时的平滑动画?

    如何实现元素scrollleft变化时的平滑动画效果? 在许多网页应用中,滚动容器的水平滚动条(scrollleft)需要频繁使用。为了让滚动动作更加自然,你希望给scrollleft的变化添加动画效果。 解决方案:scroll-behavior 属性 要实现scrollleft变化时的平滑动画效果…

    2025年12月24日
    000
  • CSS mask 属性无法加载图片:浏览器问题还是代码错误?

    CSS mask 属性请求图片失败 在使用 CSS mask 属性时,您遇到了一个问题,即图片没有被请求获取。这可能是由于以下原因: 浏览器问题:某些浏览器可能在处理 mask 属性时存在 bug。尝试更新到浏览器的最新版本。代码示例中的其他信息:您提供的代码示例中还包含其他 HTML 和 CSS …

    2025年12月24日
    000
  • 如何为滚动元素添加平滑过渡,使滚动条滑动时更自然流畅?

    给滚动元素平滑过渡 如何在滚动条属性(scrollleft)发生改变时为元素添加平滑的过渡效果? 解决方案:scroll-behavior 属性 为滚动容器设置 scroll-behavior 属性可以实现平滑滚动。 html 代码: click the button to slide right!…

    2025年12月24日
    500
  • 如何解决用户代理样式表导致页面元素无法显示的问题?

    去除用户代理样式表的样式 在项目中遇到用户代理样式表的样式遮盖了页面元素,导致无法显示的情况,这可能是因为安装了去广告插件导致的。 通常,用户代理样式表是在浏览器中预定义的,用于提供默认的样式。然而,在特殊情况下,某些插件或扩展程序可能会注入自己的用户代理样式表,从而覆盖页面上的现有样式。 在这种情…

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信