Twitter API ดึง Feed และรูปภาพแสดงผลเป็น Pinterest

ดึง Feed ที่มีรูปภาพ และ ข้อความบน timeline ของ @daydev

วิธีการเขียนโปรแกรมดึงข้อมูล Feed ของ Twitter ในรูปแบบ JSON ให้ปรากฏบนหน้าเว็บไซต์ของเราโดยแสดงข้อความและรูปภาพแบบ Pinterest ครับเอเจนซี่หลายเจ้ามักจะ “Conservative” กับการเล่น API ของ Twitter เพราะคิดว่าผู้ใช้งาน Twitter ไม่ค่อยนิยมเล่น Twitter หรืออัพโหลดรูปภาพ Twitter ซึ่งจริงๆ แล้วไม่กล้าที่จะเล่นมากกว่า เพราะคิดว่า Play Save มันปลอดภัย สู้ไปเล่น API ของ Instagram ยังจะปลอดภัยกว่าอันที่จริงคือกังวลว่ามันจะเกิดความซ้ำซ้อนของการเรียกข้อมูล หรือกลัวรูปภาพจาก Twitter นั้นไม่ปรากฏขึ้นมาครับ ก็ไม่เป็นไร “คิดว่าดีก็ทำไป” แค่อยากจะบอกว่า “ใจถึงกันหน่อย” เข้าเรื่องเลยดีกว่า เรามาดูวิธีการพัฒนา API เรียก Feed รูปภาพ และข้อความของ Twitter กันก่อนดีกว่าครับ ซึ่งถ้าพัฒนาเสร็จแล้วมันจะเป็นแบบนี้

วิธีการพัฒนาแอพพลิเคชันตัวนี้

คือสร้างไฟล์ HTML ขึ้นมาก่อนใน Body ให้ใส่ code ข้างล่างครับ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
</head>
<body>
    <div id="daydev">
    </div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

</head>

<body>

</div>

</body>

</html>

กำหนด CSS ออกมาให้มันแสดงผลแบบ Floating เป็นกล่องลอยๆ ตามนี้ครับ

<style type="text/css">
body {font-family:Arial}
#daydev {
	width: 80%;
	font-family: arial;
	font-size: 15px;
	color: #333333;
	padding: 10px;
	margin:0 auto;
}
#daydev .tweet {
	width: 150px;
	margin:5px;
	padding: 5px;
	float:left;
	background:#f1f1f1;
	border:3px solid #ddd;
}
#daydev .tweet a {
	text-decoration: none;
	color: #13c9d0;
}
#daydev .tweet a:hover {
	text-decoration: underline;
}
#daydev .tweet .time {
	font-size: 10px;
	font-style: italic;
	color: #666666;
}
</style>

body {font-family:Arial}

#daydev {

width: 80%;

font-family: arial;

font-size: 15px;

color: #333333;

padding: 10px;

margin:0 auto;

}

#daydev .tweet {

width: 150px;

margin:5px;

padding: 5px;

float:left;

background:#f1f1f1;

border:3px solid #ddd;

}

#daydev .tweet a {

text-decoration: none;

color: #13c9d0;

}

#daydev .tweet a:hover {

text-decoration: underline;

}

#daydev .tweet .time {

font-size: 10px;

font-style: italic;

color: #666666;

}

</style>

เข้าไปเรียก API จาก Twitter API ที่จะแสดงผลออกมาเป็น JSON ครับ กำหนด Path รูปภาพให้ดีตัวอย่างของ รูปภาพบน Twitter นั้นจะมี Path รูปดังนี้ผมใช้ Twitterpic หรือ twimg.com

ภาพ Thumbsnail

http://pbs.twimg.com/media/A3nMG9jCIAAuBnT.jpg:thumb

ภาพใหญ่

http://pbs.twimg.com/media/A3nMG9jCIAAuBnT.jpg:large

ทำการ Get ค่า URL ไปที่

http://api.twitter.com/1/statuses/user_timeline.json/

แทรก JQuery เข้าไปครับ สร้างไฟล์ twitter.js ขึ้นมาโดยมี Code ดังนี้

JQTWEET = {

	user: 'daydev',
	numTweets: 30,
	appendTo: '#daydev',

	loadTweets: function() {
		$.ajax({
			url: 'http://api.twitter.com/1/statuses/user_timeline.json/',
			type: 'GET',
			dataType: 'jsonp',
			data: {
				screen_name: JQTWEET.user,
				include_rts: true,
				count: JQTWEET.numTweets,
				include_entities: true
			},
			success: function(data, textStatus, xhr) {

				 var html = '<div class="tweet">IMG_TAG TWEET_TEXT<div class="time">AGO</div>';
				 var img;
				 for (var i = 0; i < data.length; i++) {
				
					try {
				
						if (data[i].entities.media) {
							img = '<a href="' + data[i].entities.media[0].media_url + ':large" class="fancy">';
							img += '<img src="' + data[i].entities.media[0].media_url + ':thumb" alt="" width="150" />';
							img += '</a>';
						} else {
							img = '';
						}
					
					} catch (e) {
					
					}

					$(JQTWEET.appendTo).append(
						html.replace('IMG_TAG', img)
							.replace('TWEET_TEXT', JQTWEET.ify.clean(data[i].text, img) )
							.replace(/USER/g, data[i].user.screen_name)
							.replace('AGO', JQTWEET.timeAgo(data[i].created_at) )
							.replace(/ID/g, data[i].id_str)							
					);
				 }
							
				var $container = $('#daydev');
				$container.imagesLoaded(function(){
				  $container.masonry({
				    itemSelector : '.tweet',
				    columnWidth : 0,
				    isAnimated: true
				  });
				});		
				
				//the last step, activate fancybox 
				$("a.fancy").fancybox({
					'overlayShow'	: false,
					'transitionIn'	: 'elastic',
					'transitionOut'	: 'elastic',
					'overlayShow'	: true
				});							 					
				
			}	

		});
		
	}, 

    timeAgo: function(dateString) {
		var rightNow = new Date();
		var then = new Date(dateString);
		
		if ($.browser.msie) {
			then = Date.parse(dateString.replace(/( \+)/, ' UTC$1'));
		}

		var diff = rightNow - then;

		var second = 1000,
		minute = second * 60,
		hour = minute * 60,
		day = hour * 24,
		week = day * 7;

		if (isNaN(diff) || diff < 0) {
			return ""; // return blank string if unknown
		}

		if (diff < second * 2) {
			// within 2 seconds
			return "right now";
		}

		if (diff < minute) {
			return Math.floor(diff / second) + " seconds ago";
		}

		if (diff < minute * 2) {
			return "about 1 minute ago";
		}

		if (diff < hour) {
			return Math.floor(diff / minute) + " minutes ago";
		}

		if (diff < hour * 2) {
			return "about 1 hour ago";
		}

		if (diff < day) {
			return  Math.floor(diff / hour) + " hours ago";
		}

		if (diff > day && diff < day * 2) {
			return "yesterday";
		}

		if (diff < day * 365) {
			return Math.floor(diff / day) + " days ago";
		}

		else {
			return "over a year ago";
		}
	},

    ify:  {
      link: function(tweet, hasIMG) {
        return tweet.replace(/\b(((https*\:\/\/)|www\.)[^\"\']+?)(([!?,.\)]+)?(\s|$))/g, function(link, m1, m2, m3, m4) {
          var http = m2.match(/w/) ? 'http://' : '';
          if (hasIMG) return '';
          else return '<a class="twtr-hyperlink" target="_blank" href="' + http + m1 + '">' + ((m1.length > 25) ? m1.substr(0, 24) + '...' : m1) + '</a>' + m4;
        });
      },

      at: function(tweet) {
        return tweet.replace(/\B[@＠]([a-zA-Z0-9_]{1,20})/g, function(m, username) {
          return '<a target="_blank" class="twtr-atreply" href="http://twitter.com/intent/user?screen_name=' + username + '">@' + username + '</a>';
        });
      },

      list: function(tweet) {
        return tweet.replace(/\B[@＠]([a-zA-Z0-9_]{1,20}\/\w+)/g, function(m, userlist) {
          return '<a target="_blank" class="twtr-atreply" href="http://twitter.com/' + userlist + '">@' + userlist + '</a>';
        });
      },

      hash: function(tweet) {
        return tweet.replace(/(^|\s+)#(\w+)/gi, function(m, before, hash) {
          return before + '<a target="_blank" class="twtr-hashtag" href="http://twitter.com/search?q=%23' + hash + '">#' + hash + '</a>';
        });
      },

      clean: function(tweet , hasIMG) {
	      return this.hash(this.at(this.list(this.link(tweet, hasIMG))));

      }
    }
};
JQTWEET.loadTweets();

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

JQTWEET = {

user: 'daydev',

numTweets: 30,

appendTo: '#daydev',

loadTweets: function() {

$.ajax({

url: 'http://api.twitter.com/1/statuses/user_timeline.json/',

type: 'GET',

dataType: 'jsonp',

data: {

screen_name: JQTWEET.user,

include_rts: true,

count: JQTWEET.numTweets,

include_entities: true

success: function(data, textStatus, xhr) {

var html = '<div class="tweet">IMG_TAG TWEET_TEXT<div class="time">AGO</div>';

var img;

for (var i = 0; i < data.length; i++) {

try {

if (data[i].entities.media) {

img = '<a href="' + data[i].entities.media[0].media_url + ':large" class="fancy">';

img += '<img src="' + data[i].entities.media[0].media_url + ':thumb" alt="" width="150" />';

img += '</a>';

} else {

img = '';

}

} catch (e) {

}

$(JQTWEET.appendTo).append(

html.replace('IMG_TAG', img)

.replace('TWEET_TEXT', JQTWEET.ify.clean(data[i].text, img) )

.replace(/USER/g, data[i].user.screen_name)

.replace('AGO', JQTWEET.timeAgo(data[i].created_at) )

.replace(/ID/g, data[i].id_str)

);

}

var $container = $('#daydev');

$container.imagesLoaded(function(){

$container.masonry({

itemSelector : '.tweet',

columnWidth : 0,

isAnimated: true

});

//the last step, activate fancybox

$("a.fancy").fancybox({

'overlayShow' : false,

'transitionIn' : 'elastic',

'transitionOut' : 'elastic',

'overlayShow' : true

});

}

});

timeAgo: function(dateString) {

var rightNow = new Date();

var then = new Date(dateString);

if ($.browser.msie) {

then = Date.parse(dateString.replace(/( \+)/, ' UTC$1'));

}

var diff = rightNow - then;

var second = 1000,

minute = second * 60,

hour = minute * 60,

day = hour * 24,

week = day * 7;

if (isNaN(diff) || diff < 0) {

return ""; // return blank string if unknown

}

if (diff < second * 2) {

// within 2 seconds

return "right now";

}

if (diff < minute) {

return Math.floor(diff / second) + " seconds ago";

}

if (diff < minute * 2) {

return "about 1 minute ago";

}

if (diff < hour) {

return Math.floor(diff / minute) + " minutes ago";

}

if (diff < hour * 2) {

return "about 1 hour ago";

}

if (diff < day) {

return Math.floor(diff / hour) + " hours ago";

}

if (diff > day && diff < day * 2) {

return "yesterday";

}

if (diff < day * 365) {

return Math.floor(diff / day) + " days ago";

}

else {

return "over a year ago";

}

ify: {

link: function(tweet, hasIMG) {

return tweet.replace(/\b(((https*\:\/\/)|www\.)[^\"\']+?)(([!?,.\)]+)?(\s|$))/g, function(link, m1, m2, m3, m4) {

var http = m2.match(/w/) ? 'http://' : '';

if (hasIMG) return '';

else return '<a class="twtr-hyperlink" target="_blank" href="' + http + m1 + '">' + ((m1.length > 25) ? m1.substr(0, 24) + '...' : m1) + '</a>' + m4;

});

at: function(tweet) {

return tweet.replace(/\B[@＠]([a-zA-Z0-9_]{1,20})/g, function(m, username) {

return '<a target="_blank" class="twtr-atreply" href="http://twitter.com/intent/user?screen_name=' + username + '">@' + username + '</a>';

});

list: function(tweet) {

return tweet.replace(/\B[@＠]([a-zA-Z0-9_]{1,20}\/\w+)/g, function(m, userlist) {

return '<a target="_blank" class="twtr-atreply" href="http://twitter.com/' + userlist + '">@' + userlist + '</a>';

});

hash: function(tweet) {

return tweet.replace(/(^|\s+)#(\w+)/gi, function(m, before, hash) {

return before + '<a target="_blank" class="twtr-hashtag" href="http://twitter.com/search?q=%23' + hash + '">#' + hash + '</a>';

});

clean: function(tweet , hasIMG) {

return this.hash(this.at(this.list(this.link(tweet, hasIMG))));

}

};

JQTWEET.loadTweets();

ผมแก้ไข user: ‘daydev’ เพื่อดึง Timeline ของผมออกมา หลังจากนั้นก็แก้ไขค่า Head Tag ของ HTML ตามนี้ครับ ผมเลือกใช้ FancyBox มาดึงค่ารูปภาพให้แสดงเป็นรูปใหญ่เล็กน้อยเพื่อความสวยงาม

ก็เป็นอันเรียบร้อยใช้งานได้ ปรกติแสดงผลรูปได้ด้วย ดูตัวอย่างได้ที่นี่ครับ