如何使用JavaScript显示Twitter帖子

最新推荐文章于 2024-05-31 09:55:16 发布

cuketao5066

最新推荐文章于 2024-05-31 09:55:16 发布

阅读量348

点赞数

文章标签： python javascript js html vue ViewUI

原文链接：https://www.script-tutorials.com/how-to-display-twitter-posts-using-javascript/

版权

How to display twitter posts using javascript I think that displaying your Twitter posts on your website is a wonderful way to show people in-time news. This feature can be very useful for your project. Because it can can inspire your website’s visitors to follow you on Twitter. I am going to create simple script which loads twitter posts and renders into HTML format using JsRender jQuery library. Everything is on the client side.

如何使用javascript显示Twitter帖子我认为在网站上显示Twitter帖子是向人们显示实时新闻的绝佳方法。此功能对您的项目可能非常有用。因为它可以激发您网站的访问者在Twitter上关注您。我将创建一个简单的脚本，该脚本使用JsRender jQuery库将twitter帖子加载并呈现为HTML格式。一切都在客户端。

Let’s start coding !

让我们开始编码！

现场演示

步骤1. HTML (Step 1. HTML)

Our HTML markup is very easy:

我们HTML标记非常简单：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>My twitter posts | Script Tutorials</title>
    <link href="css/main.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script>
        google.load("jquery", "1.7.1");
    </script>
    <script type="text/javascript" src="js/jsrender.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <!-- define template for our units -->
    <script id="twitterTemplate" type="text/x-jsrender">
        <div id="{{:id}}">
            <div class="elem">
                <p><b>{{:user.name}}:</b> {{:text}} <span>(on: {{:created_at}})</span></p>
                <a href="https://twitter.com/{{:user.screen_name}}"><img src="{{:user.profile_image_url}}" alt="{{:user.name}}" /></a>
            </div>
        </div>
    </script>
</head>
<body>
    <div class="content-main">
        <h2 class="content-header">Tweets</h2>
        <div class="content-body" id="results"></div>
    </div>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>My twitter posts | Script Tutorials</title>
    <link href="css/main.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script>
        google.load("jquery", "1.7.1");
    </script>
    <script type="text/javascript" src="js/jsrender.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <!-- define template for our units -->
    <script id="twitterTemplate" type="text/x-jsrender">
        <div id="{{:id}}">
            <div class="elem">
                <p><b>{{:user.name}}:</b> {{:text}} <span>(on: {{:created_at}})</span></p>
                <a href="https://twitter.com/{{:user.screen_name}}"><img src="{{:user.profile_image_url}}" alt="{{:user.name}}" /></a>
            </div>
        </div>
    </script>
</head>
<body>
    <div class="content-main">
        <h2 class="content-header">Tweets</h2>
        <div class="content-body" id="results"></div>
    </div>
</body>
</html>

You can see here a template for twitter posts (twitterTemplate) for JsRender, and a simple container for future posts (<div class="content-body" id="results"></div>)

您可以在此处看到JsRender的Twitter帖子模板(twitterTemplate)，以及以后帖子的简单容器(<div class =“ content-body” id =“ results”> </ div>)

步骤2. CSS (Step 2. CSS)

Now, we have to prepare CSS stylesheet for our demonstration:

现在，我们必须为演示准备CSS样式表：


.content-main {
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    border-radius:6px;
    background-color: #FFFFFF;
    border : 1px solid #E8E8E8;
    margin: 40px auto;
    width: 520px;
}
.content-header {
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
    border-bottom: 1px solid #E8E8E8;
    min-height: 20px;
    padding: 12px;
}
.content-body > div {
    border-bottom: 1px solid #E8E8E8;
    min-height: 51px;
    padding: 9px 12px;
    position: relative;
}
.content-body > div .elem {
    margin-left: 58px;
}
.content-body > div img {
    cursor: pointer;
    left: 12px;
    position: absolute;
    top: 12px;
}
.content-body > div p {
    color: #333333;
    font-size: 14px;
    line-height: 18px;
}
.content-body > div span {
    float: right;
    color: #999999;
    font-size: 12px;
}


.content-main {
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    border-radius:6px;
    background-color: #FFFFFF;
    border : 1px solid #E8E8E8;
    margin: 40px auto;
    width: 520px;
}
.content-header {
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
    border-bottom: 1px solid #E8E8E8;
    min-height: 20px;
    padding: 12px;
}
.content-body > div {
    border-bottom: 1px solid #E8E8E8;
    min-height: 51px;
    padding: 9px 12px;
    position: relative;
}
.content-body > div .elem {
    margin-left: 58px;
}
.content-body > div img {
    cursor: pointer;
    left: 12px;
    position: absolute;
    top: 12px;
}
.content-body > div p {
    color: #333333;
    font-size: 14px;
    line-height: 18px;
}
.content-body > div span {
    float: right;
    color: #999999;
    font-size: 12px;
}

步骤3. JavaScript (Step 3. JavaScript)

And finally – a very small Javascript:

最后-一个很小的Javascript：


// display tweets function
function displayTweets(data) {
    // render twitter posts with 'twitterTemplate' template
    $('#results').html(
        $('#twitterTemplate').render(data)
    );
}
// on page load
 $(window).load(function() {
    // your twitter name
    var name = 'AramisGC';
    // amount of tweets to display
    var count = 10;
    // create script element and append it to the body
    var ts = document.createElement('script');
    ts.type = 'text/javascript';
    ts.async = true;
    //ts.src = 'http://twitter.com/statuses/user_timeline.json?screen_name=' + name + '&count=' + count + '&callback=displayTweets';
    ts.src = 'https://api.twitter.com/1/statuses/user_timeline.json?screen_name=' + name + '&count=' + count + '&callback=displayTweets';
    $('body').append(ts);
});


// display tweets function
function displayTweets(data) {
    // render twitter posts with 'twitterTemplate' template
    $('#results').html(
        $('#twitterTemplate').render(data)
    );
}
// on page load
 $(window).load(function() {
    // your twitter name
    var name = 'AramisGC';
    // amount of tweets to display
    var count = 10;
    // create script element and append it to the body
    var ts = document.createElement('script');
    ts.type = 'text/javascript';
    ts.async = true;
    //ts.src = 'http://twitter.com/statuses/user_timeline.json?screen_name=' + name + '&count=' + count + '&callback=displayTweets';
    ts.src = 'https://api.twitter.com/1/statuses/user_timeline.json?screen_name=' + name + '&count=' + count + '&callback=displayTweets';
    $('body').append(ts);
});

Basically, we have to prepare extra Script which requires our last tweets (timeline) in JSON format from twitter website. And then, we just should pass received results into our ‘twitterTemplate’ template to render the results.

基本上，我们必须准备额外的脚本，该脚本需要来自Twitter网站的JSON格式的最后一条推文(时间轴)。然后，我们只应将收到的结果传递到“ twitterTemplate”模板中以呈现结果。

Important: Due Twitter API v1.0 is deprecated, we have to use updated URL to obtain user timeline. Pay attention to line 24 in main.js file.

重要提示：由于不推荐使用Twitter API v1.0，因此我们必须使用更新的URL来获取用户时间轴。 注意main.js文件中的第24行。

现场演示

[sociallocker]

[社交储物柜]

存档下载

[/sociallocker]

[/ sociallocker]

结论 (Conclusion)

I hope that everything is clean in today’s code. If you have any suggestions about further ideas for articles – you are welcome to share them with us. Good luck in your work!

我希望今天的代码中的所有内容都是干净的。如果您对文章的进一步建议有任何建议，欢迎与我们分享。祝您工作顺利！

翻译自: https://www.script-tutorials.com/how-to-display-twitter-posts-using-javascript/

cuketao5066

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何使用JavaScript显示Twitter帖子

How to display twitter posts using javascript I think that displaying your Twitter posts on your website is a wonderful way to show people in-time news. This feature can be very useful for your projec...
复制链接

扫一扫