SharePoint

Het Twitter-widget aanpassen

20 juni 2012

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]

You Might Also Like

Geen reacties

Plaats een reactie