Hoe Twitterfountain op je website plaatsen?

Een Twitterfountain (het is dus niet: Twitterfontein) laat tweets zweven in een fotokader op je website. Hartstikke mooi dus. Zeker omdat je de vormgeving zelf kunt bepalen. Je hebt wel toegang nodig tot de broncode (HTML) van je website. In deze bijdrage leer je hoe je tot een code komt. Het is javascript die je tussen je HTML kan zetten. Een voorbeeld vind je in dit bericht. En een video! Foto voor Twitterfountain Het is vooraf handig om te bepalen hoe hoog en breed je de Twitterfountain op je pagina wilt hebben. Je kunt dan alvast een foto van dat formaat ergens op je eigen website zetten voor later gebruik Het gaat erom dat je foto een eigen url heeft Noteer de maat in pixcels. Zie Eigenschappen bij je foto (rechtermuisknop vaak). Aanmelden/inloggen hoeft niet Het werkt gemakkelijk via www.twitterfountain.com Je hoeft dus geen acccount/inlog te hebben. Je kunt gewoon op de homepage van Twitterfountain instellingen maken die je bewaard. Daarna plak je de code in je website. Hoe stel ik Twitterfountain in? In stappen werkt het zo: op de website van Twitterfontain ga je naar Settings (tenminste, als je browser de animatie kan afspelen) Je kunt dan gaan instellen hoe de animatie, voor jou, gaat werken. Let op de 3 tabs binnen het menu instellingen Binnen de settings zijn er drie tabs: Messages, Images, Fontain. In messages vul je een trefwoord in (bijv.:#utrecht). De toepassing gaat dus Tweets laten zien waarin die inhoud voortkomt. LET OP: je hebt dus niet controle op de inhoud; ook anderen kunnen tweets produceren waarin jouw term voorkomt Je kunt tussendoor je instellingen bewaren door Save te drukken en te kijken wat het effect is. (zorg dat je muisaanwijzer niet op de animatie staat, want dan houdt ie stil) Onder de tab Fontain kun je trouwens de url kwijt van je eigen foto. Je kunt nog meer, zoals kleuren instellen voor achter de foto en achter je berichten. Deze kun je instellen voordat je klaar bent op de homepage: www.twitterfountain.com. Pas bij Save vraagt Twitterfountain je gewenste maat voor de animatie (jouw fotomaat). Een leuk filmpje over hoe Twitterfountain werkt, zie je het gelijk: Zo gemakkelijk is die fontein met tweets In ieder geval. Het gaat allemaal om vinkjes zetten, en het effect ziet je als je op Save drukt. Als je verwijst naar een eigen foto; moet je de Flickr optie op: No Images zetten. Je ziet het wel in 1 van de 3 tabs. Ook de Titelbar (het vrolijke logo van Twitterfountain zelf) kun je

uitzetten, zodat je eigen website geen reclame maakt voor Twitterfountain. Maar dat je je eigen stijl houdt! Eenmaal op Share gedrukt, krijg je de code onder de muisknop. Je hoeft dan alleen nog maar te plakken in de broncode (html) van je websitepagina. Dit gaat met Control+V als je op de juiste plek staat in je html webpagina (bewerkingsgedeelte). code plakken Wat je plakt is een stukje javascript. Maar je kunt het gewoon in je website plaatsen. De hoogte en breedte moet je vooraf instellen, zodat de Twitter fontein toepassing ook past in je websiteontwerp. Dit stel je dus in voordat je op Save drukt. Herpubliceer je webpagina. Zon code ziet er zo uit: (druk op beeld/broncode in je browser om het te zien): Einde script is hier dus. Ps Het vervelende is wel: als er een tegenstrijdigheid ontstaat via je instellingen. Kun je niet meer bij je settings en moet je je fountain weer opnieuw opzetten, helaas. Handig om de kleurwaarden en url voor je foto dus even te bewaren in je kladblok (notepad). Dan houd je dat bij de hand.