Twitter bejegyzések betöltése


Adatok betöltése Twitterről, jQuery, JavaScript Plugin segítésgévelBiztos láttál már olyat, hogy egy-egy weboldalon megjelennek az adott Twitter felhasználó csiripelései.

Több megoldása lehet ezeknek a bejegyzéseknek a lekérésére, most  javaScript, jQuery alapú megközelítést mutatom be.



JavaScripttel betöltött Twittek-ről

Amellett hogy jó hogy látják az aktivitásodat, teljesen értelmetlen a dolog, kizárólag Humanoid felhasználóknak szolgál némi plusz információval rólad. Tehát ha az a célod, hogy esetleg kövessenek, vagy némi plusz információval lásd el az látogatóidat akkor jó, SEO szempontból egyenlőre értékelhetetlen a dolog.

A félreértések elkerülése végett: A Twitternek SEO szempontból nagy jelentősége van, de a cikk JavaScripttel betöltött és előállított tartalmat hoz létre, amit a robotok még nem igazán látnak. @zsgyuris köszi!

 

Twitter csiripelések betöltése jQuery plugin segítségével, kliens oldalon JavaScript segítégével.

Aggályaim az ilyen kéretlen betöltésekkel kapcsolatban:

Gondolom Te sem szereted, ha kéretlenül letöltetnek veled akármit, anélkül hogy megkérdeznének róla. Ennél a megoldásnál konkrétan a látogató tölti be magának a twitteket, ha kell neki ha nem :-)

De félre ezeket a dolgokat és jöjjön a lényeg! Ha lepillantasz az oldalsáv aljára láthatod milyen jól vizsgázott a böngésződ, és valami ilyesmit fogsz látni az oldaladon, ha követed a leírást.

Van egy nagyszerű jQuery plugin (GitHub), ami néhány paraméter megadás mellet betölti a twitteket, avatárokat és minden egyib információt ami a megjelenítéshez kell. A fenti oldalon jó kis példákat is találsz a megjelenítési módokra, sőt a megadható paraméterekre is.

Mit kell tenned hogy működjön

1, töltsd be a javascript-et plugint, de előtte legyen a jQuery is betöltve

  1. <script type="text/javascript" src="http://arth2o.com/javascript/jquery/jquery.tweet.js"></script>

2, Helyezz el egy jelet a HTML forrásba ahová betöltöd az adatokat

  1. <div id="arth2o-twitter"></div>

3, izzíts rá a pluginre (cseréld ki a felhasználónevedre, állítsd be a limitet 7). Egy észrevétel a CSS-el kapcsolatban: overflow: auto; Chrome-ban érdekesen néz ki.

  1. $("#arth2o-twitter").tweet({
  2. avatar_size: 32,
  3. count: 7,
  4. username: "arth2o",
  5. loading_text: "loading list..."
  6. });

4, formázd kedvedre CSS-el

  1. .tweet, .query {
  2. font-family: Georgia, serif;
  3. font-size: 120%;
  4. color: #085258; }
  5. .tweet .tweet_list, .query .tweet_list {
  6. -webkit-border-radius: .5em;
  7. list-style-type: none;
  8. margin: 0;
  9. padding: 0;
  10. background-color: #8ADEE2; }
  11. .tweet .tweet_list .awesome, .tweet .tweet_list .epic, .query .tweet_list .awesome, .query .tweet_list .epic {
  12. text-transform: uppercase; }
  13. .tweet .tweet_list li, .query .tweet_list li {
  14. overflow-y: auto;
  15. overflow-x: hidden;
  16. padding: .5em; }
  17. .tweet .tweet_list li a, .query .tweet_list li a {
  18. color: #0C717A; }
  19. .tweet .tweet_list .tweet_even, .query .tweet_list .tweet_even {
  20. background-color: #91E5E7; }
  21. .tweet .tweet_list .tweet_avatar, .query .tweet_list .tweet_avatar {
  22. padding-right: .5em;
  23. float: left; }
  24. .tweet .tweet_list .tweet_avatar img, .query .tweet_list .tweet_avatar img {
  25. vertical-align: middle; }

Ha ez a formázás nem kielégítő nézd meg FireBug-gal mit pakol be adott elemekhez.A bejegyzésben leírtaknál jóval többet tud a JS plugin, olvass tovább a hivatalos oldalakon.

 

 


Twitter, jQuery twitter, jquery, javascript








Hozzászólás beküldése:


http://domain.tld (nofollow) 
 ___  ____   ____  _____  __    _____ 
/ __)( ___) (_  _)(  _  )(  )  (  _  )
\__ \ )__) .-_)(   )(_)(  )(__  )(_)( 
(___/(____)\____) (_____)(____)(_____)



 
 
 
 
Powered By: PHP, Smarty, MySQL, CodeIgniter, jQuery, ArtH2O