Twitter meta tags in course summary

Twitter meta tags in course summary

by Carolyn McIntyre -
Number of replies: 16

Hi,

I would like to tweet links to individual courses on my site using the Twitter Card.

However, when I add the HTML code to the course summary and save it, it disappears...why is this?

I know the Additional HTML is designed for this sort of thing, but I can't generate an image, title & description for individual courses from there...unless there is a way to do that?

Any help/suggestions would be very much appreciated.


Thanks.

Average of ratings: -
In reply to Carolyn McIntyre

Re: Twitter meta tags in course summary

by AL Rachels -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers

Hi Carolyn,

Have you heard of and tried to use Justin Hunt's Snippet tool for the Atto Editor? That's what he made the tool for, quickly and reliably adding HTML to text areas. I have had numerous times where trying to add some HTML would disappear when trying to save it. Putting it in via the Snippet tool just seems to work every time.

Just tested and it worked in a course summary, too.

Average of ratings: Useful (1)
In reply to AL Rachels

Re: Twitter meta tags in course summary

by Carolyn McIntyre -

I'm afraid using the Snippet tool doesn't work either for meta tags

In reply to Carolyn McIntyre

Re: Twitter meta tags in course summary

by AL Rachels -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers

Since Moodle would get rid of it here, could you post a picture of the what you want to add, so I know what it looks like.

In reply to AL Rachels

Re: Twitter meta tags in course summary

by Carolyn McIntyre -

This is an example of the code I'd like to add to the course summary.

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@E_learninglab" />
<meta name="twitter:title" content="COURSE TITLE HERE" />
<meta name="twitter:description" content="COURSE DESCRIPTION HERE" />
<meta name="twitter:image" content="IMAGE URL HERE" />
When you post the link to the course on Twitter, it then generates a Twitter Card with an image like this:


When I add the code to the HTML of the course summary, it then disappears.

In reply to Carolyn McIntyre

Re: Twitter meta tags in course summary

by Matteo Scaramuccia -
Picture of Core developers Picture of Peer reviewers Picture of Plugin developers

Hi Carolyn,
you should create a local plug-in (https://docs.moodle.org/dev/Local_plugins) and play with your additional headers via this plug-in (https://docs.moodle.org/dev/Callbacks, https://docs.moodle.org/dev/Output_callbacks#before_http_headers) or to create a child theme with those extra headers coded into it.

HTH,
Matteo

Average of ratings: Useful (1)
In reply to Matteo Scaramuccia

Re: Twitter meta tags in course summary

by Carolyn McIntyre -

Thanks Matteo. I've had a look at the docs on creating a local plug-in and I'm afraid my lack of knowledge makes it all a bit confusing. I wonder if you'd be kind enough to tell me which part of the documentation is relevant for what I want to achieve?

Any help would be very much appreciated.


Thanks 

In reply to Carolyn McIntyre

Re: Twitter meta tags in course summary

by Matteo Scaramuccia -
Picture of Core developers Picture of Peer reviewers Picture of Plugin developers

Hi Carolyn,
I'll try to provide you a sample for your use case, spare time permitted.

The image you'd want to use in the summary card is fixed or it depends from the each course e.g. it is the first image added in the section 0 of each course?

HTH,
Matteo

In reply to Matteo Scaramuccia

Re: Twitter meta tags in course summary

by Carolyn McIntyre -

That's so kind of you Matteo - thank you.

Yes, the image is the one added in the section 0 of each course.

Carolyn

In reply to Carolyn McIntyre

Re: Twitter meta tags in course summary

by Matteo Scaramuccia -
Picture of Core developers Picture of Peer reviewers Picture of Plugin developers

HI Carolyn,
find a first attempt in https://github.com/scara/moodle-local_twittercard: it requires Moodle 3.3+.

Please, try it in a test environment.

HTH,
Matteo

In reply to Matteo Scaramuccia

Re: Twitter meta tags in course summary

by Carolyn McIntyre -

Hi Matteo.

I apologise for my delayed reply, but thanks so much for this. I'll give it a try and let you know.

Thanks again.

Carolyn

In reply to Matteo Scaramuccia

Re: Twitter meta tags in course summary

by Carolyn McIntyre -

Hi Matteo,

I've just uploaded the Twitter Card plugin on my test site and it works perfectly.

I'm thrilled and can't thank you enough for creating the plugin.

Hopefully others will find it equally helpful.

Carolyn

In reply to Carolyn McIntyre

Re: Twitter meta tags in course summary

by Matteo Scaramuccia -
Picture of Core developers Picture of Peer reviewers Picture of Plugin developers

Hi Carolyn,
TNX for your kind words, appreciated Yes wink.

In the next week-end I'll update the code and publish it into the Moodle Directory: in the mean time, please follow the repo in GitHub.
Next planned changes:

  • added multi-language support
  • improved shortening title and description, when required
  • code refactoring to reduce code (cyclomatic) complexity

Future versions:

  • add automated (behat) tests to check for the presence of the meta tags (no changes in the features but tests)
  • review the dev specs due to the new change, doubling (280) permitted chars: not sure if this will have impacts in the lengths declared for the summary card too

HTH,
Matteo

In reply to Carolyn McIntyre

Re: Twitter meta tags in course summary

by AL Rachels -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers

Sorry Carolyn,

Those tags are about the only thing I have tried that did not work with the Snippet tool.

In reply to AL Rachels

Re: Twitter meta tags in course summary

by Carolyn McIntyre -

Yeah - I guess it's because they are meta tags. Never mind. Thanks for having a look.