Twitter-widget met lay-out zoals jij ‘m wilt!

In november 2012 schreef ik over de niet-vlekkeloos werkende Twitter-widget. Als alternatieven schotelde ik Sea of Clouds en Juitter voor. De tijd noopt tot een nieuw artikel over dit onderwerp: Twitter wil namelijk authenticatie van gebruikers toepassen en dat heeft flinke gevolgen.

Door wijziging in het beleid van Twitter stoppen veel Twitter-widgets ergens in 2013 met werken. Zoals Sea of Clouds aangeeft: “Twitter’s decision to discontinue their unauthenticated v1.0 API means that this widget will stop working at some time in 2013.” De site van Juitter is helemaal niet meer te bereiken.

Goed, Twitter wil dus dat straks alleen de eigen Twitter-API nog op websites wordt gebruikt. Misschien is het niet zo gek: je kunt nu de tijdlijn van wie je maar wilt op een website tonen. Dat is straks verleden tijd, je hebt daarvoor een authentificatiecode nodig. Als gebruiker heb je daardoor enige controle over wie jouw tijdlijn kan tonen.

Hmm, het uiterlijk van Twitters’ eigen widget vind ik niks

Het probleem dat de tweets via de widget van Twitter zelf niet in iedere browser verschenen, lijkt gelukkig te zijn opgelost. Nu het volgende probleem: hoe pas je de lay-out van de widget aan? Dat is natuurlijk belangrijk als je op deze widget bent aangewezen.

Natuurlijk kun je bij het aanmaken van het te plakken script een paar basisinstellingen kiezen. Mooi, maar wat nu als je meer wilt? Helaas is dat op dit moment nog niet zo eenvoudig. Je hebt twee opties (of een combinatie daarvan):

1. wijzig het script van Twitter door CSS-code toe te voegen, of
2. draai het script van Twitter op je eigen server en pas aan naar hartenlust.

Optie 1 is het snelst, optie 2 geeft je de meeste mogelijkheden/vrijheid. Ik kies ervoor om dit in een tweetrapsraket uit te leggen. In dit artikel neem ik optie 1 onderhanden, in mijn volgende artikel leg ik uit hoe je optie 2 draaiend kunt krijgen. Ik ga er vanuit dat je een beetje verstand hebt van HTML-code en CSS.

Zo werkt het

Standaard krijg je ongeveer deze code mee (voor de scripttaal zelf):

<a class=”twitter-timeline” href=”https://twitter.com/jouwnaam” data-widget-id=”123-jouw-id” rel=”external”>@jouwnaam op Twitter</a>

Verander dat eens op deze manier in de HTML-code en kijk dan wat er gebeurt:

<a class=”twitter-timeline” href=”https://twitter.com/twitterapi” data-widget-id=”123-jouw-id” data-theme=”dark” data-link-color=”#cc0000″ data-related=”twitterapi,twitter” data-aria-polite=”assertive” width=”300″ height=”500″ lang=”EN”>@jouwnaam op Twitter</a>

Je ziet het: als je weet welke Twitter-css-codes je moet gebruiken, kun je de look & feel aanpassen. Op dev.twitter.com lees je welke opties je kunt aanpassen onder ‘client side options’. Er zijn ook wat voorbeelden gegeven.

Je bent nu al een stap verder: door code toe te voegen krijg je meer controle. In het volgende artikel leg ik je uit hoe je maximale controle krijgt door op je eigen server te werken met alle benodigde bestanden.

Ten slotte … uiteindelijk zal Twitter vast een eenvoudiger manier aanbieden om de lay-out naar eigen wensen aan te passen. Helaas is het nog niet zover. Bovendien denk ik dat de ontwikkelaars met alternatieven komen. Geduldig afwachten dus.

Interessante links

YouTube-filmpje: hoe je het Twitter-script aanmaakt
lay-out aanpassen Twitter-widget
css voor de twitter-widget