[英]jQuery Twitter Feed Not Displaying on Static Website
I am trying to integrate a Twitter feed on my website, but with the following setup my feed is stuck showing "Loading Tweets..." 我正在尝试将Twitter feed集成到我的网站上,但是通过以下设置,我的feed被卡住,显示“正在加载推文...”。
Here is the Script loaded directly on the index page: 这是直接在索引页面上加载的脚本:
<script src="js/libs/jquery.twitter.js" type="text/javascript"></script>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#twitter").getTwitter({
userName: "username",
numTweets: 3,
loaderText: "Loading tweets...",
slideIn: true,
slideDuration: 750,
showHeading: true,
headingText: "Latest Tweets",
showProfileLink: false,
showTimestamp: false,
target: "_top"
});
});
</script>
<script>
if ($) { //check if $ is defined - but this check results in an error!
$("#twitter").click (function () {}); //my jQuery code here
}
</script>
And here is the code inside of the jquery.twitter.js file: 这是jquery.twitter.js文件中的代码:
(function($) {
/*
jquery.twitter.js v1.5
Last updated: 08 July 2009
Created by Damien du Toit
http://coda.co.za/blog/2008/10/26/jquery-plugin-for-twitter
Licensed under a Creative Commons Attribution-Non-Commercial 3.0 Unported License
http://creativecommons.org/licenses/by-nc/3.0/
This code is modified by http://plugidea.com/iweb/
Updated date: Mar 10, 2011
*/
$.fn.getTwitter = function(options) {
$.fn.getTwitter.defaults = {
userName: null,
numTweets: 5,
loaderText: "Loading tweets...",
slideIn: true,
slideDuration: 750,
showHeading: true,
headingText: "Latest Tweets",
showProfileLink: true,
showTimestamp: true,
target: "_blank"
};
var o = $.extend({}, $.fn.getTwitter.defaults, options);
return this.each(function() {
var c = $(this);
// hide container element, remove alternative content, and add class
c.hide().empty().addClass("twitted");
// add heading to container element
if (o.showHeading) {
c.append("<h2>"+o.headingText+"</h2>");
}
// add twitter list to container element
var twitterListHTML = "<ul id=\"twitter_update_list\"><li></li></ul>";
c.append(twitterListHTML);
var tl = $("#twitter_update_list");
// hide twitter list
tl.hide();
// add preLoader to container element
var preLoaderHTML = $("<p class=\"preLoader\">"+o.loaderText+"</p>");
c.append(preLoaderHTML);
// add Twitter profile link to container element
if (o.showProfileLink) {
var profileLinkHTML = "<p class=\"profileLink\"><a href=\"http://twitter.com/"+o.userName+"\">http://twitter.com/"+o.userName+"</a></p>";
c.append(profileLinkHTML);
}
// show container element
c.show();
//$.getScript("http://twitter.com/javascripts/blogger.js");
$.getScript("http://twitter.com/statuses/user_timeline/"+o.userName+".json?callback=twitterCallback2&count="+o.numTweets, function() {
// remove preLoader from container element
$(preLoaderHTML).remove();
// remove timestamp and move to title of list item
tl.find("li").each(function() {
var timestampHTML = $(this).children("a");
var timestamp = timestampHTML.html();
if (!o.showTimestamp) {
timestampHTML.remove();
$(this).attr("title", timestamp);
}
$('a',this).attr("target", o.target);
});
// show twitter list
if (o.slideIn) {
// a fix for the jQuery slide effect
// Hat-tip: http://blog.pengoworks.com/index.cfm/2009/4/21/Fixing-jQuerys-slideDown-effect-ie-Jumpy-Animation
var tlHeight = tl.data("originalHeight");
// get the original height
if (!tlHeight) {
tlHeight = tl.show().height();
tl.data("originalHeight", tlHeight);
tl.hide().css({height: 0});
}
tl.show().animate({height: tlHeight}, o.slideDuration);
}
else {
tl.show();
}
// add unique class to first list item
tl.find("li:first").addClass("firstTweet");
// add unique class to last list item
tl.find("li:last").addClass("lastTweet");
});
});
};
})(jQuery);
I used an out of the box solution, as I'm fairly new to Javascript and jQuery. 我使用了开箱即用的解决方案,因为我对Javascript和jQuery还是相当陌生。 I replaced the Twitter username with the words "username" for security.
为了安全起见,我将Twitter用户名替换为“用户名”。
Any help is greatly appreciated. 任何帮助是极大的赞赏。
Make sure your loading the jQuery library before your jQuery scripts/calls. 确保在加载jQuery脚本/调用之前加载jQuery库。
As far as I'm aware, you shouldn't need 据我所知,您不需要
<script>
if ($) { //check if $ is defined - but this check results in an error!
$("#twitter").click (function () {}); //my jQuery code here
}
</script>
and I believe username: "username", is where you actually input your account handle.
我相信
username: "username", is where you actually input your account handle.
Make sure your div has an ID
of twitter as well. 确保您的div也具有twitter的
ID
。
<div id="twitter"></div><!--end twitter -->
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.