Embed a TWEET THIS image + URL in your emails

This tutorial will demonstrate how to create a TWEET THIS link that contains a Tweet, whatever image you want tweeted, and a URL to the web-page you want tweeted with it.

To put this in an email, you must be able to access your default email template or create a new template. I made mine by creating a new template in an automated email program that I use.

Here we go:

1. If you’re including a URL to a website in the TWEET THIS link, go to bit.ly  (it’s free) to shorten the URL so Twitter will use it. Copy and paste the new short URL to a blank doc or text file so you can easily find it in a few minutes.

2. Tweet the image that you want embedded in the TWEET THIS link.

This is necessary because Twitter will store the image and you need the specific path to where it’s stored. (If the image isn’t on Twitter, then it won’t show up when using the TWEET THIS link.)

Here’s how to do that:

twittershot-300x102 Embed a TWEET THIS image + URL in your emails

Sign in to Twitter, click “Tweet”, then click “add photo or video”, browse for and Tweet the image. (You can delete the tweet later if you want. The image will still be saved.)

Now for the fun part: You need to find the URL (path) to that image, and there are TWO of them.

You’ll use the URL that starts with “pic”.

Stay in Twitter and right-click the Tweeted image you just posted. “Inspect” it with web developer tools, like the one in CHROME. (TOP RIGHT on Chrome, 3 vertical dots)

twittershot4-300x259 Embed a TWEET THIS image + URL in your emails

To find the correct URL, hit Control+F and search for “pic“. When you find it, copy the whole line pic.twitter.com/XXXXXX.

Paste it where you can find it again in a few minutes.

twittershot2-300x202 Embed a TWEET THIS image + URL in your emails

3.To create the Tweet This link in HTML:

<a href=”https://twitter.com/intent/tweet?text=THIS IS WHAT I WANT TO TWEET > </a>

There can’t be spaces in-between words in a URL, so replace all those spaces with %20, like this:

THIS%20IS%20WHAT%20I%20 WANT%20 TO%20 TWEET%20

Next, continuing on the same line, right after the 20, we add the link for the Twitter image (red) that we just tweeted , and the bit.ly shortened URL (blue) for our chosen website.

Remember, no spaces, and close the tag >.Don’t forget the quotes. The whole href needs to be in quotes.

(I’m condensing the code here for easier display)

pic.twitter.com/CfORwODo%20http://bit.ly/2oxajij“>

Now add some text to make a clickable link: (again condensing the code for easier display)

ODo%20http://bit.ly/2oxajij“>ADDED Clickable Text</>a

If you’d rather have a clickable image instead of text, then add the path to the image in an img tag, before the closing anchor </a> tag, like this:

ODo%20http://bit.ly/2oxajij“><img src=”path to image here”></a>

And here’s the end result in an outgoing email!

twittershot7-300x155 Embed a TWEET THIS image + URL in your emails

Here’s what clicking on it does:

twittershot5-300x93 Embed a TWEET THIS image + URL in your emails

Here’s what happens when I click TWEET:

TA -DAA!

twittershot6-287x300 Embed a TWEET THIS image + URL in your emails

Questions?

[email protected]

My Contact Page

Other articles you might like:

-Using images: Tips to improve your SEO rankings

-Use a customer thank-you page to avoid missed opportunities

-6 Tips to Make Your Blog Post SEO Friendly

 

About the author

diane-author-300x181 Embed a TWEET THIS image + URL in your emails

I developed Image and Aspect because I believe that professionals need to have an impactful web presence. One that showcases their unique talents, skills, and abilities as well as their values and style. A presence that focuses on social engagement and connection.

I’m passionate about what I do; I like helping fellow humans, I like having all kinds of social connection with others, and I want to give back, to make the world a better place.

I do much of the designing and coding myself, and I also have a wonderful network of professionals that may contribute as well; photographers, copywriters, branding experts.

I love designing and coding beautiful, elegant and responsive web creations. I ALSO teach and help others who want to learn how to do it themselves.

‘Tips and Snips’ is my blog, and it’s full of information and inspiration to help transform any online persona from “meh” to AMAZING! Sign-up HERE to get blog posts right to your in-box every Friday! I write about Design, Marketing, Search Engine Optimization, Branding, Vlogging, Color Theory, HTML5, CSS3, Bootstrap, WordPress, Social Media…anything you’d want to know to get yourself noticed online.

Visit Image and Aspect to learn more about your web presence options

Diane M. Metcalf, M.S.

Read more

Summary
twittershot7 Embed a TWEET THIS image + URL in your emails
Article Name
How to embed a TWEET THIS button (that contains an image and URL) in an email
Description
Tutorial to create a TWEET THIS link that contains whatever image you want tweeted, and a URL to the webpage you want tweeted with it
Diane Metcalf
Image and Aspect
Imageandaspect.com