• Home
  • Food
  • Blog
  • Bloggers Tools
  • Freebies
  • JS Espanol
    • Bienvenidos
    • Shoppers
    • Mi Blog
    • Muestras Gratis
    • Sobre Mi
    • Ayuda-Contacto
  • About
  • Help-Contact
    • Contact
    • Guest Posting
    • Subscriptions
    • Invite a Friend
  Joyful Savings
  • Home
  • Food
  • Blog
  • Bloggers Tools
  • Freebies
  • JS Espanol
    • Bienvenidos
    • Shoppers
    • Mi Blog
    • Muestras Gratis
    • Sobre Mi
    • Ayuda-Contacto
  • About
  • Help-Contact
    • Contact
    • Guest Posting
    • Subscriptions
    • Invite a Friend


Email this page Print Friendly and PDF


How To Add Twitter Cards To Weebly Blog Posts

9/21/2016

31 Comments

 
How to add twitter card to your weebly site
There is no secret to the fact that having beautiful pictures on your blog posts is the key to social media engagement.  Adding beautiful images to your posts is a must if you want to have successful results, and have your followers and visitors sharing your post all over their social media.

Everybody is drawn to beautiful images because they entice all senses, in addition to summarizing the whole concept of your post in one simple glance.  To me, personally, it goes like this: "if I like what I see, I'll read it".

Surveys show that posts with images get shared a whooping 87% more that posts with no images at all, so indeed it is major component of a successful post.  Crazy enough, many people share posts, just because they fall in love with the image, even if they did not completely read it.


​. . . so this is how this blog post was born:
For the longest time, I wanted to create a Twitter account for my blog.  I've heard great things about the benefits of having a Twitter account for your blog, but for some reason, it felt more complicated and intimidating (at least to me), so I kept putting in the back burner.

So, back on June 2016, I finally decided to take the plunge, and I created my 
Twitter account @JoyfulSavings, and added the Twitter share button to my blog.  I was so excited about it until I did my first Twitter share test!!!! — Immediately I noticed that the Tweet was posting but WITH NO LINKED IMAGE!  I was convinced that I was doing something wrong, because almost all my fellow bloggers had perfect Twitter shares with linked images . . . 

​In case you are not sure what I'm referring to, this is what I mean:
How to add twitter card to your weebly site

This is how my blog posts were showing on Twitter.
How to add twitter card to your weebly site

This is how I wanted my blog posts to show.

​I was so confused, that I even asked several of my blogger friends what they were doing to make the blog image to show on their Twitter shares, and they all told me that they were not doing anything special at all.

So here I go on my internet hunt to find out exactly what I was doing wrong, and after days and days of research, and confusing articles, I finally figured it out.  It was not something I was doing wrong, after all!
I know nothing at all about coding or programming of social media, but I do know for a fact that all major social media platforms like Facebook, Pinterest, Instagram, StumbleUpon, etc, automatically 'fetch' the blog post images (at least one, whenever you have them), every time your blog posts are shared on social media . . . however . . .

for some reason, Twitter has decided not to work the same way, and not to automatically fetch the image/s of your blog post.  They are the only major social media platform that I know of that does not do it!


So, how do you solve this problem?
A. For WordPress Users
​Most of my friend bloggers use WordPress, and through my research on the subject I discovered that, luckily, WordPress has a built-in plugin called Yoast-SEO, that when selected, it automatically adds/creates the Twitter Card to each blog post.  This happens so automatically, that most of WordPress users don't even realize that it's happening, or what a blessing that plugin is.  Believe or not, I've seen some WordPress bloggers not using this amazing benefit, so make sure you are not one of them!

If you use WordPress, you are one of the lucky ones, and if you are not using this plugin to add the Twitter Cards, please do — it is so simple, and the benefits of adding clickable images to your Tweets are unlimited.
​
This is how you do it in WordPress (or something very alike):
How to add twitter card to your weebly site
Make sure that the image you want to use for your Twitter Card is at least 280px x 150px.
Image that are smaller will NOT load
Image is way TOO BIG, might not load either (it happened to me once)

you might have to resize and re-post
Note: Through the extend of my research, and up to this time, only WordPress was mentioned as a platform that works with Yoast-SEO plugin, which automatically creates the Twitter Card for each post.
Unfortunately, ​through my research, I also discovered that Yoast-SEO Plugin is only designed to work with WordPress (as far as I read).

​I use Weebly as my blog platform, and at this point there is no available plugin to automatically create the Twitter Cards on my blog posts, so it has to be done manually.

Weebly is an amazing platform, and the cost of using and hosting a blog with them is incredibly low, compared to any other blog platform.  However, since they are not a 100% blog-dedicated, there are certain limitations on what's available, though they are growing and making great additions every day!

For me, not having an available plugin that automatically adds Twitter Cards to my blog posts is not a strong-enough factor to leave them, because pretty much everything they do not offer within their platform, I can easily get through free third party apps.
Even though I wasn't able to find a Twitter Card plugin that works with Weebly, after several attempts, trials, and errors, I finally figured out a 2 super easy ways to add the Twitter Cards to my blog posts.  It took me forever to find a way around it, so I decided to write this post to show you how to do it, so here it goes:
B. Non-WordPress: how-to manually add Twitter Cards to your blog posts
Notes:
  •  If you are not sure if your blog platform has a plugin that creates the Twitter Cards for you: 1) consult your customer service  2) do a test by sharing one of your own posts with images on Twitter, or 3) do a Card Validation, as explained on item 3 below —  If there is an  available plugin, your tweeted post will load a clickable image.
  • ​I have obviously tested this method only on Weebly, but I would dare to say that it would also work on any other website that 1) allows embedded codes and/or 2) has an Image Caption field that accepts html codes. — Don't be afraid to test his method on any other website, after all, if it does not work, all you have to do is remove the codes.
First, let's explain the Meta Tags:
The meta tags below, are a set of codes that allow Twitter to load an image, title, and description of your post when it is shared on Twitter; this is what is called Twitter Cards.  It sounds complicated, but luckily it is pretty much a fix template, with the exception of the red-marked sections, which you have to update with the specific information of each blog post.

To make it easily accesible, I copied the template and keep it handy on a Word file, and I simply update it with the information of each new post I need to create a Twitter Card for.  (Once you type you Twitter Handle on the template, you can remove the red font, as you won't have to change it anymore, unless you have different Twitter accounts).
Meta Tags Template
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:description" content="Description of the post under the title" />
<meta name="twitter:title" content="Post title" />
<meta name="twitter:site" content="@YourTwitterHandle" />
<meta name="twitter:image" content="http://Image address of the image you want to use" />
<meta name="twitter:creator" content="@YourTwitterHandle" />
>>To find the image address, right click on the image you want to use, and click on 'Copy Image Address'.
Now, let's create the Meta Tags
  • Update the template above, substituting the red-marked sections with your current blog post information (make sure you leave everything else intact)
  • Once updated, you have 2 options to embed the tags into your post:
1.  The Embed Code Element
  • Drag the Embed Code Element into your blog post
  • Copy and paste there the whole updated set of Meta Tags.  To make things simple, place the Embed Code right at the very top of your blog post.  That way it will be easy to find it the event you have to make any changes at a later time
  • Update and Publish your blog post
  • Validate your Twitter Card (see instructions below)
2. The Image Caption
  • Right click on the first image of your post*
  • Scroll down and click on Caption
  • Copy and paste there the whole set of updated meta tags
  • Close the image
  • Update and Publish your post
  • Validate your Twitter Card (see instructions below)​
​*(You can really place the meta tags in any of images, but to me, it's just easier to copy them on the first image of your blog. However, Twitter will show the image for which you used the image address for, regardless of which image you choose to save the meta tags in).
3.  Validate your Twitter Card
Once the post gets published, you need to validate your twitter card to make sure it is working properly.  Go to Twitter Card Validator here, or click on the image below.  The Card validator screen looks like this:
How to add twitter card to your weebly site
  • Type the url/link address of your blog post on the Card URL field
  • Press on Preview Card
  • Once you do that, you should see to the right of the screen the Card Preview, and how your Card will look like when someone shares your post on Twitter

Sometimes you might have to try the preview a second time for Twitter to pick up the card.  If it does not show by the 2nd or 3rd attempt, there might be something wrong with the code, and you might have to review it.

That's it . . . there you have how to add Twitter Cards to your Weebly Blog Post, as easy as 1,2,3!

​From now on, whenever your blog post is Tweeted/Shared, it will load the image, title, and description of the post, and when users click on the image, they will be taken directly to your website.
Other Notes:
  1. You can place a general Twitter Card on your main Settings> SEO> Header Code, and that Twitter Card will apply globally to all
  2. pages on your website, even the blog posts, when there is no other Twitter Card placed on a specific blog post
  3. This one is awesome Â» After you place a general Twitter Card (1. above), you can still add a more specific Twitter Card on any of your pages as needed.  Simply create a Twitter Card for that page, and:  a) go to Pages   b) go to the page you want to edit   c) go to SEO Settings, and   d) paste the Meta Tags on the Header Code space.  Make sure your page is not set to â˜‘ Hide this page from search engines, or the Twitter Card will not be created.  (You can check that right at the bottom, under the Header Code section).
  4. Once a Twitter Card has been placed on any individual Blog Post, it will override the general Twitter Card explained on #1 above.  (I tried this once on the main page of one of my blogs, and it did not work, but you are welcome to try it, in the event this has changed since then).
Your Turn!
Are you a Weebly user, and you know any other tricks that can help other Weebly users, I would love to hear from you on the comments below!
Article link: http://www.joyfulsavings.com/blog/how-to-add-twitter-cards-to-weebly-blog-posts




It was wonderful to have you visiting, and to be able to share this post with you! Feel free to use the Share Buttons, to share this post with friends and Social Media! Thank you for visiting, and I look forward to seeing you again!

Love, Jacky! ♥

Unless otherwise noted, this article is original and property of Joyful Savings, and it is Copyright® protected. Click here to learn how to easily share it!
Picture
Enter for the chance to WIN!
Are you a Blogger like me?
Enter your Blog address; I'd love to connect with yours too!
Yes, I Want to Subscribe!
31 Comments
Leanne link
10/16/2016 08:07:26 am

Thank you Jacky for your in-depth instructions on creating twitter cards for Weebly. You are so thorough in your tutorial which is so appreciated. I tried pasting the code into my site Header (as there are other instructions I had from Weebly about that, which worked for me).
But I want to try to make it work within the captions of the pictures of the blog posts, as I think that would be more effective.
Going to give it all a try now. It has worked in the Twitter Card Validator (another handy thing you provided!) but I have yet to actually do a real tweet with my new twitter card. Thanks for ALL your help!

Reply
Joyful Savings
11/15/2016 01:30:17 pm

You are welcome Leanne, it was my pleasure to spare users the headache of figuring it out themselves.

Please check the post again, as I added some clarifying notes on the difference between placing the Twitter Card on the site main Header Code, and placing it on the Blog Post itself, as I can see where the confusion may arrive.

Thank you for stopping by!

Reply
Sue @ Frugal Gifts 2 Give link
1/12/2017 01:19:58 pm

Thank you for this Jacky! I didn't know what I was doing wrong! I'm still trying to learn how to do different things and sometimes it becomes overwhelming. But, with sites like yours, I'm learning! Thanks again!

Reply
Joyful Savings
1/12/2017 08:48:41 pm

You are more than welcome Sue! This post is one of my most visited, and it has an #1 - 5 google rank. I am so glad I can help with this tutorial. It took me weeks to be able to figure out how to add Twitter Cards to my site. Thank you for your kind comment. It means the world to me to know I can be of help!

Reply
Sheri Shannon link
3/23/2017 12:16:38 pm

Thank you soooo much! I couldn't figure out why images weren't showing on Twitter, and your article has helped me immensely! Weebly should link this article on their forum.

Reply
Joyful Savings
3/27/2017 09:12:41 pm

You are more than welcome Sheri! — I am so happy that out of my frustration, I created this post, and that I have been able to help so many people. This is one of my best ranked and most visited posts, thought not everyone leaves a comment.

Thank you for your kind words, and for taking the time to leave a comment; I really appreciate that.

I actually submitted this post to Weebly, but have not heard from them yet.

Great to connect with you! ♥

Reply
Holly S
5/2/2017 06:11:06 pm

What code do you add for the general Twitter Card?

Reply
Joyful Savings
5/2/2017 08:34:35 pm

I use the same Meta Tags Template, Holly.

Reply
Holly S
5/3/2017 02:13:54 pm

Thanks!

Daneen Rogers link
6/15/2017 01:40:28 am

This worked perfectly, thank you! I have a dumb question though...if I post a bitly link and that's shared, do the twitter cards still show up? I'm going to assume yes, but wondered if you had a different experience. Thanks again!

Reply
Joyful Savings
6/15/2017 10:27:43 am

I'm glad my article was helpful to you Daneen. Yes, the bitly links perfectly as long as the meta tags were set correctly. I use bitly links all the time, and the image shows perfectly on Twitter. Have a great day!

Reply
Lisa link
7/24/2017 01:09:53 am

Your instruction is great and has helped fix my Weebly site's general Twitter Card. Unfortunately, placing the meta tag code on individual pages are not overridinging the one on my main SEO> header page. Nor is the twitter card code I tried placing in an individual blog post. Wondering why this might not be working? Any ideas. I have deleted all twitter card meta tags from everywhere except the main SEO> header Thanks! Lisa

Reply
Joyful Savings
9/20/2017 10:08:16 am

I wish I could tell you why, but I can't. The individual meta tags on individual pages do override the main meta tag for me (and I retested it just in case Weebly took some feature away), but it is still working. So are the meta tags for the blog posts.... Sorry, but I have no idea why it's not working for you. You might try to check the size of the image, as there are some min. and max. size requirements: (https://dev.twitter.com/cards/types/summary-large-image). Good luck!

Reply
Meredith link
2/25/2018 08:48:42 am

I'm having a similar issue. I have twitter cards in some of my blog posts. I'm also trying to put a twitter card on my blog's home page. When I put it in the SEO Header Code, the twitter card of one of my blog posts overrides it. When I move it to an "embed code" box on the blog sidebar, it overrides all individual blog post twitter cards.

Reply
Lisa link
7/24/2017 01:31:40 am

Hi again, Ok so I was able to get a blog post specific Twitter Card working partially buy embedding code into the beginning one post. I say partially because the copy shows correctly, but not the image. This is the post I am testing:
http://www.youthfulnest.com/blog/upcycled-is-just-our-speed. Any ideas why the code for the image would not being pulling it to the Twitter Card. Validation says it's all good.

INFO: Page fetched successfully
INFO: 21 metatags were found
INFO: twitter:card = summary tag found
INFO: Card loaded successfully

Thanks again for any thoughts on blog or page cards.

Reply
Joyful Savings
9/17/2017 07:41:30 pm

Hi Lisa,
I wish I can tell you why, but I don't know why it pulls the image on the validation, but not on twitter. I just tested the link, and it did the same for me.

Reply
Glutenacious Life link
9/17/2017 10:25:48 am

Thank you Jackie for this step-by-step guide! Weebly needs to step forward on their blogging features. I follow your instructions and seems to be working, except that like Lisa's comment, I cannot get the image on the card, I get a " is whitelisted for summary_large_image card" message. Any clues on this?

Reply
Joyful Savings
9/17/2017 07:47:40 pm

Hi,
If the image does not pull when you do the validation, you might have to check the size of the image, because there is a min. and a max. (https://dev.twitter.com/cards/types/summary-large-image).

Reply
Glutenacios Life link
9/19/2017 08:34:41 am

Hi, thanks for your quick reply. I have indeed verify those requirements and my images should be fine, that's why I don't understand why they are not showing.

Darren Obrigkeit link
10/19/2017 05:56:20 am

Thanks for the update. It was a big help for reference and helped identify the ultimate the issue for my twitter card: " are not always the same depending on the language settings on your computer, so be sure to check quotation marks!

Reply
Joyful Savings
2/25/2018 10:16:25 am

You are welcome Darren!

Reply
Keely link
12/4/2017 09:09:42 pm

THANK THANK THANK you for publishing this. A quick series of google searches landed me here and your post was MORE than easy to read, follow, and apply. My tired mama eyes are so grateful!!!

Reply
Joyful Savings
2/25/2018 10:14:16 am

Your are WELCOME WELCOME WELCOME Keely. It is really satisfying to know I saved so many from the frustration I went through!

Reply
Lisa
1/31/2018 04:14:51 pm

Hi,

I enjoyed this post. I am just planning on starting a blog using Weebly.

I am interested in those share this/tweet this buttons that some bloggers have in the middle of their article. It may be a specific sentence that they are encouraging you to tweet. Do you know how that works on Weebly?

Thanks in advance.

Reply
Joyful Savings
2/25/2018 10:21:53 am

I think once I was able to create one of those, but I would have to dig it out, because I can't remember where I placed it.

At that point I decided not to use it anymore, just because I place an image card on every post I make, and when you place one of those "retweet this" codes, if you have an image code already, it will still pull the image along with the "retweet this" text, so it wasn't working for me, because I'm a very visual person, and I do prefer images over text.

If I manage to find the code, I'll make a separate post, and I'll announce it here on this post.

Reply
Joyful Savings
3/14/2018 02:40:45 pm

Hi Lisa,
Based on another question that I was asked on this subject, I want to clarify on my answer above.

If you have created a Twitter Card for your post, the 'Tweet This' code will pull that Twitter Card image *ONLY* if you include the post link on the 'Tweet This'. However, you can always create the 'Tweet This' *WITHOUT* the post link, if you don't mind readers not to be able to read more about what you just tweeted about.

Reply
Diana
4/27/2018 12:07:05 am

Thanks! Everything works except I when I leave spaces in descriptions then it only shows the first word. Any idea why?

Reply
Joyful Savings
4/27/2018 12:43:16 pm

Hi Diana,
I can't think of any reason why that is happening. Please double check and make sure you are placing the whole description within the quotes as: "This is the Description"

The whole sentence has to be inside the quote marks.

On the above Mega Tags Template, nothing should be changed, with the exception of the fonts in red.

Hope that works!

Reply
George
9/8/2018 03:55:49 pm

In case you're still searching for an answer on I had the same problem and found that I'd mistakenly deleted the original "straight" quotation marks at the beginning and end of the description and had replaced them with "curly" quotation marks.

The type of quotation mark shown in the embedded code above is the kind that works.

Brandon Jones link
12/9/2018 04:04:03 am

Thank you so much! I was getting really frustrated when sharing to Twitter just gave me a bit of my post's opening and a link. Thanks to your pre-made meta tags section, I was able to give a post a Twitter card on my first attempt!

Reply
Brandon Jones link
12/9/2018 04:06:07 am

Whoops, I put my website incorrectly for my last comment.

Reply



Leave a Reply.

    Picture

    Welcome to
    your Blog!

    I'm so thrilled you found me, and that you are enjoying m Tips, Ideas, and Advice to help you save Time and Money!.
    Here's a little more
    about me!

    Categories

    All
    Advice
    Bloggers Tools
    Christmas
    Cleaning
    Coupons
    Crafts
    Decoration
    DIY
    Graduation
    Hacks
    Happy New Year
    Laundry
    Money & Finances
    Organizing
    Recycle Reuse Repurpose
    Safety
    Save Money
    Save Time
    Tips & Ideas

    RSS Feed





Home  |   About  |  Help/Contact

​It is a pleasure to have you visiting JoyfulSavings!  I hope that you enjoy your visit as much as I enjoy yours, and that you decide to visit again!​

I would love to share my posts with you directly to your inbox.  Once you subscribe to my Email List you'll start getting them without missing a thing . . . I look forward to see your name added to my list!

Copyright© 2019
 Privacy Policy

  • Home
  • Food
  • Blog
  • Bloggers Tools
  • Freebies
  • JS Espanol
    • Bienvenidos
    • Shoppers
    • Mi Blog
    • Muestras Gratis
    • Sobre Mi
    • Ayuda-Contacto
  • About
  • Help-Contact
    • Contact
    • Guest Posting
    • Subscriptions
    • Invite a Friend