Mi s-a cerut de câteva ori despre ce plugin WordPress folosesc pentru a genera lista „Flux Twitter” din subsolul site-ului meu. De fapt, nu folosesc deloc un plugin, este o bucată de Javascript de la Twitter care afișează o listă a celor mai recente tweet-uri ale mele, pe care le-am stilizat cu CSS. În acest tutorial, vă voi arăta:
- Codul HTML și Javascript necesar pentru a prelua cele mai recente tweet-uri
- O prezentare generală a marcajului HTML și a selectorilor CSS asociați
- Două exemple de widget-uri Twitter personalizate pe care le-am folosit eu însumi
Citiți mai departe pentru a vedea restul tutorialului…
HTML-ul și Javascript-ul
Twitter oferea acest cod pe site-ul lor, dar din motive necunoscute l-au eliminat în favoarea acestor widgeturi mult mai puțin flexibile. Veți avea nevoie de două bucăți de cod.
Mai întâi, plasați următorul cod acolo unde doriți să apară lista:
<ul id="twitter_update_list"><li>Twitter feed loading</li></ul>Notă: <li>Twitter feed loading</li> nu face parte din codul original furnizat de Twitter, dar este necesar pentru ca HTML-ul să fie valid. De asemenea, poate oferi un mesaj util în timp ce fluxul se încarcă, deoarece poate dura câteva secunde într-o zi lentă.
În al doilea rând, va trebui să plasați următoarele linii de Javascript cât mai aproape posibil de tag-ul </body>.
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/USERNAME.json?callback=twitterCallback2&count=3"></script>În prezent, îl am chiar deasupra codului Google Analytics. Ar trebui să păstrați aceste linii de Javascript cât mai jos posibil pe pagină, deoarece în cazul în care Twitter nu se încarcă, tot ce este sub acel cod va rămâne blocat (ceea ce nu este o problemă mare dacă este deja în partea de jos).
Prezentare generală a marcajelor HTML și a selectorilor CSS
Acum nu puteți vedea marcajul HTML pe care îl generează widgetul Twitter fără a folosi ceva de genul Web Developer Toolbar. Din fericire pentru dvs., am făcut-o eu. Iată o listă de exemplu cu un singur tweet ca exemplu.
<ul id="twitter_update_list">
<li><span>RT @<a href="http://twitter.com/Screenr">Screenr</a>: Cool Screenr update: Now your screencasts publish twice as fast. <a href="http://screenr.com/aDp">http://screenr.com/aDp</a></span> <a style="font-size: 85%;" href="http://twitter.com/themelab/statuses/14229492866">46 minutes ago</a></li>
</ul>#twitter_update_list– Selectează întreaga listă#twitter_update_list li– Selectează elementele individuale ale listei#twitter_update_list li span– Selectează partea „tweet” a elementului listei, nu linkul „acum X minute”#twitter_update_list li span a– Selectează linkul din partea „tweet” a elementului listei#twitter_update_list a[style="font-size: 85%;"]– Selectează linkul „acum X minute”, într-un mod oarecum hacky (vezi nota de mai jos).
Notă: Deoarece există un stil inline în linkul „acum X minute” care setează dimensiunea fontului la 85%, este destul de dificil de suprascris fără un cod hacky. Am folosit acest lucru înainte pentru a reseta dimensiunea fontului la aceeași ca restul listei:
#twitter_update_list a[style="font-size: 85%;"] { font-size: 1em !important; }Probabil că acest lucru nu funcționează în versiunile timpurii ale IE din cauza părții „!important”. Puteți folosi, de asemenea, display: block; pentru a muta acel link pe linia următoare.
Exemplu live
Pentru un exemplu live, verificați subsolul site-ului Theme Lab. Sau dacă citiți acest lucru în cititorul dvs. de feed sau pe un site neautorizat de scraping, verificați captura de ecran de mai jos.
Iată codul pe care îl folosesc pentru listă:
#twitter_update_list {
font-size: 13px;
line-height: 21px;
list-style: none;
}
#twitter_update_list li {
background: url('images/twitter-divider.gif') bottom left repeat-x;
padding-bottom: 7px;
margin-bottom: 9px;
}
#twitter_update_list span, #twitter_update_list span a {
color: #ababab;
text-decoration: none;
}
#twitter_update_list a {
color: #6f7276;
}- Prima linie selectează întreaga listă. Setează dimensiunea fontului, înălțimea liniei și se asigură că nu apar puncte de marcaj.
- A doua linie face ca o imagine mică de 2x1 să se repete sub fiecare element al listei, ca un fel de separator. Padding-ul setează spațiul dintre tweet și marginea superioară a separatorului. Margin-ul setează spațiul dintre marginea inferioară a separatorului și următorul tweet.
- A treia linie setează culoarea tweet-ului, inclusiv linkurile, și se asigură că nu apar linii sub linkuri.
- Ultima linie setează culoarea linkului „acum X minute”.
Și asta e tot! Dacă ar fi să schimb ceva, aș diferenția cumva linkurile din tweet și poate aș adăuga efecte de hover pe linkuri.
Acesta Poate Fi Folosit Pe Orice Site
Spre deosebire de toate celelalte postări de tip cum să faci XYZ fără un plugin, în acest tutorial nu se folosește niciun cod WordPress real.
Deoarece nu folosește niciun cod WordPress, nu este inclus în colecția Tutoriale WordPress. Poate fi folosit pe aproape orice tip de site, presupunând că puteți edita sursa HTML și CSS.
Dacă doriți să îl utilizați în WordPress, aș sugera editarea manuală a fișierelor temei pentru a insera cele două linii de Javascript în subsolul site-ului dvs. sau chiar conectarea acestuia la hook-ul dvs. wp_footer().
Cât despre widgetul în sine, puteți fie să lipiți codul într-un widget de text, fie să îl codificați manual în bara laterală (sau oriunde).
Concluzie
Sper că v-a plăcut tutorialul, mi-ar plăcea să aud părerile voastre în comentarii. Dacă aveți solicitări pentru sfaturi rapide de WordPress sau CSS, nu ezitați să mă anunțați. Ar putea fi prezentat într-o viitoare postare Tutorial Tuesday la Theme Lab!
Tutorial genial. Mulțumesc.
Poți să-mi spui cum să fac ca linkul „acum X minute” să fie în colțul din dreapta jos, departe de text, așa cum ai pe site-ul tău.
Mulțumesc mult
Dacă există cineva interesat de traducerea în alte limbi a linkului „acum X timp”, vă spun că tocmai am descărcat blogger.js, l-am modificat și funcționează.
Trebuie doar să traduci legendele, nu te juca cu codul, iată un exemplu.
if (delta < 60) { return 'acum mai puțin de un minut'; } else if(delta < 120) { return 'acum aproximativ un minut'; } else if(delta < (60*60)) { return 'acum ' + (parseInt(delta / 60)).toString() + ' minute'; } else if(delta < (120*60)) { return 'acum aproximativ o oră'; } else if(delta < (24*60*60)) { return 'acum ' + (parseInt(delta / 3600)).toString() + ' ore'; } else if(delta < (48*60*60)) { return 'acum o zi'; } else { return 'acum ' + (parseInt(delta / 86400)).toString() + ' zile'; }
Apropo, mulțumesc mult pentru tutorial, m-a ajutat enorm.
Salut Leland,
Mulțumesc pentru scriptul tău! Aproape l-am făcut să funcționeze cum vreau... Există vreo șansă să repar dimensiunea listei? Vreau să generez lista într-o celulă, dar când tweet-urile depășesc celula, celula explodează!
Fantastic, dar nu obțin un rezultat (.js începător). Site-ul meu (callumflack.com) afișează doar „twitter feed loading” fără să preia efectiv feed-ul de pe Twitter. Am verificat totul în acest post, dar fără succes. Ce am ratat? Ajutorul tău este foarte apreciat.
mulțumesc pentru asta 🙂 poți schimba linkurile din tweet-uri folosind '#twitter_update list span', apoi timpul tweet-urilor folosind '#twitter_update list span a'. de asemenea, folosind last-child se elimină linia orizontală de sub ultimul tweet. vezi mai jos codul meu.
#twitter_update_list { font-size: 10px; line-height: 15px; list-style: none; }
#twitter_update_list li { background: url(‘images/1px-grey.gif’) bottom left repeat-x; padding-bottom: 10px; margin-bottom: 10px; }
#twitter_update_list li:last-child { background: none; }
#twitter_update_list span { color: #856f6a; text-decoration: none; display: inline; }
#twitter_update_list span a { color: #fb3898; display: inline; }
#twitter_update_list a { color: #b3a39f; display: block; }
Nu-ți face griji, am rezolvat. Este asta:
http://api.twitter.com/1/favorites.json?screen_name=USERNAME&callback=twitterCallback2&count=5
Mulțumesc pentru asta. Pentru cei care au întrebat…
Puteți schimba acest lucru într-o listă schimbând prima parte a URL-ului din al doilea script de la:
http://twitter.com/statuses/user_timeline/USERNAME.json?
la
http://api.twitter.com/1/USERNAME/lists/LISTNAME/statuses.json?
Salut,
Tutorial bun. Totuși, site-ul meu a început să afișeze 3 tweet-uri, acum este foarte sporadic și uneori decide să afișeze 2 sau 1.
Sunt prost aici?
Rob
Aceasta este o întrebare bună. Am observat că atunci când retweetezi (ca în retweet-ul stil oficial Twitter) ceva, acesta nu apare și, în schimb, arată doar cu un tweet mai puțin.
Detest modul în care arată fluxurile oficiale Twitter, așa că m-am bucurat să găsesc site-ul dvs. Tutorialul a fost foarte informativ și ușor de urmărit și abia aștept să-l încorporez în redesign-ul site-ului meu.
Articol grozav.
A trebuit doar să modific & top & pentru ca HTML-ul să fie validat.
Lucrare bună!
Știu că acest lucru a fost postat acum ceva timp, dar există o modalitate de a separa cel mai recent tweet de tweet-urile anterioare, astfel încât să puteți pune o etichetă pe ele, cum ar fi „Cel mai recent tweet” și „Tweet-uri mai vechi”?
Îmi place asta! Există o modalitate de a forța linkurile din fiecare tweet să se deschidă într-o fereastră nouă?
Nu sunt sigur unde merge fiecare bucată de cod în site-ul meu wp – puteți confirma…
1 bucată – unde vreau fluxul (de ex. widget text)?
2 bucată – fișier de stil?
3 bucată – ?
4 bucată – ?
5 bucată – ?
Mulțumesc anticipat
Mă simt prost… Dar… Unde scrii numele de utilizator??? Nu înțeleg… Dacă copiez/lipesc nu funcționează…
Acesta este un widget mic și cool. O notă – dacă ați adăugat un „position: relative;” la elementul HTML care are „overflow: auto;” pe el, veți remedia un bug care apărea în IE7 (practic, caseta de derulare nu funcționa).
Tutorial foarte bun, singura problemă cu acesta este (dacă nu am făcut eu ceva greșit), arată doar tweet-urile tale personale, nu, de exemplu, dacă retweetezi ceva. Ceea ce este păcat :/
Doar schimbați
count=3încount=6în fragmentul Javascript.Salut,
Cred că dacă schimbi Javascript-ul pentru a include „&include_rts=1” chiar după numele tău de utilizator, de exemplu: http://api.twitter.com/1/statuses/user_timeline.json?screen_name=thelibzter&include_rts=1&callback=twitterCallback2&count=6.
Iată o postare pe care am scris-o despre cum să incluzi retweet-urile în fluxul personalizat Twitter – http://icode4you.net/including-retweets-in-your-custom-twitter-feeds.
Salut,
Mulțumesc pentru partajarea și munca ta grozavă. Folosesc metoda ta de Twitter pe pagina mea de start și îmi place.
Momentan, afișează 3 tweet-uri. Pot să dublez la 6?
Mulțumesc anticipat!
Salutări
Xavier
Mulțumesc pentru asta, este EXACT ce am nevoie pentru site-ul meu — a funcționat perfect!
există o modalitate de a folosi acest cod cu mai multe feed-uri de Twitter? să spunem că aș vrea să pun feed-ul altcuiva direct sub primul pe aceeași pagină, cum aș proceda?
mulțumesc.
Aceasta este o întrebare foarte bună, dar nu sunt sigur dacă este posibilă cu această metodă, deoarece fluxul este legat direct de un singur nume de utilizator.
Am impresia că dacă ați adăuga mai multe linii de
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/USERNAME.json?callback=twitterCallback2&count=3"></script>cu nume de utilizator diferite, s-ar confunda cumva.Tutorial grozav. Căutam exact așa ceva.
O întrebare, este posibil cu acest cod să schimbi fluxul de la un utilizator specific la o listă Twitter specifică?
Bună întrebare, deși din câte știu acest cod funcționează doar cu utilizatori specifici.
Tutorial cu adevărat excelent, în special "hack-ul" "acum X timp". Mulțumesc mult pentru postare!
exact ce am nevoie pentru redesign-ul meu. mulțumesc pentru asta.
Mulțumesc mult pentru acest sfat simplu! A funcționat pe un site care a dezactivat javascript din motive necunoscute. Nu afișează grafice, dar funcționează! Și linkurile (cum ar fi twitpic & bit.ly) funcționează și ele!
Treabă grozavă, prietene!
Fantastic de util, mulțumesc. Interesant că http://twitter.com/javascripts/blogger.js și altele similare sunt încă acolo, fără legături evidente de pe twitter.com.
Ei bine, sperăm că îl vor menține suportat pentru scopuri moștenite pentru o perioadă de timp, mulți oameni îl folosesc încă.
Nu știu de ce Twitter a eliminat aceste widget-uri de pe site-ul lor, dar înainte când le foloseam pe site-ul meu Blogger, funcționau foarte bine.
Cred că le-au eliminat în favoarea widget-urilor lor mai "branduite", deși codul pe care îl aveau înainte (același cod pe care îl folosesc eu) încă funcționează.