Brielle
Brielle
2015. Sze 14

A Twitter dobozka alapvető kelléke lehet egy rajongói oldalnak, hiszen ennek a segítségével a látogatóid könnyebben elérhetik kedvencük legutóbbi üzeneteit a híres mini blogon. Ez a leírás már egy régebbi verzióban jelen volt az oldalon, csupán már eléggé elavult maga a kód, így mindenképpen szerettem volna újra megírni, ezúttal kijavítva, működőképesen.

Ez a leírás most segítségedre lesz saját Twitter dobozka elhelyezésében, ráadásul néhány nagyon egyszerű megformálási kódot is megosztok veled, mellyel könnyedén személyre szabhatod a dobozt designhoz illeszkedően.


Először is, a doboz elkészítéséhez szükséged lesz egy saját Twitter fiókra. Ez azért fontos, mert a legjobb Twitter dobozt magáról az oldalról tudod elkészíteni. Ha már rendelkezel felhasználóval, akkor lépj a Beállítások menübe, majd ott az oldalsó sávban keresd ki a Modulok opciót.

Ha ez megvan, akkor kattints az Új hozzáadására, ugyanis itt kell létrehoznunk a Twitter dobozkánkat.

Mivel minden magyarul van, így teljesen egyértelmű lesz, hogy mit kell megadnunk. Legfontosabb, hogy ha nem szeretnéd, hogy a tweetekbe ágyazott képek megjelenjenek, akkor ki kell venni a pipát az Automatikus méretű fényképek mellől. Szerintem így sokkal rendezettebb, és áttekinthetőbb lesz a dobozka.

Semmi mást nem fontos megadnod, mivel mivel  többi dolgot kóddal fogjuk megformálni. A következő lépés a dobozka alatt megjelenő kód kimásolása lesz.

Itt pedig láthatod, hogy a kódod tartalmazza a következő, hivatkozásos részt:

<a class="twitter-timeline" width="300" height="500"
href="https://twitter.com/twitterapi" data-widget-id="YOUR-WIDGET-ID-HERE">
Tweets by @twitterapi</a>

A kódban történő változtatásokat az ‘a’ tag utáni részbe kell majd beillesztened. Minimum 180 pixel széles, és maximum 520 pixel széles lehet a dobozod, a minimum magasság pedig 200 pixel.

  • Téma: ez lehet világos, vagy sötét (light, dark) csak ez a két beállítás van. Ezt így adhatod meg: data-theme="dark"
  • Link szín: ezt is be lehetett állítani az alap beállításokban, de itt is be tudod: data-link-color="#cc0000" – csupán a színkódot kell megváltoztatnod.
  • Szélesség: pixelben tudod megadni: width="300"
  • Magasság: ezt is pixelben tudod megadni: height="250"
  • Chrome: néhány dolgot csak a Chrome böngészőben tudsz beállítani (a többi böngészőben elvileg hasztalan a kód): data-chrome="nofooter transparent" A következőket tudod beilleszteni a kódba:
    • noheader: eltűnteti a doboz fejlécét (amiben a follow felirat van)
    • nofooter: eltűnteti a láblécet (amiben a tweet hozzáadása van)
    • noborders: eltűnteti a keretet
    • noscrollbar: eltűnteti a görgetősávot (de enélkül is tudsz görgetni)
    • transparent: átlátszóvá válik a háttér
  • Keretszín: be tudod állítani a keret színt is ezzel a kóddal: border-color="#cc0000"
  • Tweet limit: limitálni tudod a megjelenő tweetek számát (ha ezt nem írod be, akármennyit be tudsz tölteni) data-tweet-limit="5" – ez egy 1 és 20 közötti szám lehet

Ennyi lenne a kódos beállítás. Ha pedig saját hátteret szeretnél a dobozodnak, akkor elég, ha az egész kódot egy táblázatba illeszted, aminek hátteret is beállítasz.

Saját Twitter dobozka kódom:

<a class="twitter-timeline" width="250" height="300" data-chrome="nofooter noborder noheader noscrollbar transparent" href="https://twitter.com/cherryuniverses" data-widget-id="464403902398353409">@cherryuniverses Tweetjei</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>


Komment részleg
2017/06/23 11:46

Ezt a kódot olyan régóta kerestem már :) Köszönöm!!

Kérdésed van? Írj bátran!









Hozzászólásod csak jóváhagyás után fog megjelenni.

Ellenőrző kód *