Voor het tonen van tweets op je site geeft twitter een embedded widget.

Op de site : Profile widget for My Website maak je het widget. Je kunt een paar waarden veranderen en hebt invloed op de kleurstelling van het widget. In figuur 1 is het widget met de standaard kleurstelling. In figuur 2 de kleurstelling die ik in een project nodig had. In figuur 3 zijn de header en footer verborgen.

 

 

 

 

De header en footer van het widget zijn niet duidelijk met een witte achtergrond. Op de site waar het widget is gemaakt krijg je niet veel opties. Het widget verwijst naar een javascript om de html te genereren. Je hebt twee opties om de header en footer te verbergen: Of met css of in het script van het widget.

Het element ‘.twtr-hd’ verwijst naar de header, het element ‘.twtr-ft’ naar de footer.

Om die te verbergen in CSS gebruik de code:

<style> .twtr-hd, .twtr-ft { display: none; } </style>

In de API van Twitter is het script beschikbaar: …/javascripts/widgets/widget.js

Aanpassen van het script en zelf hosten is toegestaan.

Om de header en footer te verbergen vervang de regel:

<div> met <div style=”display:none”>

en <div> met <div style=”display:none”>

Met CSS kun je het widget opmaken in het script van het widget kun je bepalen welke functies worden gebruikt of aangepast.

In de code die de twitter-site voor je maakt worden features meegegeven die je aanzet (true) of uitzet (false).

Met de feature “avatar” geef je elke tweet de profielfoto mee zoals in figuur 3.

Wanneer de feature ” fullscreen” op true wordt gezet krijg je widget een vergrote weergave.

Handig voor als de tweets op een groot scherm moeten worden getoond bij events.

 

 

 

Het script wat in deze post is gebruikt staat hieronder. Vervang het pad van het script (lijn 1) met het pad van je eigen gehoste script ( of het orgineel ) en de naam twitter (onderin) met het accountnaam waar je de tweets van wilt tonen.

[sourcecode=”javascript”]


[/sourcecode]

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.