Esta es laversión2 del fanbox de twitter personalizado que utiliza JQuery y Css , mejorando su aspecto y funcioneshaciéndolomás fácilde instalar y más liviano, pueden ver un ejemplo de ello clic en
Result ▼
InstalaciónPaso 1) Añadir el Script Twitterdirigase a laopciónPlantilla -Editar HTML , realice lacombinaciónde teclas CTRL-F para abrir el buscador y escriba la etiqueta/head una vez encontrada justo arriba de ella pegue el siguientecódigojavascript.
eval(function(p,a,c,k,e,d){e=function(c){return(ca?'':e(parseInt(c/a)))+((c=c%a)35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\b'+e(c)+'\b','g'),k[c])}}return p}('(7(c){c.1b.10=7(l){l=c.2y({},c.1b.10.1J,l);z 21.3m(7(){9 f=[],h=-1,i=-1,e=c(21),g=Q,j=Q,k=Q,a=l,s=7(b){b.13?(f=b.13,0!=f.C&&(!a.2f||2f.C/a.N?f.Ca.N&&(f.C=a.N):(b=1G.2d(f.C/a.N),b=1G.2d(1G.3v()*b),f=f.3s(b*a.N,b*a.N+a.N)),a.2h&&(f=f.3j()),n(),g=c('D E="1H-13" L="'+(a.1x?"Z:"+a.1x+"Y":"")+'"/D'),k?g.2g(k):g.1W(e),a.U&&(j=c('D E="1H-U" L="'+(a.1A?"Z:"+a.1A+"Y":"")+'"/D').2g(g)),m(),a.1w&&a.1w())):a.1f&&e.R('b L="1e:1c"1Z:'+(b.W?b.W:"26")+"/b")},m=7(){g.R("");1l(9 b=0;bf.C;b++){9 d=f[b],o=a.1F&&d.T?d.T:"H://F.G/"+d.K,e=d.16+(d.12&&a.U?": "+d.12.1j:""),e=e.y(/"/g,"&38;").y(/'/g,"'");c('a L="'+(a.1v?"1o:2e;":"")+"P:"+a.18+'Y" I="'+o+'" 1n="'+e+'" O="M"1s 1p="'+d.1m+'" 1i="0" Z="'+a.18+'" P="'+a.18+'"/'+(a.2q?"i"+d.16+"/i":"")+"/a").3f(g)}h=a.1y?-1:c("a",g).C;p();i=-1;a.U&&q()},p=7(){h=a.1y?h+1:h-1;9 b=c("a:3R("+h+")",g);J(b.C){9 d={};d[a.1v]="17";b.1d(d,a.2A,"1a",p)}29!a.U&&a.11&&g.1d({19:1},a.2x,"1a",m)},q=7(){J(a.11||!(i=c("a",g).C-1))-1i?c("D",j).3B(a.1E,r):r()},r=7(){1l(9 b=Q,d=Q;!d;){i++;J(i=c("a",g).C){a.11&&m();z}b=f[i];d=b.12}9 o=a.1F&&b.T?b.T:"H://F.G/"+b.K,e=b.16;j.R('D L="1o:2e;"'+(a.1K?'a E="2B" I="'+o+'" 1n="'+e+'" O="M"1s 1p="'+b.1m+'" Z="'+a.1u+'" P="'+a.1u+'" 1i="0"//a':"")+'V E="31"'+(a.1U?'2sa I="'+o+'" 1n="'+e+'" O="M"'+b.K+"/a/2s":"")+'V E="2U"'+t(d.1j)+'/VV E="2O"'+(a.27?'a E="2K" I="H://F.G/'+b.K+"/12/"+d.2M+'" O="M"'+u(d.2L)+"/a":"")+"/V/V/D");b={};b[a.1R]="17";c("D",j).1d(b,a.1E,"1a",v)},v=7(){c("D",j).1d({19:1},a.1V,"1a",q)},t=7(b){z b.y(/\2S?\:\/\/\S+/1q,7(b){9 a="",b=b.y(/(\.*|\?*|\!*)$/,7(b,d){a=d;z""});z'a E="2R" I="'+b+'" O="M"'+(25b.C?b.2T(0,24)+"...":b)+"/a"+a}).y(/\B\@([A-2z-2k]{1,15})/1q,'@a E="2Q" I="H://F.G/$1" O="M"$1/a').y(/\B\#([A-2z-2k]+)/1q,'a E="2P" I="H://2l.F.G/2l?q=%23$1" O="M"#$1/a')},u=7(b){/^(\w\w\w) (\w\w\w) (\d\d?) (\d\d?:\d\d?:\d\d?) ([\+\-]\d+) (\d\d\d\d)$/i.2N(b)&&(b=b.y(/^(\w\w\w) (\w\w\w) (\d\d?) (\d\d?:\d\d?:\d\d?) ([\+\-]\d+) (\d\d\d\d)$/i,"$1, $3 $2 $6 $4 $5"));9 a=2r 1r,c=2r 1r;a.2V(1r.32(b));9 e=c.2u(),f=c.2b()+1,g=c.2p(),i=c.1Q(),h=c.1O(),c=c.1M(),j=a.2u(),k=a.2b()+1,l=a.2p(),m=a.1Q(),n=a.1O(),b=a.1M();J(l==g&&k==f&&j==e){a=i-m;J(0a)z a+" 33"+(1a?"s":"")+" 1k";h-=n;J(0h)z h+" 34"+(1h?"s":"")+" 1k";b=c-b;z b+" 30"+(1b?"s":"")+" 1k"}z"2W,2X,2Y,2Z,35,2C,2I,2D,2G,2F,2H,2J".2E(",")[k-1]+" "+j+", "+l},w=7(b){k=c('D E="1H-1z" L="'+(a.1C?"Z:"+a.1C+"Y":"")+'"/D').1W(e);n();J(b.K){9 d='a I="1Y" O="M" 3w="3F"1s 1p="1N" 1i="0" /2t1P/2t9i/i3G @2a/91X↑↑ 2i 3H 3I 3E 3D :)/1X/a';a.1D&&(d=a.1D);k.R(d.y(/1Y/g,"H://F.G/"+b.K).y(/3z/g,b.3y).y(/2i/g,b.3A).y(/1N/g,b.1m).y(/1P/g,b.16).y(/2a/g,b.K));a.1B&&a.1B()}29 a.1f&&k.R('b L="1e:1c"1Z:'+(b.W?b.W:"26")+"/b")},x=7(a){1l(9 a=a.3C(0).3K,d=0;da.C;d++){9 e=a[d];J(8==e.3Q&&e.28)z c.3S(e.28)}z""},n=7(){a.P&&e.1L("P",a.P+"Y");9 b=c(".F-3P",e);b.1j("3L 1S-1T.G/3N 36");b.2v("I","H://3M.1S-1T.3O.G/");b.17().1L("1o","3J")};(7(){9 b=e.2v("1h-3x");b||(b=x(e));J(b){0b.3g("{")&&(b="{"+b+"}");3h{a=3i("("+b+")")}3e(d){e.R('b L="1e:1c"3d W: '+d+"/b");z}a=c.2y({},c.1b.10.1J,a)}!a.X&&a.1f&&e.R('b L="1e:1c"37 X 3a 3b 3c!/b');a.1z&&c.2c({T:"H://1t.F.G/1/13/17.1g",1h:{K:a.X},2w:w,2m:"2n",2o:!0});c.2c({T:a.14?"H://1t.F.G/1/2j/14.1g":"H://1t.F.G/1/2j/3k.1g",1h:{K:a.X,3t:-1,3u:!1},2w:s,2m:"2n",2o:!0})})()})};c.1b.10.1J={1f:0,X:"",14:0,P:0,N:20,2f:0,2h:0,1x:0,1w:Q,11:0,1F:0,18:22,2q:1,1v:"19",2A:3r,2x:3q,1y:1,1z:1,1D:"",1C:0,1B:Q,U:0,1A:0,1K:1,1U:1,27:1,1u:22,1V:3l,1E:3n,1R:"19"}})(1I);1I(3o).3p(7(){1I("D.F-14").10()});',62,241,'|||||||function||var|||||||||||||||||||||||||replace|return|||length|div|class|twitter|com|http|href|if|screen_name|style|_blank|users_max|target|width|null|html||url|tweet|span|error|username|px|height|twitterFriends|loop|status|users|friends||name|show|user_image|opacity|linear|fn|red|animate|color|debug|json|data|border|text|ago|for|profile_image_url|title|display|src|gi|Date|img|api|tweet_image|user_animate|users_loaded|users_height|user_append|header|tweet_height|header_loaded|header_height|header_html|tweet_change|user_link|Math|tfw|jQuery|defaults|tweet_avatar|css|getSeconds|_ti_|getMinutes|_tn_|getHours|tweet_animate|javaface|elblogdelprogramador|tweet_author|tweet_stay|prependTo|dfn|_tp_|Error||this|48||||unkown|tweet_date|nodeValue|else|_ts_|getMonth|ajax|floor|none|users_random|insertAfter|users_reverse|_fo_|statuses|9_|search|dataType|jsonp|cache|getFullYear|user_name|new|strong|em|getDate|attr|success|user_swap|extend|Z0|user_change|avatar|Jun|Aug|split|Oct|Sep|Nov|Jul|Dec|date|created_at|id_str|test|meta|hashtag|at|link|bhttps|substr|content|setTime|Jan|Feb|Mar|Apr|second|body|parse|hour|minute|May|widget|Twitter|quot||was|not|set|Options|catch|appendTo|indexOf|try|eval|reverse|followers|5E3|each|200|document|ready|2E3|100|slice|cursor|include_entities|random|align|options|friends_count|_fr_|followers_count|fadeOut|get|unete|siguen|left|Sigueme|Personas|me|block|childNodes|by|www|add|blogspot|load|nodeType|eq|trim'.split('|'),0,{}))
Nota:deberátener instalado el plugin JQuery caso contrario no funcionara el Fanbox
Paso 2) Añadir el Css y el Divculminado el paso 1,realice lacombinaciónde teclas CTRL-F y busque/b:skin justo arriba pegue el siguiente codigo css.
Mostrar Codigo div.tfw-header {
overflow:hidden;
padding:4px;
background-color: #f8fdff;
font-family: lucida, tahoma, helvetica, arial, sans-serif !important;
color: #020300;
font: italic 21px Georgia;
border:#DDEEF6 1px solid;
border-bottom:none;
}
div.tfw-header a {
display:block;
outline:none;
text-decoration:none;
}
div.tfw-header a:hover {
color:#eee;
}
div.tfw-header a img {
border:#666 1px solid;
float:left;
margin:0 8px 4px 0;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px #888;
box-shadow: 0 0 5px #888;
/*EFECTO ZOOM*/
-webkit-transition: All 0.6863s ease;
-moz-transition: All 0.6863s ease;
-o-transition: All 0.6863s ease;
-webkit-transform: rotate(0deg) scale(1) skew(180deg) translate(0px);
-moz-transform: rotate(0deg) scale(1) skew(180deg) translate(0px);
-o-transform: rotate(0deg) scale(1) skew(180deg) translate(0px);
}
div.tfw-header a:hover img {
border:#333 1px solid;
-moz-box-shadow: 0 0 5px #666;
-webkit-box-shadow: 0 0 5px #666;
box-shadow: 0 0 5px #666;
/*EFECTO ZOOM*/
-webkit-transform: rotate(0deg) scale(1.200) skew(180deg) translate(0px);
-moz-transform: rotate(0deg) scale(1.200) skew(180deg) translate(0px);
-o-transform: rotate(0deg) scale(1.200) skew(180deg) translate(0px);
}
div.tfw-header a em {
display:block;
line-height:24px;
color: #020300;
font: italic 21px Georgia;
margin:0;
padding:0;
text-align:left;
text-decoration:none;
}
div.tfw-header a:hover em {
text-shadow:1px 1px 1px #000;
}
div.tfw-header a var {
display:-moz-inline-stack;
display:inline-block;
vertical-align:top;
*display:inline;
margin:2px 0;
line-height: 18px;
height: 18px;
position:relative;
background-color:#efefef;
background-image:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#dedede));
background-image:-moz-linear-gradient(top, #fff, #dedede);
background-image:-o-linear-gradient(top, #fff, #dedede);
background-image:-ms-linear-gradient(top, #fff, #dedede);
background-image:linear-gradient(top, #fff, #dedede);
border:#ccc solid 1px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
color:#333;
overflow:hidden;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
font:normal normal bold 11px/18px'Helvetica Neue', Arial, sans-serif;
padding:0 3px 0 20px;
-webkit-box-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.1);
box-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.1);
}
div.tfw-header a:hover var {
border-color:#bbb;
background-color:#f8f8f8;
background-image:-webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#d9d9d9));
background-image:-moz-linear-gradient(top, #f8f8f8, #d9d9d9);
background-image:-o-linear-gradient(top, #f8f8f8, #d9d9d9);
background-image:-ms-linear-gradient(top, #f8f8f8, #d9d9d9);
background-image:linear-gradient(top, #f8f8f8, #d9d9d9);
-webkit-box-shadow:0 3px 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
}
div.tfw-header a var i {
position:absolute;
top:50%;
left:2px;
margin-top:-6px;
width:16px;
height:12px;
background:transparent url(http://twitter-friends-widget.googlecode.com/svn/v2/twitter.png) 0 0 no-repeat;
}
div.tfw-header a dfn {
display:block;
margin:0;
padding:0;
font-weight:lighter;
text-align:right;
font-style:normal;
font-size:14px;
line-height:14px;
color: #000000;
cursor: default;
border:none;
}
/*---- users div ----*/
div.tfw-users {
overflow:hidden;
padding:4px 0 0 4px;
font-family: lucida, tahoma, helvetica, arial, sans-serif !important;
font-size:14px;
display:-moz-inline-stack;
display:block;
}
/* ul list of users */
div.tfw-users a {
display:block;
float:left;
overflow:hidden;
text-decoration:none;
outline:none;
margin:0 4px 4px 0;
font-size:14px;
}
div.tfw-users a:hover {
}
div.tfw-users a img {
width:100%;
height:auto;
padding: 4px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .7);
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, .7);
box-shadow: 0 0 3px rgba(0, 0, 0, .7);
}
div.tfw-users a:hover img {
-moz-transform: scale(1.2) rotate(-350deg);
-webkit-transform: scale(1.2) rotate(-350deg);
-o-transform: scale(1.2) rotate(-350deg);
-ms-transform: scale(1.2) rotate(-350deg);
transform: scale(1.2) rotate(-350deg);
-webkit-box-shadow: 0 0 20px rgba(255, 0, 0, .4), inset 0 0 20px rgba(255, 255, 255, 1);
-moz-box-shadow: 0 0 20px rgba(255, 0, 0, .4), inset 0 0 20px rgba(255, 255, 255, 1);
box-shadow: 0 0 20px rgba(255, 0, 0, .4), inset 0 0 20px rgba(255, 255, 255, 1);
}
div.tfw-users a i {
display:block;
white-space:nowrap;
overflow:hidden;
height:16px;
line-height:16px;
font-style:normal;
color:#000000;
font-size:11px;
padding:0 2px;
}
/*---- tweet div ----*/
div.tfw-tweet {
overflow:hidden;
position:relative;
background-color:#F2FBFF;
padding:4px;
border:#DDEEF6 1px solid;
border-top:none;
font-family: lucida, tahoma, helvetica, arial, sans-serif !important;
font-size:11px;
}
/* tweet author avatar */
div.tfw-tweet .avatar {
display:block;
width:48px;
height:48px;
margin:0 4px 4px 0;
float:left;
overflow:hidden;
}
/* author name */
div.tfw-tweet strong a {
margin-right:5px;
}
/* tweet body */
div.tfw-tweet .body {
display:block;
margin-left:55px;
}
/* tweet content */
div.tfw-tweet .content {
}
/* tweet date and source */
div.tfw-tweet .meta {
color:#999999;
display:block;
font-size:10px;
margin:3px 0 0;
}
div.tfw-tweet .meta a {
color:#999999;
text-decoration:none;
}
div.tfw-tweet .meta a:hover {
text-decoration:underline;
}
div.twitter-load {
display:none;
text-decoration:none;
outline:none;
padding:4px;
border:#DDEEF6 1px solid;
border-top:none;
text-align:right;
font: italic 16px Georgia;
color:#fdfffb;
background-color:#0c80e2;
border-radius: 0px 0px 4px 4px;
cursor:pointer;
}
div.twitter-load:hover {
color:#000000;
}
Guarde los cambios y dirigase a
Diseño- click en añadir un gadget - y escojaopción
HTML/JavaScript y pegue el siguientecódigo.
div class="twitter-friends" data-options="{username:'JavaFaceBlogPro', width:448,height:300 }"
div class="twitter-load"
/div
/div
Parámetrosusername: tu nombre de usuario
width: ancho
height: alto
Guarda los cambios y listo ,si presentaalgúnproblema por favor avisarme :) , unarecomendaciónsi utilizan varioscódigosJQuery puede que surja un conflicto con el fanbox y este no presente nada no funcione.
