General developer forum

Twitter meta tags in course summary

 
Picture of Carolyn McIntyre
Twitter meta tags in course summary
 

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: -
Picture of AL Rachels
Re: Twitter meta tags in course summary
Group Core developersGroup Particularly helpful MoodlersGroup Plugin developersGroup 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)
Picture of Carolyn McIntyre
Re: Twitter meta tags in course summary
 

Thanks Al - I'll give it a go.

 
Average of ratings: -
Picture of Carolyn McIntyre
Re: Twitter meta tags in course summary
 

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

 
Average of ratings: -
Picture of AL Rachels
Re: Twitter meta tags in course summary
Group Core developersGroup Particularly helpful MoodlersGroup Plugin developersGroup 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.

 
Average of ratings: -
Picture of Carolyn McIntyre
Re: Twitter meta tags in course summary
 

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.

 
Average of ratings: -
Picture of Matteo Scaramuccia
Re: Twitter meta tags in course summary
Group Core developersGroup Particularly helpful MoodlersGroup 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)
Picture of Matteo Scaramuccia
Re: Twitter meta tags in course summary
Group Core developersGroup Particularly helpful MoodlersGroup Plugin developers

Oops... wrong link, https://docs.moodle.org/dev/Output_callbacks#before_standard_html_head, HTML headers and not HTTP headers wink.

HTH,
Matteo

 
Average of ratings: -
Picture of Carolyn McIntyre
Re: Twitter meta tags in course summary
 

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 

 
Average of ratings: -
Picture of Matteo Scaramuccia
Re: Twitter meta tags in course summary
Group Core developersGroup Particularly helpful MoodlersGroup 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

 
Average of ratings: -
Picture of Carolyn McIntyre
Re: Twitter meta tags in course summary
 

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

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

Carolyn

 
Average of ratings: -
Picture of Matteo Scaramuccia
Re: Twitter meta tags in course summary
Group Core developersGroup Particularly helpful MoodlersGroup 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

 
Average of ratings: -
Picture of Carolyn McIntyre
Re: Twitter meta tags in course summary
 

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

 
Average of ratings: -
Picture of Carolyn McIntyre
Re: Twitter meta tags in course summary
 

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

 
Average of ratings: -
Picture of Matteo Scaramuccia
Re: Twitter meta tags in course summary
Group Core developersGroup Particularly helpful MoodlersGroup 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

 
Average of ratings: -
Picture of AL Rachels
Re: Twitter meta tags in course summary
Group Core developersGroup Particularly helpful MoodlersGroup Plugin developersGroup Testers

Sorry Carolyn,

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

 
Average of ratings: -
Picture of Carolyn McIntyre
Re: Twitter meta tags in course summary
 

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

 
Average of ratings: -