Meta_tags plugin - Open Graphics Markup

Third Party Plugins to CMSimple - how to install, use and create plugins

Moderator: Tata

Post Reply
lianergoist
Posts: 20
Joined: Sun Mar 18, 2012 5:34 pm
Location: Denmark
Contact:

Meta_tags plugin - Open Graphics Markup

Post by lianergoist » Tue Nov 17, 2015 10:07 am

Hello

To make some better looking links in Facebook, we need to add some extra meta tags

https://developers.facebook.com/docs/sh ... ers#markup

I started to hack the Meta_tags plugin to include the extra meta tags, but ended up killing it and locking myself out of cmsimple... :oops: Had to reinstall the plugin to get it working again - my php-skills are a bit rusty, I guess. :roll:

Can someone here give me some hints on what to do to add some extra meta tags to the plugin?

Thanks,

Thomas Jensen, Denmark

EDIT: I have found this page: https://developers.facebook.com/tools/debug/og/object/ (you may need to log in) where you can see how facebook see your pages. It seems like they do a pretty good job without these special Open Graphics meta tags, but og:image need to be set. I think extending the meta_tags plugin to include this would be a good thing.

Holger
Site Admin
Posts: 3470
Joined: Mon May 19, 2008 7:10 pm
Location: Hessen, Germany

Re: Meta_tags plugin - Open Graphics Markup

Post by Holger » Wed Nov 18, 2015 8:58 am

Hi Thomas,

it schould not be a big deal to add some fields to the plugin. So I've checked your posted link and now I'm a bit confused about the lots of possible fields and combinations :? .
So IMHO it's not the best solution to add only one or two new fields.
It would be better to write a new plugin to add a flexible amount of fields, selectable with a combo-box or so... But that's a lot of work.

A quick solution would be just adding only one textarea instead a number of fields. This way it becomes possible to add every tag, script or other markup that you need, but OTOH you have to write the complete code with correct syntax by yourself -- not really comfortable... :| . And even here it's maybe the best to put this into a new plugin instead of hacking the Meta-Plugin.

What do you - and others - think?

lianergoist
Posts: 20
Joined: Sun Mar 18, 2012 5:34 pm
Location: Denmark
Contact:

Re: Meta_tags plugin - Open Graphics Markup

Post by lianergoist » Wed Nov 18, 2015 10:34 am

Holger wrote:
What do you - and others - think?
I see your point. A rewritten plugin is probably best. I think a solution where the user can add fields dynamically would be cool - for example a button the user can click to "add new meta tag" and from a drop-down list choose the tags. To help the user, a short text could suggest what tags to include. On the admin page for the plugin, it should be possible to add and remove tags from the drop-down list.

Unfortunately, I don't have the skills to write it myself.


Thomas Jensen
www.sejlgarnet.dk

PS - In the mean time - if someone can make a quick and dirty hack and add a og:image field to the Meta_tag plugin, I would really like to get a copy.

Holger
Site Admin
Posts: 3470
Joined: Mon May 19, 2008 7:10 pm
Location: Hessen, Germany

Re: Meta_tags plugin - Open Graphics Markup

Post by Holger » Wed Nov 18, 2015 9:18 pm

Hi Thomas,
lianergoist wrote:PS - In the mean time - if someone can make a quick and dirty hack and add a og:image field to the Meta_tag plugin, I would really like to get a copy.
Hmm, not such a good idea, because you have to hack it again and again with every new Update...

So I've made a "quick and dirty ;) OG-Tags-Plugin" : http://holgerirmler.de/temp/og_tags_0.1.zip

Just install the plugin and configure the properties you want to use in your pages by plugin-configuration. It'll add a new PageData-Tab with the corresponding fields above the editor. If you add content to a field, it'll result in a new tag in the head-section of the page. Empty fields get ignored.

Please drop me a line, if it works for you.
And if there's some interest, we could maybe extend the plugin to add things like default values for some fields (e.g. og:title -> Page-Heading as default, if the user leaves this field empty if it exists).

Holger

PS: AFAIK - and as written here - you have to extend the <html> - Tag in your template to comply the Open Graph Protocol

Code: Select all

<html prefix="og: http://ogp.me/ns#"> 

lianergoist
Posts: 20
Joined: Sun Mar 18, 2012 5:34 pm
Location: Denmark
Contact:

Re: Meta_tags plugin - Open Graphics Markup

Post by lianergoist » Thu Nov 19, 2015 5:23 am

Holger wrote: Please drop me a line, if it works for you.
The plugin works perfect! This page https://developers.facebook.com/tools/debug/og/object/ show the correct image, title and description, but when post the link on facebook, the title and description is not shown. I guess it could be due to some cache or proxy or something somewhere in the system, and maybe it will work later.

Thanks a lot for fixing this! I wish I could help you back somehow, but I am a lousy programmer, so I am afraid I cannot help much. But feel free to ask if you need any help or anything.

Thomas
--
Thomas Jensen, Denmark

Holger
Site Admin
Posts: 3470
Joined: Mon May 19, 2008 7:10 pm
Location: Hessen, Germany

Re: Meta_tags plugin - Open Graphics Markup

Post by Holger » Mon Nov 23, 2015 11:11 pm

Hi Thomas,
lianergoist wrote:Thanks a lot for fixing this!
You're welcome!
lianergoist wrote:The plugin works perfect! This page https://developers.facebook.com/tools/debug/og/object/ show the correct image, title and description, but when post the link on facebook, the title and description is not shown. I guess it could be due to some cache or proxy or something somewhere in the system, and maybe it will work later.
Hmm, IMHO I think if you want to use those additional markup, you should respect the specification and provide at least the minimum four required tags:
http://ogp.me wrote:The four required properties for every page are:

og:title - The title of your object as it should appear within the graph, e.g., "The Rock".
og:type - The type of your object, e.g., "video.movie". Depending on the type you specify, other properties may also be required.
og:image - An image URL which should represent your object within the graph.
og:url - The canonical URL of your object that will be used as its permanent ID in the graph, e.g., "http://www.imdb.com/title/tt0117500/".
Holger

Post Reply