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

(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

Xem khác cùng chủ đề

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang