Skip to content
Grav 2.0 is officially stable. Read the announcement →

Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

Support

Help with twitter cards

first-time plugins

Started by Martin 5 years ago · 5 replies · 597 views
5 years ago

Hello everybody and have a good time. I for one, am not. I must say loved Grav at first sight for its simplicity but now I'm a tad dissapointed in it. You see, I love the look and feel, but coming from WordPress it's almost just a click of a button to get the dang twitter cards.

But wait. I'm more than willing to learn. I can arrange some time for. So I googled and got to this page Blogging Metadata on <learn.getrav.org>.

Now this page said:
At the start of each of your blog posts you will want to have the following:

YAML
---
title: Blog Post Title
publish_date: Date the blog post will go live
date: Date the blog post was written
metadata:
    'og:title': Blog Post Title
    'og:type': article
    'og:description': Description of what your blog post is covering.  This will be visible when people share your post on social media.
    'og:url': The URL of the blog post
    'og:site_name': The name of the overall site the blog post belongs to. 
    'og:locale': The language your blog post is written in
    'og:image': The image you reference here will be visible when shared on social media. 
    'twitter:card' : The type of Twitter card that should be used. 
    'twitter:site' : Your Twitter handle
    'twitter:title' : Blog Post Title
    'twitter:description' : Description of what your blog post is covering.  This will be visible when people share your post on social media.
    'twitter:image' : The image you reference here will be visible when shared on social media. 
    'twitter:creator': The twitter handle of the blog post author. 
taxonomy:
    category: [Blog post category]
    tag: [Tag 1, Tag 2, Tag 3, Tag 4]
    author: Author's name
---

This text, which I foolishly edited to match my details ended up showing in my page! LOLZ!

So, kind souls of Grav, could you point me in the right direction so I can learn the basics?

Thank you very much indeed!

5 years ago

Hi @151mp137471n , I use Twitter Cards for my Quark-based Blog so hopefully a live example will help you🙂

Here is a sample piece of frontmatter:

TXT
metadata:
    'twitter:card' : summary
    'twitter:site' : @hibbittsdesign
    'twitter:title' : A Few Thoughts About... Sneak Peek at my Plans to use Discord for CMPT 363
    'twitter:description' : "A look at how I plan to use Discord as the primary communication space with my upcoming CMPT 363 classes"
    'twitter:image': 'http://hibbittsdesign.org/blog/posts/2021-08-18-a-few-thoughts-about-my-plans-to-use-discord-for-cmpt-363/screenshot.jpg'

To verify my Twitter Frontmatter I use this tool:
https://cards-dev.twitter.com/validator

So you can verify the above Frontmatter example using this Card URL:
https://blog.hibbittsdesign.org/posts/2021-08-18-a-few-thoughts-about-my-plans-to-use-discord-for-cmpt-363

Hope the above is of help!
Paul

5 years ago

Thak you for the swift reply! I'll definitely try this! CHEERS!
Now the validator shows the card but Twitter dosn't load it. I'll keep trying!

last edited 08/26/21 by Martin
5 years ago

Sometimes Twitter seems to cache cards etc... you could try again later or do a force-refresh in the Browser to see if there are any changes.

5 years ago

@paulhibbitts:

TXT
metadata:
    'twitter:card' : summary
    'twitter:site' : @hibbittsdesign
    'twitter:title' : A Few Thoughts About... Sneak Peek at my Plans to use Discord for CMPT 363
    'twitter:description' : "A look at how I plan to use Discord as the primary communication space with my upcoming CMPT 363 classes"
    'twitter:image': 'http://hibbittsdesign.org/blog/posts/2021-08-18-a-few-thoughts-about-my-plans-to-use-discord-for-cmpt-363/screenshot.jpg'

oddly enough it's working in other platforms like WhatsApp. Let's give them time. Thank you so much for your anser brother!

5 years ago

In whatsapp and the vaidator it looks wonderful. It's just oudated in Twitter, but I guess I'll havef to wait for them to cache it.Screenshot_2021-08-26 Card Validator Twitter Developers|438x130

👍 1

Suggested topics

Topic Participants Replies Views Activity
Support · by Thomas, 1 week ago
2 54 11 hours ago
Support · by Anna, 3 days ago
2 60 14 hours ago
Support · by Justin Young, 15 hours ago
1 30 15 hours ago
Support · by Duc , 1 week ago
2 65 5 days ago
Support · by Colin Hume, 1 week ago
2 57 5 days ago