Adaugarea unui feed Twitter pe portal

Scris de Luky la data de Mar 24 Noi 2009, 9:32 pm

Feed Twitter pe portal

Adaugarea unui feed twitter pe site-ul dumneavoastra.
Nu necesita editarea template-urilor!
Acesta este un cod global, care poate fi folosit in: portal, widget-urile forumului, mesajul paginii de start sau o pagina html

Rezultatul:

Lucruri de care ati putea sa aveti nevoie:

Un mic icon twitter daca doriti sa il schimbati pe cel de origine(default)
Un portal activ (am ales portalul pentru ca feed-urile arate cel mai bine pe portal)
Motivare si 15 minute

Pregatirea portalului

As sugera postarea acestui feed in coloana de pe centru, sau in modulele de sus sau de jos. Feed-ul va arata cel mai bine daca este adaugat in acele zone.
Intrati in Panou de Administrare-> Module -> Portal & Widget-uri -> Configurarea portalului -> Structura
Mergeti in josul paginii si dati click pe butonul "Creati un widget personalizat".

Adaugarea codului

Dupa ce ati dat click pe "Creati un widget personalizat", la nume adaugati "feed twitter" pentru a il gasi mai rapid.
Selectati "Da" pentru a utiliza un tablou standard (asta in cazul in care nu doriti sa personalizati si tabloul)
Nu este nevoie de titlu, daca nu vreti sa adaugati unul.

In campul "Sursa widget" copiati acest cod:

Cod:: <div class="twitterfeed"><div id="twitter_div" style="margin-left: 35px; padding-top: 3px;"><ul id="twitter_update_list" style=" list-style-image : url(http://hitskin.com/themes/13/34/38/i_icon_minipost_participate.png); font-size: 12px; line-height: 15px;"><li style="padding-top: 3px; padding-left 20px;"> </li></ul></div><p align="right" style="margin-top: 2px; font-size: 11px;">recently twittered on <a href="twitter.com/forumotion">Forumotion</a></div><script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script><script type="text/javascript" src="http://twitter.com/statuses/user_timeline/forumotion.json?callback=twitterCallback2&count=1"></script>

Sa va explic despre ce este vorba in acest cod:
<div class="twitterfeed"> - aceasta este o clasa aditionala speciala pe care am adaugat-o eu ca sa mentina feed-ul aliniat. Daca doriti sa modificati feed-ul twitter veti face asta in aceasta clasa.

<div id="twitter_div ...> - acesta este codul definit pentru javascript, nu il modificati in niciun fel. Singurele elemente care le puteti schimba daca doriti in acest div sunt stilul (style=""; )

<ul id="twitter ...> - aceasta este o lista care este necesara pentru javascript. Singurul lucru care il puteti modifica este link-ul catre imagine. Acesta este un mini icon (cutia albastra din exemplul meu), un punct. Puteti sa schimbati punctul daca doriti.

Restul codului nu trebuie modificat.. dar cand vedeti partea aceasta:
recently twittered on <a href="twitter.com/forumotion">Forumotion</a> - asigurati-va ca schimbati "forumotion" din link cu numele contului dumneavoastra de pe twitter si "Forumotion" cu numele forumului.

Ultima parte si cea mai importanta este feed-ul insusi.

Cod:: <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script><script type="text/javascript" src="http://twitter.com/statuses/user_timeline/forumotion.json?callback=twitterCallback2&count=1"></script>

Sunt 2 lucruri care trebuie sa le modificati aici.
1) - statuses/user_timeline/numele contului dvs de pe twitter.json?
* - schimbati numele din forumotion cu numele contului dvs de pe twitter. Asigurati-va ca pastrati .json dupa nume

2) - twitterCallback2&count=1
* - codul meu afiseaza doar ultimul tweet. Daca doriti ultimele 2 sau 3 va trebui sa schimbati "count" cu numarul de tweet-uri dorit de dumneavoastra. (Nu depasiti 5 insa pentru ca nu se va vedea frumos)

Dupa ce ati terminat de modificat - Salvati si adaugati noul widget in portal (Este recomandat sa il adaugati in coloana din centru/sus/jos)

Adaugari in CSS

Puteti sa il lasati si asa dar ar fi mai frumos daca adaugati si cateva clase CSS.
Intrati in Panou de Administrare -> Afisare -> Culori -> sectiunea "Foaie de stil CSS"

Tot ce aveti de facut este sa copiati urmatoarele clase

Cod:: #twitter_div a:link{ color: #fff; } #twitter_div a:hover{ color: #03a5b4; } #twitter_div{ color: #006383; }.twitterfeed{ margin: 0 auto; width: 700px; height: 40px; background-image: url(http://i33.tinypic.com/14kblfo.png); /* desired twitter image */ background-repeat: no-repeat; }

Pentru a modifica blocul twitter folositi clasa #twitterfeed .
Puteti sa ii modificati latimea, inaltimea si icon-ul.
#twitter_div a:link si a:hover sunt culorile pentru link-urile twitter si cele mai recente twitter-uri pentru a modifica culoarea in functie de culoarea de fundal a forumului dumneavoastra.

Tutorial Scris de Jalokim , multumiri speciale autorului original al blogger.js

Reproducerea acestui tutorial nu este posibila fara acordul nostru, in conformitate cu articolul L122-1 apartinand ICC.