Een Twitter widget plaatsen op Blackboard

Soms wil je een Twitter-feed van een bepaald Twitter account laten zien op een Blackboard pagina. Twitter heeft voor dit doeleinde zogenoemde ”widgets”: kleine schermpjes die je overal kunt plaatsen en waar (een gedeelte van) de feed van het gekozen account wordt weergegeven. In deze blog wordt uitgelegd hoe je zo’n widget kunt toevoegen, zowel in zijn meest basale vorm, als in aanpasbare vorm, waar je kleuren en andere opties kunt aanpassen.

Wat is het?

Twitter widgets worden op veel websites gebruikt omdat ze vaak leuk uitzien, in het oog springen, en ze niet veel ruimte in beslag nemen. In een oogopslag is te zien wat de recente activiteit is geweest van een bepaald twitter-account.

Hoe werkt het?

Er zullen nu 2 methodes worden uitgelegd: als eerste een widget plaatsen in zijn meest basale vorm. Dit houdt in dat er niets is veranderd aan het standaard design en de standaard opties. Mensen die kleuren en opties niet willen / hoeven aan te passen, kunnen deze methode gebruiken. Daarna zal worden uitgelegd hoe je een widget kunt personaliseren en iets levendiger of kleurrijker kunt maken. Een widget in zijn meest basale vorm plaatsen (bevat geen scrollfunctie en wordt niet automatisch geüpdatet totdat de pagina wordt ververst):

  1. Ga in de BB cursus of Organisatie naar de plek waar je de widget wilt hebben. Dit is mogelijk op plekken waar een nieuw item wordt gemaakt en een teksteditor aanwezig is (de widget wordt gemaakt met HTML-code);
  2. Voer alle reguliere tekst in die je wilt;
  3. Klik in de taakbalk van de teksteditor op de knop “HTML-bronmodus in-/uitschakelen”. Het tekstveld wordt nu geel;

    De knop voor HTML-bronmodus aan/uit

    De knop voor HTML-bronmodus aan/uit

  4. Ga met de tekstcursor naar de plek waar je de widget wilt plaatsen;
  5. Kopieer en plak nu de volgende code (link) in het gele veld;
  6. In de voorlaatste regel staat “VOER HIER ACCOUNT NAAM IN”. Zoek deze woorden, verwijder ze, en vervang ze door de naam van het Twitter account dat je wilt weergeven, zonder @-teken. (Let er wel op dat de apostrof-tekentjes (‘) blijven staan);
  7. Let er op dat je niet weer opnieuw op de knop “HTML-bronmodus in-/uitschakelen” klikt, er gaat dan namelijk iets mis met de opmaak omdat Blackboard bepaalde gedeeltes van de code zal interpreteren als tekst. Je kunt nog steeds tekst toevoegen, alleen moet dit nu gebeuren in het gele HTML-veld;
  8. Voeg nog eventuele bijlagen en opties toe;
  9. Klik op Verzenden.

Uw widget zal er als volgt uitzien (voorbeeld met Dr. Blackboard account):

 

Standaard widget uiterlijk

Standaard widget uiterlijk

Een aangepaste widget plaatsen:

  1. Volg stap 1 t/m 4 van “een widget in zijn meest basale vorm plaatsen”;
  2. Ga naar deze website (link). Afhankelijk van de taal die je hebt ingesteld bij de instellingen van je Twitter account, zal de website Engels, Nederlands of iets anders zijn. Er wordt hier uitgegaan van een Nederlandse instelling met de vertaling in het Engels erachter;
  3. Klik links op “Mijn website” (“My Website”);
  4. Wij hebben hierboven gebruik gemaakt van een “Profielwidget” (“Profile Widget”). Deze geeft uw profiel-feed weer. Het is ook mogelijk om een “Zoekwidget” (“Search Widget”) te maken, waarin zoekresultaten van een bepaalde term worden weergeven; een “Favorietenwidget” (“Faves Widget”), waarin uw favorieten komen te staan; en een “Lijstwidget” (“List Widget”), voor als u mensen in lijsten groepeert, deze worden dan hierin weergegeven. De volgende stappen hebben betrekking op de Profielwidget, maar in essentie zullen alleen de volgende twee stappen verschillen van de rest van de widgets;
  5. Klik op Profielwidget (Profile widget);
    Soort widget kiezen

    Soort widget kiezen

    Let op: het is bij onderstaande opties mogelijk om op ieder gewenst moment onderaan de pagina te klikken op “Instellingen uitproberen” (“Test Settings”). Er wordt dan een nieuw voorbeeld van uw widget gegenereerd met de opties die u heeft aangegeven.

  6. Vul bij “Gebruikersnaam” (“username”) de gebruikersnaam in waarvan u wenst dat die wordt weergegeven, zonder @-teken;

    Gebruikersnaam invullen

    Gebruikersnaam invullen

  7. Klik links op “Voorkeuren” (“Preferences”). Hier kunt u verschillende opties aan- en uitzetten en instellen:
    • Realtime resulaten weergeven? (Poll for new results?): Vink aan als u wilt dat de widget uit zichzelf gaat kijken of er nieuwe tweets zijn. Als dit uitgevinkt blijft, zal de widget alleen updaten als de pagina wordt ververst;
    • Scrollbar toevoegen? (Include scrollbar?): Als dit wordt aangevinkt, kunnen er meer tweets gelaten worden door naar onder te scrollen in de widget;
    • Gedrag(Behavior):
      • Alle tweets laden (Load all Tweets): Alle tweets worden in 1 keer geladen en er wordt niet meer weergegeven;
      • Tijdsgestuurde interval? (Timed interval): Om de zoveel seconden wordt een nieuwe tweet ingeladen;
        • Resultaten herhalen? (Loop Results?): Als er niet meer nieuwe tweets zijn, dan worden oude tweets weer opnieuw opgehaald na het ingestelde interval;
        • Tweet interval?: Het aantal seconden voordat een nieuwe tweet wordt ingeladen.
    • Aantal tweets (Number of tweets): Het aantal tweets dat onder elkaar wordt weergegeven;

      Voorkeuren instellen

      Voorkeuren instellen

  8. Als alles naar wens is aangepast klik je links op “Uiterlijk (“Appearance”). Hier kunnen de kleuren worden aangepast. Klik op het vakje naast ieder item om visueel een kleur uit te kiezen of voer, als je weet hoe hexadecimale kleurcodes werken, direct de kleurcode in in het tekstvak:
    • Kop- en voetachtergrond (Shell background): de achtergrondkleur van de balken boven en onder, waar je profielnaam en het Twitterlogo in staan;
    • Kop- en voettekst (Shell text): de kleur van de tekst die zich in deze 2 balken bevindt;
    • Tweetachtergrond (Tweet background): de achtergrondkleur van het gedeelte waar de tweets worden ingeladen;
    • Tweettekst (Tweet text): de kleur van de tekst van tweets die worden ingeladen;
    • Links: de kleur die aan links (URLs) wordt gegeven, inclusief gebruikersnamen en hashtags.

      Opties voor uiterlijk instellen

      Opties voor uiterlijk instellen

  9. Klik nu links op “Afmetingen” (“Dimensions”). Hier kunnen de afmetingen van de widget worden aangepast:
    • Breedte (Width): de breedte in pixels;
    • Hoogte (Height): de hoogte in pixels;
    • Automatische breedte (Auto width): vink dit aan om de widget zelf te laten beslissen over de beste hoogte en breedte.
  10. Als alles naar wens is, klik dan onderaan op “Voltooien & Code genereren” (“Finish & Grab Code”);

    Afmetingen instellen & voltooien

    Afmetingen instellen & voltooien

  11. Er verschijnt nu een tekstveld met code erin. Kopieer deze tekst, plak hem in het gele HTML-veld in Blackboard;

    De code die gekopieerd gaat worden

    De code die gekopieerd gaat worden

  12. Ga verder met stap 7 van “een widget in zijn meest basale vorm plaatsen”.

Beperkingen

  • Zoals aangegeven, is het niet slim om eerst de HTML-bronmodus aan te zetten, de HTML-code erin te plakken, en vervolgens de HTML-bronmodus weer uit te zetten. Hierdoor gaat Blackboard bepaalde stukken code anders interpreteren, en kunnen er rare resultaten uit voortkomen.

Leave a Reply