How to embed an image in a custom click-to-tweet link

Recently I found myself working on a project where I wanted to offer the user an simple way to tweet a custom image. Twitter makes it very easy to add a tweet button to your website, but how to include an embedded image isn’t immediately clear. Moreover, the standard blue tweet button just wasn’t going to cut it this time.

It took a couple of false starts and a lot of Googling, but I’m happy to report that it is possible to customize the look of your tweet-this link, and to embed an image. It requires a work-around, but it’s certainly not hard. I’ve gathered up what I learned into a quick little guide that I hope you will find useful.

How to embed an image into a tweet-this link

So here’s the first trick. You cannot embed an external image into a pre-populated link for your user, but you can embed an image from Twitter’s own servers. How do you get your image onto Twitter’s servers? Easy. You tweet it.

For my project, I had eight images I wanted to use depending on the results of user input, so rather than bogging down my own feed with images out of context, I opened up a dummy account to post them.

And now for the second trick. Embedding your image isn’t as simple as right-clicking on the picture to get the URL that points to the image file, so here’s how to grab the link you need:

1. Right-click on the timestamp, and open the link in a new tab.

2. Click on the image to expand it, then open up your inspector. Search for pic.twitter.com. This is the link you’re looking for.

Note that this URL doesn’t point directly to your image file. The URL is a permalink to your tweet containing the image. For example, here’s mine: pic.twitter.com/E3SdsiIqPr.

Don’t be tempted to delete your tweets once you’ve got the embed code. I made that mistake, and had to begin again from scratch.

And there you have it! If you aren’t looking to customize the look of your tweet link, you’re already done. Include this URL in the custom text in your favourite button generator. The resulting tweet will look something like this:

How to customize your twitter button

The button generated by Twitter’s tweet button looks like this:

Meanwhile, this is what I was picturing:

Luckily, it’s easy as pie to make a URL that you can wrap around anything you like; in my case, I used a Font Awesome icon with a little CSS glow. But here’s where I went off track for a minute: many of the tutorials and link generators I found used a depreciated format that doesn’t work on mobile.

This is the magic formula:

https://twitter.com/intent/tweet?text=Your%20Content%20Here

Note that spaces are replaced with “%20”. In the latter part of your link you can include the URL of your website, your twitter handle, and yes, the image URL you grabbed above.

Here’s what mine looks like:

<a href="https://twitter.com/intent/tweet?text=My%20aura%20is%20blue.%20Discover%20your%20aura%20at%20http://www.carolynmcneillie.com/colours%20pic.twitter.com/E3SdsiIqPr%20@carolynalive" target="_blank"><span class="fa fa-twitter"></span></a>

And there you have it!

I hope I’ve managed to save you a little time and headache. Let me know in the comments if you used this guide. I’d love to check out your project!