Embedden van tweets op je blog: een korte handleiding

Toen Elja op Twitter vroeg naar een stappenplan om tweets te embedden dacht ik eerst dat ze een grapje maakte.

@rsnijders embedden van tweets idd. Ik vond wel het embedden van het archief op je blog maar dacht dat jij ook een embed-stappenplan had?
— Elja Daae (@Elja1op1) July 29, 2013

In WordPress is embedden van tweets namelijk een kwestie van de url van de tweet (https://twitter.com/Elja1op1/status/361741533633982464 voor de bovenstaande) op een eigen losse regel zetten in je blogpost. Zolang je er maar op let dat je er geen hyperlink van maakt zal WordPress zelf die url weergeven als tweet. Inclusief tweets waar op gereageerd wordt en eventuele media – zoals afbeeldingen of Vine video’s – die in de tweet vermeld worden. Daar heb je niet echt een stappenplan voor nodig.

Maar niet iedereen gebruikt WordPress natuurlijk. En wat te doen als je iets aan de weergave wilt veranderen in WordPress van de tweets? Die worden namelijk altijd links uitgelijnd terwijl ik liever tweets zou willen centreren in de blogpost.

Dat kan ook maar daarvoor moet je wel de embedcode van Twitter zelf gebruiken. Gelukkig is dat erg eenvoudig want op Twitter.com kun je bij elke tweet die embedcode terugvinden.

Stap 1. Ga op Twitter.com naar de tweet die je wilt embedden en klik op … More om een menuutje te openen. In dat menu kies je dan voor Embed Tweet.

Stap 2. Je ziet hier de embedcode staat die je in je blogpost – in de Text/HTML weergave! – kunt kopiëren en plakken om de tweet weer te geven. Let op dat je in tegenstelling tot de makkelijke WordPress manier hier nu kunt kiezen of je de ‘parent Tweet‘ wel of niet wilt opnemen. Als je dit afvinkt zou je in het voorbeeld bovenaan dus alleen maar de tweet van Elja zien en niet mijn tweet waar ze op reageerde.

En zo simpel is het om tweets te embedden in je blog, of je nou WordPress gebruikt of niet. Veel korter kan die handleiding niet zijn, toch? Het voordeel van deze code gebruiken is dat je behalve de ‘parent Tweet’ uitzetten ook de tweets kunt centreren middels een kleine aanpassing aan die code.

Centreren van tweets
Standaard worden tweets links uitgelijnd. Wil je ze liever rechts uitlijnen of – waarschijnlijker – centreren, dan moet je aan het begin van de code een CSS attribuut toevoegen. Aan <blockquote class=”twitter-tweet”> voeg je dan tw-align-right of tw-align-center toe.

Voor het centreren van de bovenstaande tweet (en dan niet als afbeelding) gebruik je dus de code:

<blockquote class=”twitter-tweet tw-align-center”><p><a href=”https://twitter.com/Elja1op1″>@Elja1op1</a> Nee want het zijn te weinig stappen :) Maar het is een prima idee voor een zomerse blogpost zometeen</p>— Raymond Snijders (@rsnijders) <a href=”https://twitter.com/rsnijders/statuses/361747661092696064″>July 29, 2013</a></blockquote>
<script async src=”//platform.twitter.com/widgets.js” charset=”utf-8″></script>

@Elja1op1 Nee want het zijn te weinig stappen :) Maar het is een prima idee voor een zomerse blogpost zometeen
— Raymond Snijders (@rsnijders) July 29, 2013