How to add Twitter Cards to your Weebly blog

27/10/2019

Boost potential Twitter traffic by adding Twitter Cards to your Weebly blog.

Twitter Cards are missing from Weebly. That means when you or anyone else wants to share your post by clicking on TWEET, only the posts url will be shown.

When what you really want, is for an image to be attached to the Tweet and when anyone clicks on the image, they will be taken to your site.

As it stands at the moment when only the url is shown, you must manually add an image but when you or anyone else clicks on the image, all it does is enlarge the image. So a massive loss of potential traffic.

I searched the Weebly community forum. I had seen posts about this happening happening for some when sharing on Facebook. Digging a little further, I found a post regarding sharing posts on Twitter, which lead me to 2 websites which detailed how to add Twitter Cards.

They had not come up with the hack themselves so I don't feel bad in potentially copying someone's idea. It is in fact detailed on Twitter.

The solution may seem a little complex but it really is quite simple.

Drag the Embed Code element to your page, right at the top of the page or blog post is as good a place as any. It does not show up on live-view.

Add the following meta code to the Embed Code element, replacing the text in blue with your own details. (Note. I have disabled the right click facility so you cannot copy the meta code directly. Not very helpful I know but it's for my own security against lowlifes who like to hack websites. You can get the meta code below from developer.twitter.com)

To find the url of the image you have loaded on your page already and the one you want to appear on Twitter, just right click on the image and copy the image address.

This will be something quite complex:

https://9956464097-9025545268687165.preview.editmysite.com/uploads/9/8/5/9/9946509/image-name.jpg

Using the example above, take: /uploads/9/8/5/9/9946509/image-name.jpg and put it on the end of your website url like a so:

https://yoursitename.com/uploads/9/8/5/9/9946509/image-name.jpg (obviously adding your own site name and image id).

Now replace ImageURL in the meta code with the

https://yoursitename.com/uploads/9/8/5/9/9946509/image-name.jpg

So my complete 'meta code' will be like this:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@yourtwittername">
<meta name="twitter:title" content="How to add twitter cards to your Weebly blog">
<meta name="twitter:description" content="When you post on Twitter, you will ideally want an image to be displayed and when someone clicks on the image they will be taken to your site">
<meta name="twitter:image" content="https://yoursitename.com/uploads/9/8/5/9/9946509/image-name.jpg">

More help from Google about image URLs you can find here.

And now, publish your post and page.

The next step is to use Twitter's Card Validator.

Enter the url of the blog post or page of your blog that you want to put on Twitter and click, PREVIEW CARD. And here is what you will get:

I am using the TwitterButtons app from Weebly's app center. I dragged the TWEET element to my page, added the pages URL and page title. (Enabling the Twitter share option on Blog settings does don't seem to work so use the TwitterButtons app on blog pages as well as standard pages).

Now on your page in LIVE VIEW, click TWEET and the post will be then embedded on your Twitter feed. The image will be included, and when any interested party clicks on the attached image, they will taken to your blog page. Others can also share your post on their Twitter page when they click on the Tweet icon on your page.

Here is my Tweeted post following the guide above.

Thanks for reading. If you have any further Qs you can leave a message via DISQUS below. And you can SHARE this post by hitting the TWEET icon below. :))