How to Add Images to Your Tweets Using Weebly

Rewritten: August 31, 2024

Isn't it frustrating when you want to share your latest post on Twitter and are shown this?

When what you really want is this:

Adding an image to your Tweet can substantially drive more traffic to your website.

This is a problem when using Weebly. Images are NOT automatically added when you want to tweet your latest post on Twitter and you are losing potential traffic, with every tweet.

So here is the solution: How to get the (clickable) image to show up on Twitter?

You need to add something known as Twitter Cards, despite the fact that it's now called 'X'.

You must embed Twitter Cards code, developed by Twitter, on each of your posts if you want that all important image to appear.

And I will talk you through the process in these easy to follow stages:

Drag the Embed Code element to your page

I assume you are familiar with how to add various elements to your Weebly blog. Just drag the Embed Code element to your page. Anywhere is good.

This is what you have once you have dropped the Embed Code element on to the page:

Adding the Twitter Cards Code

There are 2 different codes:

Summary Card
Summary Card with Large Image

The Summary Card gives you a little thumbnail image as shown above. Summary Card with Large Image gives you a larger image.

So here are the codes that I use on the Nomadic Backpacker blog. Obviously, the text in red is unique to my blog. You need to add your own twitter handle, title and description and the image URL, which is the next part I need to share with you.

Twitter Cards: Summary Card Code

Twitter Cards: Summary Card with Large Image Code

How to find and add the image URL?

So when the photos are all embedded on your page, hit PUBLISH, and then you need to left-click on the image you want to have on the tweet and click on Open Image in New Tab.

This naturally opens the selected image in a new tab, and the URL for the image will be like this:

https://XXXXXXXXXXX.preview.editmysite.com/uploads/X/X/X/X/XXXXXXX/twitter-cards-weebly_orig.jpg

I have blocked out my own code but you need to copy just the last part of the code: "uploads/etc-etc.jpg"

And add that to the last part of the Summary Card:

<meta name="twitter:image" content="https://www.nomadicbackpacker.com/uploads/X/X/X/X/XXXXXX/free-atm-withdrawals-el-salvador_orig.jpg">

You do not paste the preview.editmysite part, just the uploads/X/X/X/X/XXXXXX/free-atm-withdrawals-el-salvador_orig.jpg

Then hit PUBLISH again.

How to Validate the Twitter Cards Code

In 2023, Twitter changed the way it worked ("Card preview Has Moved to Tweet Composer") but you still need to go to this page:

https://cards-dev.x.com/validator making sure you are signed in to your Twitter account.

You need to enter the URL of the blog page/post as indicated below:

Click on Preview Card and the image will be processed. This confirms the image has been added:

If you have done something wrong, most likely with the image URL, there will be an error message in red.

And then you just Tweet the blog post as per normal. Sometimes it is a bit slow to load the image.

Yes, it's pretty long-winded but if you follow the steps above, and I have been doing this successfully for 5 years, your tweets will now have an image shown and the image when clicked will take the viewer to your blog page/post.