所以现在我正在尝试设置一个将在网站上显示的Twitter提要。我正在使用TweeCool执行此操作（http://www.tweecool.com/）。基本上，我试图找出如何使用自定义Twitter图标交换配置文件缩略图图像。基本上我想要的是，每条推文都会在其左侧显示一个推特字体图标。使用下面的代码，我可以根据需要显示第一条推文，但它不会通过JS循环来设置其他推文。我是JS和Jquery的新手，所以我想知道我能做些什么来让每个推文都在文本的左边添加twitter图标，例如示例中的第一个。任何帮助将不胜感激！
<!DOCTYPE html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"> </script>
<script src="http://api.tweecool.com/js/tweecool.min.js" type="text/javascript"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet" type="text/css">
<script>
$(document).ready(function() {
$('#tweecool').tweecool({
//settings
username : 'cnnbrk',
limit : 5,
profile_image: false
});
});
</script>
<style>
#tweecool ul {
list-style-type: none;
}
.container-tweet {
display: block;
position: relative;
width: 400px;
}
#tweecool {
width: 80%;
position: absolute;
margin-left: 0px;
line-height: 15px;
font-size: 12px;
}
.tweetLogo {
position: absolute;
margin-top: 10px;
width: 20%;
}
.tweetLogo i{
color: blueviolet;
font-size: 20px;
}
</style>
</head>
<body>
<div class="container-tweet">
<div class="tweetLogo"><i class="fa fa-twitter"></i></div>
<div id="tweecool"></div>
</div>
</body>
</html>
答案 0 :(得分：0)
使用默认的tweecool插件是不可能的，因此必须破解插件并将图标放在tweecool.js内，以便每个推文加载图标，只需对css代码进行微小更改，如下所示。
如果您不想显示默认图标
，请在此处设置显示无.tweetLogo i{
display: none !important;
}
在样式中添加此项，因此每个推文的图标加载都有颜色和fontsize
#tweecool i{
color: blueviolet;
font-size: 20px;
}
从<head>
<script src="http://api.tweecool.com/js/tweecool.min.js" type="text/javascript"></script>
在根目录中创建新的tweecool.js空白文件，并将其添加到<head>
<script src="tweecool.js" type="text/javascript"></script>
在tweecool.js中添加以下代码，您就可以了
/*Name : TweeCool
*version: 1.6
*Description: Get the latest tweets from twitter.
*Website: www.tweecool.com
*Licence: No licence, feel free to do whatever you want.
*Author: TweeCool
*/
(function($) {
$.fn.extend({
tweecool : function(options) {
var defaults = {
username : 'tweecool',
limit : 5,
profile_image : true,
show_time : true,
show_media : false,
show_media_size: 'thumb' //values: small, large, thumb, medium
}
var options = $.extend(defaults, options);
function xTimeAgo(time) {
var nd = new Date();
//var gmtDate = Date.UTC(nd.getFullYear(), nd.getMonth(), nd.getDate(), nd.getHours(), nd.getMinutes(), nd.getMilliseconds());
var gmtDate = Date.parse(nd);
var tweetedTime = time * 1000; //convert seconds to milliseconds
var timeDiff = (gmtDate - tweetedTime) / 1000; //convert milliseconds to seconds
var second = 1, minute = 60, hour = 60 * 60, day = 60 * 60 * 24, week = 60 * 60 * 24 * 7, month = 60 * 60 * 24 * 30, year = 60 * 60 * 24 * 365;
if (timeDiff > second && timeDiff < minute) {
return Math.round(timeDiff / second) + " seconds ago";
} else if (timeDiff >= minute && timeDiff < hour) {
return Math.round(timeDiff / minute) + " minutes ago";
} else if (timeDiff >= hour && timeDiff < day) {
return Math.round(timeDiff / hour) + " hours ago";
} else if (timeDiff >= day && timeDiff < week) {
return Math.round(timeDiff / day) + " days ago";
} else if (timeDiff >= week && timeDiff < month) {
return Math.round(timeDiff / week) + " weeks ago";
} else if (timeDiff >= month && timeDiff < year) {
return Math.round(timeDiff / month) + " months ago";
} else {
return 'over a year ago';
}
}
return this.each(function() {
var o = options;
var wrapper = $(this);
var wInner = $('<ul>').appendTo(wrapper);
var urlpattern = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
var usernamepattern = /@+(\w+)/ig;
var hashpattern = /#+(\w+)/ig;
var media = '';
$.getJSON("https://www.api.tweecool.com/?screenname=" + o.username + "&count=" + o.limit, function(data) {
if (data.errors || data == null) {
wrapper.html('No tweets available.');
return false;
}
if (o.profile_image) {
var pIMG = '<a href="https://twitter.com/' + o.username + '" target="_blank"><img src="' + data.user.profile_image_url + '" alt="' + o.username + '" /></a>';
} else {
pIMG = '';
}
$.each(data.tweets, function(i, field) {
if (o.show_time) {
var timestamp = xTimeAgo(field.timestamp);
} else {
var timestamp = '';
}
if(o.show_media && field.media_url){
media = '<a href="https://twitter.com/' + o.username + '" target="_blank"><img src="' + field.media_url + ':'+o.show_media_size+'" alt="' + o.username + '" class="media" /></a>';
}else{
media = '';
}
wInner.append('<li> <i class="fa fa-twitter"></i>' + pIMG + '<div class="tweets_txt">' + field.text.replace(urlpattern, '<a href="$1" target="_blank">$1</a>').replace(usernamepattern, '<a href="https://twitter.com/$1" target="_blank">@$1</a>').replace(hashpattern, '<a href="https://twitter.com/search?q=%23$1" target="_blank">#$1</a>') + media + ' <span>' + timestamp + '</span></div></li>');
});
}).fail(function(jqxhr, textStatus, error) {
//var err = textStatus + ', ' + error;
wrapper.html('No tweets available');
});
});
}
});
})(jQuery);
我所做的就是在上面tweecool.js的底部附近我添加了图标<i class="fa fa-twitter"></i>
wInner.append('<li> <i class="fa fa-twitter"></i>' + pIMG + '<div class="tweets_txt">' + field.text.replace(urlpattern, '<a href="$1" target="_blank">$1</a>').replace(usernamepattern, '<a href="https://twitter.com/$1" target="_blank">@$1</a>').replace(hashpattern, '<a href="https://twitter.com/search?q=%23$1" target="_blank">#$1</a>') + media + ' <span>' + timestamp + '</span></div></li>');
});
因此每个推文加载
每条推文Example 的twitter徽标