De nieuwe Twitter-widget: zo plaats je tweets op je website

 



Mariska Media blogartikelen Beginner

Zo was ie er, en zo was ie weg! Veel twitteraars waren zwaar teleurgesteld toen de oude vertrouwde widget onlangs van de Twitter-website verdween. Intussen is er een nieuwe widget, met nóg meer mogelijkheden!

Wat is de Twitter-widget?

De Twitter-widget is een handige tool waarmee je tweets van jezelf of een andere twitteraar op je website kunt plaatsen. De tweets verschijnen dan precies zoals in je eigen tijdlijn, dus inclusief:

  • Profielfoto
  • Mogelijkheden om te reageren, tweets te retweeten en als favoriet toe te voegen.
  • Klikbare links en hashtags.

Hiermee is de widget een eenvoudige manier om je website interactief te maken via je Twitter-acount. De tweets komen dan bijvoorbeeld op deze manier op je website te staan:


Tweets op je website plaatsen

Om de widget te gebruiken, doorloop je de volgende stappen:

  1. Log in op je Twitter-account en ga naar Instellingen.
  2. Klik links in het menu op Widgets en vervolgens rechts op Nieuwe Maken.
twitter widget website

Je hebt nu de keuze uit allerlei tijdlijnbronnen:

  • De tijdlijn van een gebruiker.
  • Je favorieten.
  • Lijsten.
  • Tweets naar aanleiding van een zoekopdracht.
twitter widget website





In dit voorbeeld ga ik uit van de eerste optie: de tijdlijn van een gebruiker.

  1. Vul achter Gebruikersnaam de gebruikersnaam in van de persoon waarvan je de tweets op je website wilt plaatsen. Waarschijnlijk zijn dat de tweets van jezelf of je bedrijf.
  2. Stel bij Hoogte de gewenste hoogte van de widget in. Denk goed na over waar de widget straks op je website zal verschijnen en hoeveel ruimte je daar hebt. De hoogte is standaard 600 pixels.
  3. Stel naar wens het kleurenschema en de linkkleur in en of je foto’s in tweets automatisch wilt openen.
  4. Bij Domeinen geef je aan op welke website(s) de widget zal gaan verschijnen, waarschijnlijk je eigen website.
  5. Tot slot kun je je met een vinkje uitschrijven voor Twitter-volgsuggesties. Je krijgt dan geen suggesties meer van twitteraars die je mogelijk interessant vindt om te gaan volgen.
  6. Klik als je klaar bent op Widget maken.
  7. Rechtsonder verschijnt een script. Selecteer en kopieer dit script naar de HTML-code van je website of blog. Je plaatst de code op de plek waar de widget moet verschijnen. Let op: het script werkt pas als de webpagina gepubliceerd is op internet.
  8. Controleer of regels in het script door het kopiëren en plakken niet zijn afgebroken, anders werkt het misschien niet. Zorg dat het er precies zo uitziet als op de widgetpagina.
tweets op je website plaatsen

Twijfel je of je de laatste stap zelf kunt uitvoeren? Vraag dan hulp aan je webdesigner.

Veel content-managementsystemen, zoals WordPress en HubSpot, hebben de optie om de HTML-code van een pagina te bewerken. Je kunt de code hier in de pagina plakken. In eerste instantie zie je dan een link naar je tweets op de pagina staan. Bij mij was de widget pas te zien toen ik de webpagina daadwerkelijk had gepubliceerd.

tweets op je website plaatsen

 

Als alles gelukt is, heb je zo niet alleen tweets op je website, maar ook alle bijbehorende interactieve mogelijkheden. Handig!

Let op: dit script werkt alleen als het daadwerkelijk op je website gepubliceerd is. Tip: plaats het script eerst op een testpagina en publiceer die om te kijken of het bij jou ook werkt.

Comments

  1. Hoi,

    Bij mij pakt de website, de html code niet helemaal goed.
    Het enige dat op de website komt te staan is: Tweets van @…..
    en dat is dan een link naar mijn twitter. maar mijn tweets blijven weg..
    Graag hoor ik hoe of wat ik dit kan veranderen 🙂

    Gr.!

    • MvDasselaar says:

      Hoi Aniek,

      Bedankt voor je reactie. Zie je in bovenstaand artikel ook alleen ‘Tweets van @’ staan of zie je daar wel mijn tweets staan? Als die ook niet goed wordt weergegeven, ligt het niet aan je HTML-code maar wellicht aan je browserinstellingen.

      Hoe test je je HTML-ocde? Het beste is om er even een aparte pagina voor aan te maken, zodat je zeker weet dat er geen omliggende code is die storing veroorzaakt. Je mag de link naar de pagina ook even hier plaatsen (of mailen naar info@mariskamedia.nl), zodat ik een kijkje kan nemen.

      • Hi Mariska,

        ik zie wel jouw tweets staan.
        Wij gebruiken webmanager en hebben inderdaad een apart gedeelte voor HTML,
        maar als ik hem daar plak (de widget) komt er alleen te staan: tweets van @CSI_EH ipv de gehele twitter widget. maar een link naar mijn tweets heb ik al.

        ik hoor het graag!

        • Heb je de pagina ook daadwerkelijk gepubliceerd? In het CMS staat bij mij namelijk ook de link die jij beschrijft, maar zodra ik de pagina heb gepubliceerd staat de box met tweets wel op mijn website.

  2. Tweets van @CSI_EH

    dit is de html die ik heb. nu heb ik wel een soort balkje maar nog steeds niet alles zoals het hoort

  3. ik heb een vraag zou iemand mij kunnen helpen ik heb de html code nu op me site gezet maar ik zie de widget niet

  4. Dit script van Twitter slaat helemaal nergens op: Tweets by @rvdsandt
    !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=”//platform.twitter.com/widgets.js”;fjs.parentNode.insertBefore(js,fjs);}}(document,”script”,”twitter-wjs”); vandaar dat het niet werkt, een dergelijk verwarde wanhoop ben ik nooit tegengekomen.

  5. Ik kom echt een heel eind en ben niet onbekend met html, maar die widget krijg ik er echt niet op.
    In principe krijg ik ook een link “Tweets van @gebruikersnaam” te zien. Of ergens bovenin mijn pagina of wel op de goede plaats als ik het in een iframe plaats. Ik werk met IE en wil dit liever niet veranderen. Ik zie jouw tweets wel. Nu is mijn vernieuwde pagina nog niet online, is dat een probleem? Ik kan hem natuurlijk wel al bekijken in mijn browser. Het script ziet er vreemd uit en er word gezegd dat je dit voor moet plaatsen. Heb ik geprobeerd. Daarnaast heb ik een gedeelte <a class=…… die ik dan zou moeten plaatsen waar ik de widget dan wil hebben. Ik ben nu al ruim 8 uur bezig en heb verschillende opties geprobeerd, maar nog wil dit niet lukken. De facebook vind-ik-leuk knop is me wel gelukt, overigens via een url en in een iframe. Ik ga nu eerst maar slapen, maar ik hoop dat je mij kunt helpen. Please help! Met vr. gr. Sheila

    • Het zou kunnen dat het pas werkt als de pagina online is. Bij mij werkt het namelijk nog niet in het CMS, maar wel in de voorbeeldweergave van WordPress en na publicatie. Laat je even weten of dat voor jou ook geldt?

      • Ik heb nu de pagina online, maar dan ben ik er nog niet natuurlijk.
        Wil jij misschien kijken of het mogelijk is.
        Mijn website is http://www.wanyama-photo.nl en ik wil het graag rechts in beeld.
        Boven Facebook.

        • Hoi Sheila,

          Misschien kun je een aparte testpagina aanmaken en daar de code in plakken om ‘m uit te testen en die dan publiceren? Soms geven meerdere scripts op een pagina storing, dus dan kun je in elk geval kijken of het op een testpagina werkt.

          Groetjes Mariska

          • Dat zal ik eerst proberen! En dan meteen kijken of ik em op de goede plaats krijg. 😉 Als ik een testpagina online heb hoor je van mij.

          • In mijn testpagina werkt hij wel. Dan krijg ik idd de tweets te zien.
            Moet ik nu een eigen HTML pagina aan mijn website linken om de social media weer te geven of denk je dat ik het kan integreren in mijn bestaande website?

          • Oke, het is me gelukt, ik heb eerst een html frame toegevoegd en daarin het script en de html code geplakt. Je hebt gelijk, als ik de htmlpagina bekijk zonder dat ze online staan, maakt hij waarschijnlijk geen verbinding en geeft hij alleen “tweets naar @gebruiker” weer. Het script kom tussen dezelfde div’jes, na de rest van de code. Dus dit script hoef je niet voor, na of tussen je body te plakken. Ik werk trouwens met WYSIWYG builder. Dus om dat goed te krijgen moet je je wel inlezen in html om enige wijziging door te voeren. Maar als je het eindresultaat wilt bekijken: http://www.wanyama-photo.nl Bedankt voo rje hulp. Gr. Sheila

          • Hoi Sheila,

            Wat fijn dat het nu werkt! Ik ga dit artikel nog aanpassen, want ik vermoed nu dat veel mensen de pagina niet publiceren en daarom denken dat het niet werkt.

            Groetjes Mariska

          • Bedankt voor het meedenken en succes met het helpen van anderen!

        • Ik kom ook een heel eind, maar die widget krijg ik er niet op.
          Krijg ook alleen maar de regel “tweets van @gebruikersnaam” te zien.

          Zou jij mij jouw definitieve twitter koppeling willen toemailen.
          Dank.

          Joop

  6. deze hele html code klopt voor geen meter! word mooi verteld maar klopt werkelijk niks van!
    zonde dat mensen een hele uitleg geven over een bepaald script die niet eens werkt!

    hoog uit de bol doen en dan zoiets plaatsen ….

    • Beste Bart,

      Ik begrijp je frustratie over dat het bij veel mensen kennelijk niet goed werkt. De Twitter-widget in mijn artikel geeft echter duidelijk aan dat het wel kán en daar is mijn artikel op gebaseerd, niet wetende dat het bij veel mensen schijnbaar niet lukt. Mocht ik het probleem kunnen achterhalen, dan pas ik het artikel direct aan. Voor nu is het zoeken naar een oplossing.

      Groetjes Mariska

    • Bij mij werkt het dus wel, tis even puzzelen geweest, maar het script doet het toch!

  7. Goedenavond,
    Vrees dat ik ook een leek ben. Heb eenzelfde probleem. Geeft mijn tweets niet weer.
    Heb hiervoor een HTML module geinstalleerd en daar de HTML code ingeplakt maar helaas…
    HELP! hihi

  8. Heb de fout gevonden. Lag bij mijzelf…excuses.

  9. Zorg dat je in het vak “domeinen” zowel je adres met als zonder “www” invult.
    Dus: http://www.example.com, example.com
    Problem solved!

  10. Graag gedaan. Kleine aanvulling: dus ook met en zonder de http;//

  11. Halllo,

    Hoe publiceer ik mijn blog op het internet. Ik wil graag dat mijn tweets te zien zijn oo mijn blog.
    mijn blog: zoulikhahrm.blogspot.nl

  12. laurens says:

    Ik heb een project voor school en daar wil ik een twitter Widget in hangen dat is gelukt alleen de breedte van deze widget kan ik niet vervangen en dus staat die uit een kolom waar ik hem moet hebben. http://puu.sh/2Aztl hij staat precies 14px te ver naar buiten aan de rechter kant. Alleen ik kan dit niet veranderen heeft iemand een oplossing voor mij??

  13. Deze formule doet het wel, de twitterbox verschijnt in je html bewerkingsprogamma niet als je op Voorbeeld in je browser drukt, maar zoals al gezegd hier, pas als hij ook echt gepubliceerd wordt op je site:

     
     Tweets by @rvdsandt !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?’http’:’https’;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+”://platform.twitter.com/widgets.js”;fjs.parentNode.insertBefore(js,fjs);}}(document,”script”,”twitter-wjs”);
     
     

  14. Ik heb ongeveer hetzelfde probleem bij de widget met zoekterm:
    De webpagina is gepubliceerd , (op http://home.kpn.nl/krane526/testpagina.htm)
    Er verschijnt niet een widgetbox, (wel correct in beeld bij het voorbeeld)
    maar alleen: Tweets over “@SchaakclubZZ” , met een link
    De ingeplakte code is
    Tweets over "@SchaakclubZZ"
    !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?’http’:’https’;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+”://platform.twitter.com/widgets.js”;fjs.parentNode.insertBefore(js,fjs);}}(document,”script”,”twitter-wjs”);

    terwijl ik jóuw tweets toch goed kan lezen.
    Is het zoekwoord te lang? Te onbekend?
    Ligt het aan Explorer 9 + Windows Vista?

    Wie helpt mij aan een wel werkende widget?

    • Hola! Er wordt iets anders op het forum geplaatst dan ik intik!
      Vòòr dat uitroepteken stond:
      kleinerdanteken a href=”https://twitter.com/search?q=SchaakclubZZ”
      data-widget-id=340902934839701504 groterdanteken Tweets over "@SchaakclubZZ" l;eomerdan /a groterdan kleinerdan script groterdanteken
      Je begrijpt wel wat er wèl gestaan heeft.

      • l;eomerdan = groterdan = > (Sorry)

        • Inmiddels gelukt. Het probleem was: de html-editor van word 2000 gooit er volautomatisch lay-out-tags tussenin. En dan werkt de twittercode niet meer.

  15. Martin says:

    is er ook tekstcode aan de widget toe te voegen waardoor je tweets van sommige personen kunt blokkeren?

  16. Hallo Mariska,

    Zeer goede uitleg. Alleen wik ik graag de optie om reacties te plaatsen uitschakelen.
    Die kom ik volgens mij helaas niet tegen.

    Gr. Wouter.

    • Bij het maken van de widget timeline staat er onder ‘username’
      Options
      Exclude replies
      Auto-expand photos

      Als je Exlude replies aanvinkt verschijnen deze niet in je widget.

  17. Ik heb de widget geplaatst maar ik krijg alleen maar een link naar Twitter

  18. Hoe pas je het uiterlijk van de twitter widget aan. Wil maar 5 posts van twitter en ook geen foto. Ook het twitter logo mag weg en aan de onderkant “twitter naar D’SIGN_magazine” hoeft van mij niet.

  19. Ik heb een theme op mijn wordpress site met een twitter widget. Bij deze widget moet ik nog mijn Twitter ID invullen maar ik heb geen idee waar ik hem kan vinden.

  20. Hoi Mariska, ik heb de widget kunnen plaatsen, maar is het ook mogelijk tweets van anderen in de widget te krijgen ?

  21. Hoe kan ik de hoogte en breedte instellen?

  22. Ik wil binnen een widget meerdere twitteraccounts toevoegen, zonder dat ik er elke keer een aparte html code voor krijg. Hoe doe ik dit?

  23. Juul schreef: “uhm, niet om ‘t een of ander maar bij mij staat er nergens ‘n vak met ‘domeinen’… ik krijg ‘t dus echt niet aan de praat… slechts ‘n link met @mijnaccountnaam… geen timeline te bekennen”

    Het vak domeinen verschijnt bij mij ook niet (bij het aanmaken dus van de widget op de twitter-pagina), ik kan dus nergens mijn webpagina (met en/of zonder https) invullen. ‘k Heb nergens een reactie op dit deel-probleem gelezen.
    Ben nu al vele uren aan het stoeien met alle bovenstaande aanwijzingen , maar kom nog steeds niet verder dan een tekstregeltje “Tweets van @…..” 🙁
    Voor of na publiceren; blanco pagina of niet; in een frame of niet: niets werkt.

    • Beste GP,

      Ben je er inmiddels al achter hoe het zit met het van domeinnamen? Ik loop tegen hetzelfde progbleem op…

  24. Ik zou graag de scrollbalk willen verwijderen omdat die vaak als hinderlijk word beschouwen. Ik wil daarom alleen de laatste 3 Tweets die ik heb gepubliceerd zichtbaar maken. Hoe kan ik dit doen?

    Bedankt

  25. Ik probeer de twitter widget in een block in mijn dmv artisteer ontworpen html site te plaatsen, maar krijg ook alleen maar ‘ Tweets van @2move4ward_ ‘ te zien. Wat doe ik hier fout?
    Ik gebruik dus geen Joomla, maar zet de html site vanuit Artisteer via ftp rechtstreeks op de server.

  26. Marja says:

    het script werkt prima, maar ik vraag mij af je niet alleen de hoogte maar ook de breedte ervan kunt aanpassen.

  27. Ik heb de twitter widget als ingesloten code geplaats. Nu is de volledige twitter weergave wel te zien in Mozilla en Chrome, maar niet in Internet Explorer. Daar zie ik alleen tweets door…..

    Wat doe ik verkeerd?
    PS ik maak de site voor iemand anders.