Entrar
Cadastre-se
Início1
Tweets Recentes - JavaScript + HTML Qui Ago 23, 2012 8:25 pm
RafsEstevam
Programador
Minis : 
:00
:00
:00
:00:00:00Mensagens : 395
Aqui estou eu, estava a um bom tempo, sem postar porque estava sem conteudo... Mas agora que estou com um conteudo novo irei postar mais umas 100 VEZES... Esse script está em meu portifólio.
Como a area é "avançada" não irei ensinar como colocar, e sim o código. Se entender, bom para você se não entendeu, bom para você denovo...
Primeiro você terá que ter o seguinte código na pasta seu port/js/... Coloque com o nome de jquery.livetweet.js
Agora você terá que fazer um arquivo com o nome de custom.js...
Depois no seu código css coloque o seguinte:
Se quiser as imagens estará abaixo:
Como a area é "avançada" não irei ensinar como colocar, e sim o código. Se entender, bom para você se não entendeu, bom para você denovo...
Primeiro você terá que ter o seguinte código na pasta seu port/js/... Coloque com o nome de jquery.livetweet.js
- Código:
/*
JQUERY LIVETWEET 0.5
by Rafs
http://www.rafaelbrasil.x10.mx
*/
(function($){
var settings = {
'limit' : 5,
'username' : 'Usuario',
'timeout' : 2000,
'html_before' : '<ul>',
'html_tweets' : '<li>{text}<br>{date}</li>',
'html_after' : '</ul>',
'lang' : 'pt',
'use_relative_dates' : true,
'format_date' : function(d) {
return (this.use_relative_dates) ? $.fn.livetweet('relative_date',d) : $.fn.livetweet('format_date', d);
}
};
var loc = {
'pt' : {
'meses' : 'JAN,FEV,MAR,ABR,MAI,JUN,JUL,AOG,SET,OUT,NOV,DEZ',
'dias' : 'Segunda,Terça,Quarta,Quinta,Sexta,Sabado,Domingo',
'tempo' : 'Segundos Atrás,1 minuto atrás,Minutos Atrás,1 Hora Atrás,Horas Atrás,1 dia atrás,Dias atrás, à um longo tempo',
'erros' : 'Um erro ocorreu!',
'carregando' : 'Carregando...'
}
};
var _meses, _dias, _tempo;
var methods = {
init : function(options) {
var $this = this;
if(options) $.extend(settings, options);
_months = loc[settings.lang]['months'].split(',');
_days = loc[settings.lang]['days'].split(',');
_timespan = loc[settings.lang]['time_span'].split(',');
$.ajax({
beforeSend : function() {$this.html('<span class="livetweet-loading">'+loc[settings.lang]['loading']+'</span>');},
url: 'http://api.twitter.com/1/statuses/user_timeline.json?screen_name='+settings.username+'&count='+settings.limit,
type: 'GET',
dataType: 'jsonp',
timeout: settings.timeout,
error: function() {
$this.html('<span class="livetweet-error">'+loc[settings.lang]['error']+'</span>');
},
success: function(json){
$this.find(".livetweet-loading").remove();
rt = settings.html_before;
tweets = '';
for(i=0;i<json.length;i++) {
text = settings.html_tweets.replace('{text}', $.fn.livetweet('format_links', json[i].text));
date_parse = $.browser.msie ? new Date(json[i].created_at.replace(/(\+\S+) (.*)/, '$2 $1')) : new Date(json[i].created_at);
tweets += text.replace('{date}', settings.format_date(date_parse));
}
rt += tweets+settings.html_after;
return $this.each(function() {
$(this).append(rt);
});
}
});
},
format_links : function(t) {
var rxp_url = /((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi;
var rxp_user = /[\@]+([A-Za-z0-9-_]+)/gi;
var rxp_hash = /[\#]+([A-Za-z0-9-_]+)/gi;
t = t.replace(rxp_url,'<a target="_blank" href="$1">$1</a>');
t = t.replace(rxp_user,'<a target="_blank" href="http://twitter.com/$1">@$1</a>');
t = t.replace(rxp_hash,'<a target="_blank" href="http://search.twitter.com/search?q=&tag=$1&lang=all">#$1</a>');
return t;
},
format_date : function(dt) {
return _days[dt.getDay()]+ ' ' + dt.getDate() + ' ' + _months[dt.getMonth()] + ' ' + dt.getFullYear();
},
relative_date : function(dt) {
diff = ((new Date()).getTime() - dt.getTime())/1000;
if(diff < 60) return Math.round(diff) + ' ' + _timespan[0];
if(diff >= 60 && diff < 120) return _timespan[1];
if(diff >= 120 && diff < 3600) return Math.floor(diff/60) + ' ' + _timespan[2];
if(diff >= 3600 && diff < 7200) return _timespan[3];
if(diff >= 7200 && diff < 86400) return Math.floor(diff/60/60) + ' ' + _timespan[4];
if(diff >= 86400 && diff < 172800) return _timespan[5];
if(diff >= 172800 && diff < 2592000) return Math.floor(diff/60/60/24) + ' ' + _timespan[6];
if(diff >= 2592000) return _timespan[7];
}
};
$.fn.livetweet = function(method) {
if(methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments,1));
} else if(typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method '+method+' não existe em jQuery.livetweet');
}
};
})(jQuery);
Agora você terá que fazer um arquivo com o nome de custom.js...
- Código:
/***************************************************
jQuery.LiveTweet
***************************************************/
$('.twitter').livetweet({
'username' : 'Usuarios',
'limit' : 1,
'html_before': '<ul>',
'html_tweets': '<li>{text}<br>{date}</li><br />',
'html_after': '</ul>'
});
// Final jQuery.LiveTweet
Depois no seu código css coloque o seguinte:
- Código:
ul.social-list li.social-list-twitter { background-image:url('link de sua imagem'); }
ul.social-list li.social-list-facebook { background-image:url('link de sua imagem'); }
ul.social-list li a, ul.social-list li span { display:block; font-weight:normal; }
ul.social-list li a { color:#74c676; }
ul.social-list li a:hover { color:#B5B5B5; }
#about .right { width:280px; height:auto; float:left; margin:15px 0px 0px 55px; }
#about .right p { float:left; }
#about .right span { float:right; width:55%; line-height:18px;}
#about .right span a { text-decoration:none; }
#about .right span a:hover { color:#74c676; text-decoration:none; }
.input-box {
float:left;
width:auto;
height:25px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
background-color:#74c676;
background-repeat:repeat;
background-position:left top;
color:#FFFFFF;
padding:0px 10px 0px 10px;
margin-bottom:22px;
}
Se quiser as imagens estará abaixo:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
