How to Dynamically Update a Twitter Embed Widget
Twitter provides some widgets that make it easy to embed the latest tweets from a user. Just go to Twitter’s Settings > Widgets page to get started.
The interface for creating a sanctioned Twitter widget.But, just using that tool, you can’t make the user who’s timeline will populate the widget dynamic. At a glance, it appears there’s no way to do this. Which is a pain if you want to setup one widget that can easily be swapped out for different users, say on a social networking site or blog with multiple authors. No fear! It’s possible, just takes a little tweaking.
Once you create your widget, you’ll be given some code like this:
<a class="twitter-timeline" href="https://twitter.com/clicknathan" data-widget-id="365889744950931457">Tweets by @clicknathan</a>
<script>!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");</script>There are actually two parts to that code. The <a> tag, and the <script> tag.
You only ever need to include that script tag once per page, if you didn’t know. So if you’ve already got it somewhere else, no need to paste it in again. I place it in the footer section of my sites.
What we’re focusing on is the a tag. Let’s look at it again, alone this time:
<a class="twitter-timeline" href="https://twitter.com/clicknathan" data-widget-id="365889744950931457">Tweets by @clicknathan</a>So you’d think that by swapping out the two “clicknathan” terms, we could dynamically change this. Not so, unfortunately. We need to add another attribute to the tag.
<a class="twitter-timeline" href="https://twitter.com/wandrly" data-widget-id="365889744950931457" data-screen-name="wandrly">Tweets by @wandrly</a>That’s it! The widget will now be dynamic.
WordPress Example
Let’s say we’ve got a custom field associated with each of our posts, and we’ll call it twitter_user. We want to use that to dynamically change who’s tweets we show on particular posts. Maybe you blog about celebrities and want to show their most recent tweets below your post about them.
In your theme, you’ll need to setup the post to retrieve this value, and then insert it everywhere that’s appropriate in the a tag Twitter provides. It’ll look something like this:
<?php if ( have_posts() ) while ( have_posts() ) : the_post();
$twitteruser = get_post_meta($post->ID, 'twitter_user', true); ?>
Whatever your theme includes, ie the_title(), the_content, etc.
<?php if ($twitteruser != '') { ?><a class="twitter-timeline" href="https://twitter.com/" data-widget-id="[whateveryoursis]" data-screen-name="">Tweets by @</a><?php } ?><?php endwhile; ?>Note that is all within the loop and will need to be rejiggered to work with your particular theme.
In plain English we’re saying, “Grab our custom field twitter_user and assign it to the variable $twitteruser. If that field isn’t empty, show the Twitter widget and place the appropriate Twitter username everywhere it should go.
Up Next: How to Auto-post to Google+