This is the third in a series of posts introducing HTML. The first part tackled making a ‘Tweet this’ link in a blog post, and the second introduced Twitter’s Web Intents sort-of-API. If you haven’t read those, you might find it easier to start there.

You can also get all four tutorials in a small ebook.

Sharelines

• How to: embed images in ‘tweet this’ links
• “Adding an image to a tweet can make a big difference in terms of how many times it is retweeted”

Stage 3: Adding an embedded image to a ‘Tweet this’ tweet

It’s widely known in the news industry that adding an image to a tweet can make a big difference in terms of how many times that tweet is retweeted. In fact, Twitter say it’s the single biggest factor.

But adding an image to a ‘tweet this’ link isn’t as easy as you might expect.

The obvious way to do this, for example, would be to add an image link to your tweet – but Twitter will show that as a link, not an image.

Unless you use a particular type of image URL.

Finding the right Twitter image URL

This particular image URL is one generated by Twitter itself, after someone has tweeted the image.

Assuming no one has already done so, then, you’ll need to start by tweeting the image yourself.

Once you’ve done that, open the tweet. You can normally do this by clicking on the date or time next to it (for example “Jan 27” or “1d” or “2h”).

The tweet URL will look something like https://twitter.com/paulbradshaw/status/560171610309926913.

It is important to note that this image has two URLs. One begins with pbs.twimg.com and another begins with pic.twitter.com. Only the second will be embedded when tweeted – this is the one you need.

If you right-click on the image, for example, to ‘Copy image URL’ you will get the wrong type of URL – the one beginning with pbs.twimg.com. Do not copy that link

Instead, while still on the tweet page, you need to click again on the image. This should bring up the tweet once more – only this time with the pic.twitter.com URL visible. Copy this link to use later.

If you cannot see the pic.twitter URL then try right-clicking on the tweet and selecting View source (or similar). Use CTRL+F to search for pic.twitter and you should be able to find the URL there.

Adding your image URL to the ‘tweet this’ link

From this point you can just follow the steps in the first post in this series only making sure to add the pic.twitter URL in the text= parameter along with any quote – and a space of course.

But I’ll recap them quickly here:
1. Create a URL beginning https://twitter.com/intent/tweet?text= and add whatever text you want to appear in the tweet at the end of this URL. Then include a space and the link to the image that you copied.
2. Press Enter. A Twitter box should appear in the browser with the text you specified, and the link too. (Make sure you’re logged in)
3. The URL will have changed slightly, to replace spaces and other awkward characters. Copy that URL.
4. In your post, switch to HTML (Text) view and link a relevant phrase (like ‘Tweet this image’) by putting <a href="` - then your URL - then `" target="_blank" rel="noopener noreferrer"> before it, and </a> after it.
5. Preview the post and test the new link.

If you have any problems go back through the previous post’s more detailed instructions.

A good place to put your ‘Tweet this image’ link is in the caption to the image itself. You can see an example of this above, or on this post.

In the final part of this series of tutorials I’ll be covering how to style your ‘tweet this’ links so they stand out more – and learn about CSS in the process.