Tạo tiện ích Recent Twitter Tweets với JQuery cho Blogspot

Điểm 4.6/5 dựa vào 87 đánh giá

(Traidatmui.com) - Như bạn biết Twitter là một trang mạng xã hội, một trang micro-blog, một mạng nhắn tin, một công cụ marketing, và là một nơi cung cấp tin tức hiệu quả. Với Twitter bạn có thể đưa trực tiếp bài viết từ blog của mình lên Twitter để chia sẻ cùng mọi người, bạn có thể cập nhật thông tin nhanh... Bạn đã biết nhiều về Twitter nên mình không bàn nhiều tính năng của nó nữa, ở đây mình chỉ muốn chia sẽ với các blogger cách để tạo tiện ích "Recent Twitter Tweets" tiện ích này sẽ hiển thị các bài viết gần đây của bạn trên Twitter bằng việc sử dụng JQuery.

Bài viết trên Twitter

Hình ảnh minh họa kết quả thủ thuật
» Bắt đầu thủ thuật

1. Đăng nhập tài khoản Blogger
2. Vào thiết kế (Design), (hay bố cục)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào sau thẻ <head> hoặc trước thẻ </head>
<script src="http://data-traidatmui.appspot.com/scripts/jquery.min.v1.4.1.js" type="text/javascript"></script>

<style type="text/css">
#preload {display: none;}
#tweets ul li{
list-style-type:square;
list-style-position:inside;
list-style-image:url('http://lh4.ggpht.com/_9-sNIAfGhKg/TTz889zQC1I/AAAAAAAAACc/tFnKe0WkAK0/twitter.png');
margin:0 0 0;
padding:0 0 0;
}
</style>

5. Save template lại
6. Trở về phần tử trang và thêm 1 HTML/Javascript và thêm vào nó code sau
<script type="text/javascript" charset="utf-8">
function showTweets(elem, username, number) {
var html = '<ul>';
var tweetFeed = 'http://twitter.com/status/user_timeline/' + username + '.json?count=' + number + '&callback=?'
$.getJSON(tweetFeed, function(d)
{
$.each(d, function(i,item)
{
html+='<li>'+item.text+'</li>';
})
html+="</ul>";
elem.children().fadeOut('fast',function() {
elem.append(html);
})})}
$(function() {
$('#error').remove();
$('#preload').show();
showTweets($('#tweets'), 'traidatmui88', 5)
});
</script>
<div style="font-size:12px;font-family:Arial;">
<div id="tweets">
<h3 id="error">There was a problem fetching tweets</h3>
<h3 id="preload">Currently loading your tweets...</h3>
</div>
<ul><li style="margin-left:100px;list-style-type:none;"><a href="http://www.twitter.com/traidatmui88">Follow me on twitter</a></li></ul>
</div>

» Chỉnh sửa code: Bạn hãy thay dòng màu đỏ (traidatmui88) thành tên người dùng (username) của bạn, đây là tài khoản của bạn để đăng nhập trên twitter.com.

7. Cuối cùng save tiện ích lại

Chúc bạn thành công

Tham khảo Blogger Tips & Tricks

Loading...

Không có nhận xét nào