A great way to tell a story is with tweets. In this post we are going to go over how we do that.
WordPress is awesome in how it handles embeds with oEmbeds
The easy embedding feature is mostly powered by oEmbed, a protocol for site A (such as your blog) to ask site B (such as YouTube) for the HTML needed to embed content from site B.
story|ftw works with this functionality.
First lets take a look at the end result.
In this story, you can see how to embed tweets and what the results look like.
Also what your potential options are.
You can embed regular tweets, tweets with images, tweets with .gifs, tweets with twitter cards, and of course you have all of the regular story|ftw functionality to be able to use backgrounds colors, images, gif’s or videos.
Here is how you do it.
Loading Speed
Embedding tweets is awesome but it depends on twitter and their script to load to load the tweet.
Often times when you see embedded tweets on websites they can sometimes take a second or two to load.
In the case of story pages you get a result that looks like this.
What’s happening in this shot is the tweet has yet to load itself. It should look like what you see below and it will as soon as it loads.
The best practice / work around in this situation is to not embed the tweet on the first page of your story. As long as you embed them on any page after the first then the tweet will have plenty of time to load and display correctly.
If its not a big deal if the delay happens then go ahead and go for it on the first page. In my testing sometimes it loads instantly and sometimes it takes a second.
The mobile downside
Regular tweets look amazing on all devices. Tablets too.
Tweets with image embeds, gif embeds (read vine), or twitter cards, don’t work on mobile.
Well, they work, but they fill too much of the screen to keep navigation feasible. See the screenshots from the iphone 5 below.
Looks awesome
Cuts it off – completely fills the screen
Cuts it of – completely fills the screen
Back to awesome
The Fix.
So the downside is you can’t embed tweets with twitter cards, large photos, vines, or videos and still have a workable mobile experience.
There is a workaround though.
You have to embed the tweet via twitters embed tweet option.
After you click embed you presented with an option in include media. If you turn this off you are left with just the tweet itself.
