Creați un widget personalizat pentru Twitter fără un plugin

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!