Lees meer artikelen op mijn blog:

http:www.gerbengvandijk.nl

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.

Zo’n 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.

Beste lezer, wil je zelf reageren? Type hieronder of deel dit bericht.

Lees meer artikelen op mijn blog:

http:www.gerbengvandijk.nl