Het is dringend tijd voor het beloofde deel 2 in de serie ‘Twitter-widget met lay-out zoals jij ‘m wilt!’. Hoezo? Nou Twitter API v1 is met pensioen. Dat heeft de consequentie dat de werking van veel twitter-widgets het heeft begeven.
Op 16 juni jl. was het dan zover: “API v1 is retired, old timeline widgets are no-longer rendered“. Kortom, Twitter is over naar API v1.1. Sindsdien zie je de widgets op veel pagina’s veranderen in de standaardvormgeving zoals Twitter die aanbiedt. Je kunt weliswaar binnen Twitter wat punten aanpassen als je de widget maakt, zoals de linkkleur, maar verder: eenheidsworst troef. Saai en niet leuk voor je site.
Voor de volhouder
In het vorige artikel gaf ik je de snelste weg naar extra aanpassing, namelijk door in het script van Twitter CSS-code toe te voegen. Een andere optie is om de bestanden die je voor de widget gebruikt, op je eigen webserver te zetten. Je kunt dan echt naar hartenlust aan de gang. Helaas, nerds-only, ben ik bang. Ik geef je hieronder precies aan wat je moet doen om je widget zover te krijgen dat het op je eigen server/bestanden draait. De rest moet jezelf doen.
Dit heb je nodig
Twitter werkt met de bestanden widgets.js en timeline.css.
Download http://platform.twitter.com/widgets.js
Download timeline.css
Deze bestanden zet je via FTP op de server van je website.
Je maakt vervolgens een HTML-bestand met verwijzingen naar die bestanden (let er goed op dat je bij “jouw” steeds vervangt met jouw gegevens):
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Twitter Widget aangepast</title>
<link rel="stylesheet" type="text/css" href="timeline.css" />
</head>
<body>
<a class="twitter-timeline" href="https://twitter.com/jouwnaam" data-widget-id="jouwid" rel="external">@jouwnaam op Twitter</a>
<script>
//<![CDATA[
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://www.jouwdomein.nl/subdir/widgets.js"; fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
//]]>
</script>
</body>
</html>
De bestanden widgets.js en timeline.css staan natuurlijk in de directory waar je HTML-bestand ze op je server kan vinden. Verander nu bijvoorbeeld in timeline.css het lettertype. Ik heb het alvast van het standaard Helvetica omgezet naar Tahoma. Kies hier je eigen font. En voilà!
Nu heb je een begin. Hoe handiger je bent met js en css hoe beter je de widget kunt vormgeven. Houd er rekening mee dat het bestand widgets.js vanuit Twitter kan veranderen; ik kan de blijvende werking lokaal niet garanderen.
Ga je aan de gang, dan kunnen deze links je helpen
Stackoverflow
Peter Moss
twitter, timeline customization
vragen, frustraties en suggesties op het officiële twitter-forum
