如何使用JS显示带有自定义图标的Twitter feed而不是个人资料图像
[英]How to display a Twitter feed with custom icon instead of profile image with JS
问题描述
So right now I am trying to style a twitter feed that will display on a website. 
因此，现在我正在尝试设置将在网站上显示的Twitter提要的样式。 I am using TweeCool to do this ( http://www.tweecool.com/ ). 我正在使用TweeCool来做到这一点（ http://www.tweecool.com/ ）。 Basically, I am trying to figure out how I can swap the profile thumbnail image, with a custom twitter icon. 基本上，我试图弄清楚如何使用自定义Twitter图标交换个人资料缩略图。 So basically what I want, is for each tweet to display back with a twitter font icon on the left side of it. 所以基本上我想要的是让每条推文在其左侧都显示一个Twitter字体图标。 With the code below I can get the first tweet displayed as I want but it does not go through the JS loop to style the others. 使用下面的代码，我可以根据需要显示第一个tweet，但是它不会通过JS循环来设置其他样式。 I am fairly new to JS and Jquery, so was wondering what I could do to make it so that each tweet would prepend the twitter icon to the left of the text such as the first one in the example. 我对JS和Jquery还是很陌生，所以想知道如何做才能使每个tweet都位于文本左侧的twitter图标之前，例如示例中的第一个。 Any help would be greatly appreciated! 任何帮助将不胜感激！
<!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>
1 个解决方案
解决方案1
0 2015-08-06 05:02:52
With default tweecool plugin its not possible so have to hack the plugin and put the icon inside tweecool.js so icon load with each tweet and just minor changes in css code as follow. 使用默认的tweecool插件是不可能的，因此必须破解该插件并将图标放在tweecool.js以便在每个tweet上加载图标，并在CSS代码中进行较小的更改，如下所示。
Set display none here if you don't want to show default icon 如果您不想显示默认图标，请在此处设置“不显示”
.tweetLogo i{
display: none !important;
}
Add this in style so icon load with each tweet have color and fontsize 以样式添加此样式，以便每个推文中的图标加载都具有颜色和字体大小
#tweecool i{
color: blueviolet;
font-size: 20px;
}
remove this from <head> 从<head>删除它
<script src="http://api.tweecool.com/js/tweecool.min.js" type="text/javascript"></script>
Create new tweecool.js blank file in root directory and add it in <head> 在根目录中创建新的tweecool.js空白文件，并将其添加到<head>
<script src="tweecool.js" type="text/javascript"></script>
Add following code in tweecool.js and you are good to go 在tweecool.js添加以下代码， 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);
What I did is here, near the bottom of above tweecool.js i added the icon <i class="fa fa-twitter"></i> 我在这里做的是在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>');
});
So it loads with each tweet 因此，每条推文都会加载
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.