Nomadic Backpacker
  • Home
  • ABOUT
  • VISAS
    • Visa Sierra Leone
    • Visa Vietnam
  • CONTACT

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.
Picture
​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.
How to add Twitter Cards to Weebly
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)
​
<meta name="twitter:card" content="summary_large_image">      
<meta name="twitter:site" content="@yourtwittername">    
<meta name="twitter:title" content="PostTitle">  
<meta name="twitter:description" content="PostDescription">    
<meta name="twitter:image" content="ImageURL">

​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.
how to add Twitter Cards to Weebly
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: 
Twitter Cards Weebly
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).
Picture
Picture
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.
Picture
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. :))
​
Tweet

    Blogging with Weebly Post Stream


    • Awesome Image Caption Overlay

    • How to add Twitter Cards to your Weebly blog

    • My favourite apps on Weebly

    • The importance of adding Alt Text to your images

    • Time to update your Chrome Browsers again

    • Where to paste the verification codes for Google Search Console and Google Analytics on Weebly

    • How to customize the text of previous and next posts on Weebly

    • How to customize the read more break on Weebly

    • How to get Google to index your pages on Weebly

    • Weebly is no longer supported by Internet Explorer (IE11)

    • Is your browser up to date?

    • How to change Blog Post Titles to h1 tags on Weebly

    • How to add a h1 tag on Weebly

    • How to block someone from downloading your images on Weebly


    follow me on Twitter

Powered by Create your own unique website with customizable templates.
  • Home
  • ABOUT
  • VISAS
    • Visa Sierra Leone
    • Visa Vietnam
  • CONTACT