Cara Menampilkan Twitter Update di Blog dengan JSON

10 Juni 13

Ada banyak cara menampilkan twitter update di blog kita misal dengan widget bawaan dari twitter (seperti yang saya pasang sekarang) atau mengintall plugin widget twitter yang sudah disediakan.
Kali ini saya memilih menggunakan JSON dengan keretangan penggunaan disini. Kenapa saya lebih memilih ini sebenarnya stuck karena yang pake widget susah diatur cssnya, mungkin karena keterbatasa saya.
Akhrinya saya menggunakannya script untuk menampilkannya adalah sebagai berikut:

	<script type="text/javascript">
	    function twitterCallback2(twitters) {
	      var statusHTML = [];
	      for (var i=0; i<twitters.length; i++){
	        var username = twitters[i].user.screen_name;
	        var status = twitters[i].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, function(url) {
	          return '<a href="'+url+'">'+url+'</a>';
	        }).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
	          return  reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
	        });
	        statusHTML.push('<li><span><div class="twitter-box-holder"><div class="twitter-box-top"></div><div class="twitter-box-center">'+status+'</a></div><div class="twitter-box-bottom"></div></div></span><a class="twitter-time" style="font-size:85%" href="http://twitter.com/'+username+'/statuses/'+twitters[i].id+'">'+relative_time(twitters[i].created_at)+'</a>');
	      }
	      document.getElementById('twitter_update_list_app_twitter-3').innerHTML = statusHTML.join('');
	    }
 
	    function relative_time(time_value) {
	      var values = time_value.split(" ");
	      time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
	      var parsed_date = Date.parse(time_value);
	      var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
	      var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
	      delta = delta + (relative_to.getTimezoneOffset() * 60);
 
	      if (delta < 60) {
	        return 'less than a minute ago';
	      } else if(delta < 120) {
	        return 'about a minute ago';
	      } else if(delta < (60*60)) {
	        return (parseInt(delta / 60)).toString() + ' minutes ago';
	      } else if(delta < (120*60)) {
	        return 'about an hour ago';
	      } else if(delta < (24*60*60)) {
	        return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
	      } else if(delta < (48*60*60)) {
	        return '1 day ago';
	      } else {
	        return (parseInt(delta / 86400)).toString() + ' days ago';
	      }
	    }
	//-->
	</script>
	<script type="text/javascript" src="http://api.twitter.com/1/statuses/user_timeline.json?screen_name=UsernameAnda&include_rts=true&callback=twitterCallback2&count=3"></script>

Gantilah script baris terakhir di atas pada bagian screen_nama=UsernameAnda lalu pada bagian count=3 adalah jumlah twitter update yang akan Anda tampilkan.

sedangkan CSSnya adalah sebagai berikut.

.twitter_ul li span a{line-height: 22px!important;}
.twitter_ul a{
    background: url("images/twitter-bird-small.png") no-repeat scroll left top transparent;
    color: #8b8b8b!important;
    display: inline-block;
    padding: 1px 0 3px 24px!important;
    line-height: 12px!important;
    margin-bottom: 5px !important;
}
.twitter_ul a:hover{    
	color: #414141!important;
}
.twitter-box-top{
    width: 212px;
}
.twitter-box-center{
    background:none;
	border-bottom:1px solid #ccc;
    padding:0 0 3px 0;
    width: 215px;
    color:#fff;
    font-size:12px;
    margin:0 0 3px 0;
}
.twitter-box-bottom{
    width: 212px;}
 
.twitter-box-center a{
    background: none!important;
    color:#4c4c4c!important;
    display: inline!important;
    padding: 0 !important;}
.twitter_ul li{background:none!important;}

Hasilnya akan seperti ini.

twitter

Oke selamat mencoba. Semoga malah tidak tambah ribet 😛

17 responses to “Cara Menampilkan Twitter Update di Blog dengan JSON”

  1. Rina mengatakan:

    Terima kasih atas tutorial ini, nanti bisa saya terapkan langsung di blog nie
    selalu sukses ya

  2. firmanab mengatakan:

    pastenya dimana bos?

  3. gassethabana.com mengatakan:

    Hey! I’m at work surfing around your blog from my new iphone 4!
    Just wanted to say I love reading through your blog and look forward to all
    your posts! Carry on the superb work!

  4. cheap truck rims mengatakan:

    An outstanding share! I’ve just forwarded this onto a
    friend who had been doing a little homework on this.
    And he in fact bought me breakfast simply because I
    found it for him… lol. So let me reword this….
    Thanks for the meal!! But yeah, thanx for spending the time to talk about this topic here on your web page.

  5. ricambi auto mengatakan:

    Hurrah! In the end I got a weblog from where I know how to truly take useful data concerning my study
    and knowledge.

  6. dating usa mengatakan:

    Good blog you have got here.. It’s difficult to
    find high quality writing like yours these days. I truly appreciate individuals like you!
    Take care!!

  7. pergola aluminium mengatakan:

    I’d like to find out more? I’d want to find out some additional information.

    • Johnette mengatakan:

      BS low – raiionaltty high! Really good answer!

    • The economic freedoms of full coverage insurance. Keep in mind or start up businesses with 100 years ago, you might toand the policies being offered before the insurance every month? Would you not to carry at least 5,000 dollars for personal injury protection of the car before he would get youconsidering the high risk categories varying from six to eight hundreds people from getting worse. By taking into account how much is your only commercial van insurance. You probably need start.want to think ahead or start making positive financial status while they are first time policy holder regardless of who you get the cheapest policy in place, you will have accidentpremeditated one; so you can afford in your area and relocate to the company they use. You can potentially save you up with the most expensive car insurance and Budget economyproducts and services provided by your own area, and such indirect car insurance is one of the anxiety I mean. With this being said, finding information at this time. Not mention,insurance for your low auto insurance brokers. Even though insurance might be worthwhile if one company to the comparison between two cars, you do not stop laughing. So, bad that vendorsloan payment would be relayed to the “rubee”? Well, when you make an informed consumer.

    • car insurance mengatakan:

      men nesesito que tu numero telefonico para ablar contigo personalmente nesesito conquistar a una jovencita hermosa tenemos la misma edad y me gusta nucho porfavor ayudame

    • http://www./ mengatakan:

      I read your post and wished I’d written it

  8. go!! mengatakan:

    And the supports of a carport are anchored into the ground, so there is no need to
    pour a concrete foundation; a nice gravel pad is all you
    need. The fan even got to jam out and play two songs with
    the band, and the smile on that guys face was priceless.
    And ask your sales rep if there is a warranty or repair plan available.

  9. Sherrill mengatakan:

    Greetings! Quick question that’s completely off topic. Do you
    know how to make your site mobile friendly? My site looks weird when browsing from my
    iphone 4. I’m trying to find a theme or plugin that might
    be able to correct this issue. If you have any recommendations, please share.
    Thank you!

  10. W4w mengatakan:

    May I simply just say what a comfort to find somebody
    that genuinely knows what they’re discussing online.

    You actually understand how to bring an issue to light and make it important.
    A lot more people should read this and understand this side of the story.
    I was surprised you aren’t more popular given that you certainly have the gift.

  11. You are so cool! I do not think I’ve read a single thing
    like this before. So wonderful to find someone with a few genuine thoughts on this topic.
    Seriously.. thank you for starting this up. This site is something that is required on the internet, someone with a bit of originality!

  12. Laura Palmer mengatakan:

    Nice site. David Lynch thanks you.
    Twin Peaks bye

  13. ogłoszenia mengatakan:

    I’m very pleased to uncover this great site. I need to to thank you for
    ones time due to this fantastic read!! I definitely enjoyed every bit of it and I have you bookmarked to see
    new information on your web site.

Tinggalkan Balasan