【问题标题】:Why Twitter Feed isn't loading into my Website?为什么 Twitter Feed 没有加载到我的网站中?
【发布时间】:2013-06-19 15:24:48
【问题描述】:

我自己正在使用 HTML5 和 CSS3 创建一个网站。我正在使用 jquery.tweet.js javascript 文件将我的 twitter 提要显示到我的网站中。而且,我在我的 body 元素中添加了下面的 jQuery 代码:

<script>
    jQuery(document).ready(function($) {
        $('#latest-tweets').tweet({
            username: 'sumonbdinfo',
            count:1,
            loading_text: "loading tweets..."
        });
    });
</script>

但是,我的网站现在只显示“正在加载推文...”文本,不再显示我的 Twitter 订阅源。

另外,我将 jquery.tweet.js 文件添加到我的 head 元素中,并将 jquery 添加到我的 head 元素中。但是,它仍然没有显示在我的网站上。

我应该把上面的代码放到我网站的 head 元素中还是直接添加到正确的位置?

我在 jquery.tweet.js 文件下方粘贴了我用来在我的网站上显示推文的内容。

(function(a){a.fn.tweet=function(c){var n=a.extend({username:null,list:null,favorites:false,query:null,avatar_size:null,count:3,fetch:null,page:1,retweets:true,intro_text:null,outro_text:null,join_text:null,auto_join_text_default:"i said,",auto_join_text_ed:"i",auto_join_text_ing:"i am",auto_join_text_reply:"i replied to",auto_join_text_url:"i was looking at",loading_text:null,refresh_interval:null,twitter_url:"twitter.com",twitter_api_url:"api.twitter.com",twitter_search_url:"search.twitter.com",template:"{avatar}{time}{join}{text}",comparator:function(p,o){return o.tweet_time-p.tweet_time},filter:function(o){return true}},c);var b=/\b((?:[a-z][\w-]+:(?:\/{1,3}|[a-z0-9%])|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}\/)(?:[^\s()<>]+|\(([^\s()<>]+|(\([^\s()<>]+\)))*\))+(?:\(([^\s()<>]+|(\([^\s()<>]+\)))*\)|[^\s`!()\[\]{};:'".,<>?«»“”‘’]))/gi;function l(q,r){if(typeof q==="string"){var o=q;for(var p in r){var s=r[p];o=o.replace(new RegExp("{"+p+"}","g"),s===null?"":s)}return o}else{return q(r)}}a.extend({tweet:{t:l}});function f(p,o){return function(){var q=[];this.each(function(){q.push(this.replace(p,o))});return a(q)}}function k(o){return o.replace(/</g,"&lt;").replace(/>/g,"^&gt;")}a.fn.extend({linkUser:f(/(^|[\W])@(\w+)/gi,'$1@<a href="http://'+n.twitter_url+'/$2">$2</a>'),linkHash:f(/(?:^| )[\#]+([\w\u00c0-\u00d6\u00d8-\u00f6\u00f8-\u00ff\u0600-\u06ff]+)/gi,' <a href="http://'+n.twitter_search_url+"/search?q=&tag=$1&lang=all"+((n.username&&n.username.length==1&&!n.list)?"&from="+n.username.join("%2BOR%2B"):"")+'">#$1</a>'),capAwesome:f(/\b(awesome)\b/gi,'<span class="awesome">$1</span>'),capEpic:f(/\b(epic)\b/gi,'<span class="epic">$1</span>'),makeHeart:f(/(&lt;)+[3]/gi,"<tt class='heart'>&#x2665;</tt>")});function e(p,o){return p.replace(b,function(s){var r=(/^[a-z]+:/i).test(s)?s:"http://"+s;var u=s;for(var t=0;t<o.length;++t){var q=o[t];if(q.url==r&&q.expanded_url){r=q.expanded_url;u=q.display_url;break}}return'<a href="'+k(r)+'">'+k(u)+"</a>"})}function j(o){return Date.parse(o.replace(/^([a-z]{3})( [a-z]{3} \d\d?)(.*)( \d{4})$/i,"$1,$2$4$3"))}function h(o){var q=(arguments.length>1)?arguments[1]:new Date();var s=parseInt((q.getTime()-o)/1000,10);var p="";if(s<1){p="just now"}else{if(s<60){p=s+" seconds ago"}else{if(s<120){p="a minute ago"}else{if(s<(45*60)){p=(parseInt(s/60,10)).toString()+" minutes ago"}else{if(s<(2*60*60)){p="an hour ago"}else{if(s<(24*60*60)){p=""+(parseInt(s/3600,10)).toString()+" hours ago"}else{if(s<(48*60*60)){p="a day ago"}else{p=(parseInt(s/86400,10)).toString()+" days ago"}}}}}}}return"about "+p}function g(o){if(o.match(/^(@([A-Za-z0-9-_]+)) .*/i)){return n.auto_join_text_reply}else{if(o.match(b)){return n.auto_join_text_url}else{if(o.match(/^((\w+ed)|just) .*/im)){return n.auto_join_text_ed}else{if(o.match(/^(\w*ing) .*/i)){return n.auto_join_text_ing}else{return n.auto_join_text_default}}}}}function d(){var p=("https:"==document.location.protocol?"https:":"http:");var o=(n.fetch===null)?n.count:n.fetch;var r="&include_entities=1&callback=?";if(n.list){return p+"//"+n.twitter_api_url+"/1/"+n.username[0]+"/lists/"+n.list+"/statuses.json?page="+n.page+"&per_page="+o+r}else{if(n.favorites){return p+"//"+n.twitter_api_url+"/favorites/"+n.username[0]+".json?page="+n.page+"&count="+o+r}else{if(n.query===null&&n.username.length==1){return p+"//"+n.twitter_api_url+"/1/statuses/user_timeline.json?screen_name="+n.username[0]+"&count="+o+(n.retweets?"&include_rts=1":"")+"&page="+n.page+r}else{var q=(n.query||"from:"+n.username.join(" OR from:"));return p+"//"+n.twitter_search_url+"/search.json?&q="+encodeURIComponent(q)+"&rpp="+o+"&page="+n.page+r}}}}function m(o,p){if(p){return("user" in o)?o.user.profile_image_url_https:m(o,false).replace(/^http:\/\/[a-z0-9]{1,3}\.twimg\.com\//,"https://s3.amazonaws.com/twitter_production/")}else{return o.profile_image_url||o.user.profile_image_url}}function i(p){var q={};q.item=p;q.source=p.source;q.screen_name=p.from_user||p.user.screen_name;q.avatar_size=n.avatar_size;q.avatar_url=m(p,(document.location.protocol==="https:"));q.retweet=typeof(p.retweeted_status)!="undefined";q.tweet_time=j(p.created_at);q.join_text=n.join_text=="auto"?g(p.text):n.join_text;q.tweet_id=p.id_str;q.twitter_base="http://"+n.twitter_url+"/";q.user_url=q.twitter_base+q.screen_name;q.tweet_url=q.user_url+"/status/"+q.tweet_id;q.reply_url=q.twitter_base+"intent/tweet?in_reply_to="+q.tweet_id;q.retweet_url=q.twitter_base+"intent/retweet?tweet_id="+q.tweet_id;q.favorite_url=q.twitter_base+"intent/favorite?tweet_id="+q.tweet_id;q.retweeted_screen_name=q.retweet&&p.retweeted_status.user.screen_name;q.tweet_relative_time=h(q.tweet_time);q.entities=p.entities?(p.entities.urls||[]).concat(p.entities.media||[]):[];q.tweet_raw_text=q.retweet?("RT @"+q.retweeted_screen_name+" "+p.retweeted_status.text):p.text;q.tweet_text=a([e(q.tweet_raw_text,q.entities)]).linkUser().linkHash()[0];q.tweet_text_fancy=a([q.tweet_text]).makeHeart().capAwesome().capEpic()[0];q.user=l('<a class="tweet_user" href="{user_url}">{screen_name}</a>',q);q.join=n.join_text?l(' <span class="tweet_join">{join_text}</span> ',q):" ";q.avatar=q.avatar_size?l('<a class="tweet_avatar" href="{user_url}"><img src="{avatar_url}" height="{avatar_size}" width="{avatar_size}" alt="{screen_name}\'s avatar" title="{screen_name}\'s avatar" border="0"/></a>',q):"";q.time=l('<span class="tweet_time"><a href="{tweet_url}" title="view tweet on twitter">{tweet_relative_time}</a></span>',q);q.text=l('<span class="tweet_text">{tweet_text_fancy}</span>',q);q.reply_action=l('<a class="tweet_action tweet_reply" href="{reply_url}">reply</a>',q);q.retweet_action=l('<a class="tweet_action tweet_retweet" href="{retweet_url}">retweet</a>',q);q.favorite_action=l('<a class="tweet_action tweet_favorite" href="{favorite_url}">favorite</a>',q);return q}return this.each(function(p,s){var r=a('<ul class="tweet_list">');var q='<p class="tweet_intro">'+n.intro_text+"</p>";var o='<p class="tweet_outro">'+n.outro_text+"</p>";var t=a('<p class="loading">'+n.loading_text+"</p>");if(n.username&&typeof(n.username)=="string"){n.username=[n.username]}a(s).bind("tweet:load",function(){if(n.loading_text){a(s).empty().append(t)}a.getJSON(d(),function(u){a(s).empty().append(r);if(n.intro_text){r.before(q)}r.empty();var v=a.map(u.results||u,i);v=a.grep(v,n.filter).sort(n.comparator).slice(0,n.count);r.append(a.map(v,function(w){return"<li>"+l(n.template,w)+"</li>"}).join("")).children("li:first").addClass("tweet_first").end().children("li:odd").addClass("tweet_even").end().children("li:even").addClass("tweet_odd");if(n.outro_text){r.after(o)}a(s).trigger("loaded").trigger((v.length===0?"empty":"full"));if(n.refresh_interval){window.setTimeout(function(){a(s).trigger("tweet:load")},1000*n.refresh_interval)}})}).trigger("tweet:load")})}})(jQuery);

那么,请帮助我,我该如何解决这个问题?这对我来说真的很有帮助。在这里等待任何人的答案!

【问题讨论】:

  • 你知道这个 jquery.tweet.js 使用的是什么版本的 Twitter API 吗?我似乎记得(在 Twitter 上)看到 Twitter API 的 v1.1 最近被关闭了,所以这可能是你的问题。
  • @Karl 1.0 已被删除并替换为 1.1,但是是的,这似乎是问题所在。使用另一个库,有很多可供选择。
  • 嗨@Karl 不,我不知道 Twitter API 的版本使用这个 jquery.tweet.js 文件。有什么方法可以检查它,如果它使用的是旧版本的 Twitter API,那么我该如何使用更新版本的 Twitter API?我应该在哪里改变?而且,我是否将 jQuery 代码放在了正确的位置?我的意思是在 body 元素中还是在 head 元素中?
  • @Juhana 谢谢,对不起,我弄错了版本号。
  • @SumonKhan - 是的,将 jQuery 放在头部或主体中会起作用,因为您使用的是 jQuery 就绪功能,所以它会等到 DOM 加载完成后再执行。

标签: html css jquery twitter


【解决方案1】:

您不能继续使用 seaofclouds tweet.js 并期望像上个月那样拉推文。造成这种情况的原因是 twitter 1.0 api 最近被 1.1 - https://dev.twitter.com/blog/api-v1-is-retired 取代。 jquery.tweet.js 的作者在这里谈到了 API 的变化和他的插件的状态:https://github.com/seaofclouds/tweet/#important-note-about-twitters-api-changes-in-2013 和一个单独的讨论可以在这里找到:https://github.com/seaofclouds/tweet/issues/264使用替代方案(有效)-https://github.com/StanScates/Tweet.js-Mod

Tweet.js-Mod 是原始 jquery.tweet.js 的修改版本,并使用用于访问 twitter 的 API 版本 1.1 的 php 脚本。

安装说明可以在这里找到:https://github.com/StanScates/Tweet.js-Mod#how-to-use

【讨论】:

  • 嗨,谢谢你给我的好回答。这行实际上是什么意思:如果您将 index.php 保存在 /twitter/ 之外的某个位置,请通过 modpath 选项指定它的路径,相对于您的域。例如:&lt;script type="text/javascript"&gt; $(document).ready(function() { $('.twitterfeed').tweet({ modpath: '/assets/twitter/', count: 5, loading_text: 'loading twitter feed...', /* etc... */ }); &lt;/script&gt; 我将在我的根目录中使用我的 index.html,而 javascript 文件将在 js 文件夹中。那么我应该在 mod 选项中放入什么?请让我把这件事弄清楚!
  • @SumonKhan Tweet.js-Mod 插件被“连线”以在站点根目录中名为“twitter”的文件夹中查找 index.php,但是如果您不想/unable to create a folder in the root directory and you have the php file in another sub directory you would need to use the 'modpath' option to point the plugin to your new index.php path.
  • @SumonKhan - 您的 modpath 值应如下所示:modpath: '/js/'
  • 嗨@darshanags 所以,如果我没有将我的 index.php 或 index.html 文件放在任何文件夹或子目录中,那么我不必使用“modpath”,对吗? ?如果是,那么我应该删除“modpath”代码行还是什么?
  • @SumonKhan 不,您仍然需要使用 modpath 将脚本指向 index.php 所在的位置。但我想在根目录中同时拥有 index.php 和 index.html 可能会给您带来麻烦,具体取决于您的 Web 服务器的设置方式。我建议将这个文件夹 github.com/StanScates/Tweet.js-Mod/tree/master/twitter 放在您网站的根目录中,或者将该文件夹的内容放在另一个子目录中。
【解决方案2】:

看起来这是 Twitter 处理请求方式的重大变化,其 API 的 1.0 版允许未经身份验证的请求,但现在情况发生了变化,Twitter 推动开发人员使用他们的嵌入式时间线,这需要身份验证。

Discussion of Twitter transition from v1.0 to v1.1

【讨论】:

    【解决方案3】:

    让我警告你不要使用https://github.com/StanScates/Tweet.js-Mod#how-to-use 它运行良好,但您运行该网站的某些客户可能会出现此错误

    错误:

    XMLHttpRequest 无法加载 http://api.getmytweets.co.uk/?screenname=philipbeel&limit=5&undefined=undefined。 Access-Control-Allow-Origin 不允许来源http://plugins.theodin.co.uk

    此外,此方法不使用 Oauth 方法,您的安全性可能会受到威胁。 Twitter 强烈反对使用客户端身份验证。

    您的解决方案有 2 个部分

    1. 使用基于 php 的 Oauth 脚本检索 JSON 格式的推文
    2. 使用 Jquery 格式化 JSON 并将其显示到您的网站中

    简单且安全。

    这是一个完整的教程 http://www.webdevdoor.com/javascript-ajax/custom-twitter-feed-integration-jquery/

    【讨论】:

      猜你喜欢
      • 2019-07-26
      • 2019-06-11
      • 1970-01-01
      • 1970-01-01
      • 2012-06-10
      • 2021-05-19
      • 1970-01-01
      • 2014-12-30
      • 1970-01-01
      相关资源
      最近更新 更多