Log in | Register
  1. Forum
  3. Discontinued Products
  5. JFBConnect v8.x Support (Joomla 3 Only) (CLOSED)
  7. Open Graph plugins - understanding

Topic-icon Open Graph plugins - understanding

Active Subscriptions:

None
3 years 5 months ago #66783 by joomleb
Hi guys,

1 - we need new Open Graph plugins to perform a good integration on our projects, the most urgent should be an Open Graph "Joomla System" plugin where we can select each Menu Item and configure the Open Graph objects - this plugin will give us a way to set OG to the Register / Login pages and also the OG on all others menu items cases not covered by others specific plugins.
Please, Can the use of "Custom Objects" plugin be the case ?
How the "URL Query Parameters" should be added ?
If the "Custom Objects" is not the case, Please, Can you consider this feature for next release ?

2 - We are testing the Open Graph feature internal solutions of Solidres - HikaSHop / HikaMarket - DPCalendar for their contents and SP Page Builder for its pages.
Please, What we have to pay attention to not have the Extensions plugins that conflicts with Social Meta configuration ?
We are not understanding the "Default" / "Skip" settings and documentation is not helping us.
Being that JFBConnect default configuration settings will be used "in case a tag can't be set for a page", Does JFBConnect will take care of the 3rd Party Extensions Open Graph plugins ? Please, Can you help on it ?

3 - We are and we can use as "default" Open Graph settings provided by the Helix Ultimate template feature. From a technical point of view, Is it better to use that default OG or the JFBConnect OG default settings ?
The topic has been locked.
Support Specialist
3 years 5 months ago #66787 by alzander
1) JFBConnect will automatically use the meta title and description tags for pages as the open graph tags. For pages like Login / Register, which are transient and not really 'content' pages, I wouldn't recommend wasting any time setting up Open Graph tags for those pages. The main pages that should have Open Graph tags are the content pages of your site that you feel users (or yourself) will share. Maybe you're doing something different, but the login or register pages of most sites aren't popular pages from a traffic driving standpoint.
With that said, yes, the Custom Objects plugin can be used, but may get tedious to add a new one for each page. However, if you want to, you'd add the specific query parameters for a page like login as:
option=com_users
view=login
You could use just the Itemid or other unique elements as well. The less specific you are, the broader the object would apply. So, to cover both login and register (and any other User component functionality), you could use:
option=com_users
Then, whatever tag you apply would be used on all com_users pages.

2) The 'skip' tag list is used if you have another extension that is setting Open Graph tags as well. So, if you have a blog extension, you may want JFBConnect to generate the title and description, but have the blog extension set the author information. You would need to add 'author' to the skip tags section to ensure that author isn't ever set by JFBConnect.
Similarly, you can skip tag generation in entire components. So, if DPCalendar sets their own Open Graph tags and you'd prefer to use those, skip DPCalendar in JFBConnect and you'll still have Open Graph tags in other components on your site.

3) This is completely up to you. I don't know how every template or extension sets Open Graph tags, so it's a matter of what is generating them best and/or most customizable for you to set.

I hope that helps explain, but if you need anything else, please let us know.

Thanks,
Alex
The topic has been locked.
Active Subscriptions:

None
3 years 5 months ago #66789 by joomleb
Hi Alex,

1 - Many thanks for explications. We are agree. Unfortunately we have, it is much worse than with babies, we have to share the Registration and Login pages directly through WhatsApp / Messenger, and we have to use different colours / images to teach/show that they are two different actions, ... they don't read anything, we are in a very sad world. Imagine that, even if repeated a thousand times on the site, on the registration page we must add: "Forever 100% Free Registration"
About the "URL Query Parameters" field, as fa as I understand it is not the "Menu Item > Link", Right ?

So, if link is: index.php?option=com_users&view=login I have to input in column:
option=com_users
view=login

If link is: index.php?option=com_users&view=registration I have to input in column:
option=com_users
view=registration

Custom Object Type
It should be better to have a way to select a Menu Item page and so, as you done for the Article plugin, a way to recovery some information directly from it, and more fields settings like:

Title Type: Menu Item Title / Page Title
Description Type: Menu Item Meta Description / ....
Description Length: ...
Custom Image Path: ...
Image Alt: ... (<meta name="og:image:alt" content=" ... "/> it is a requested field from Twitter ”twitter:image:alt", but Twitter should be able to use the generic) - This is a missing also into the Article Plugin (Image Alt Text)

I suppose that Plugins are grabbing the others requested fields from Social Meta > Configuration:
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:site" content="@..."/>
Am I right ?

Are plugins also grabbing from JFBConnect configuration also the requested one from Facebook ?:
<meta property="fb:app_id" content="25....xx"/>

This is a useful article on How to have all the indispensable meta tags with the minimal effort

2 - I'm going to test it, thanks.

3 - So, in case I'd like to use the template OG I should leave "Social Meta > Configuration > Default: empty", Am I right ?
The topic has been locked.
Support Specialist
3 years 5 months ago #66798 by alzander
1) Correct. That's how you should put the parameters in there.

2)

It should be better to have a way to select a Menu Item page and so, as you done for the Article plugin, a way to recovery some information directly from it, and more fields settings like:

Every menu item you create has an 'ID'. You can use that in the Custom Objects plugin by using:
Itemid=1234
Then, any pages that use that Itemid will have the custom object tags set for them. That's good for a blog.. you create a menu item to a Blog View. Each article from that Blog View will also have the same Itemid, so you can set tags that would work on the blog category view and each item.

I suppose that Plugins are grabbing the others requested fields from Social Meta > Configuration:

Correct.

Are plugins also grabbing from JFBConnect configuration also the requested one from Facebook ?:

Yes, if you have a Facebook App configured, we'll automatically set the app_id tag as Facebook suggests.

So, in case I'd like to use the template OG I should leave "Social Meta > Configuration > Default: empty", Am I right ?

That will prevent JFBConnect from setting some tags on every page of your site. JFBConnect will still set tags that it can automatically determine (title, description, image, etc). If you don't want JFBConnect to set open graph tags for a specific component or specific tags, you should configure it to skip those items in the configuration area as well.

Thanks,
Alex
The topic has been locked.
Active Subscriptions:

None
3 years 5 months ago #66799 by joomleb
Hi Alex,

Social Meta > Objects > Custom Object Type > Open Graph tags: image path ?!?
I'm just trying to add here the og:image, because all the others open graph tags are yet grabbed correctly.
Please, How I have to enter the 507panama.com/images/System/507-Panama-Registracion.png image path for the og:image ?!? As you can see here , it is not running...
The topic has been locked.
Support Specialist
3 years 5 months ago #66801 by mel
You should just enter the following into the textbox:
og:image=https://507panama.com/images/System/507-Panama-Registracion.png
The topic has been locked.
Active Subscriptions:

None
3 years 5 months ago #66807 by joomleb
Hi Mel,
many thanks for your answer, it is working.
Now, in order to find the simplest way to correctly share the image we have made several tests that we would like to submit to your attention. These are the curious results in the Socials Chats of our interest:

Facebook
- the 1200 x 630 png is cropped in an unusual way: photos.app.goo.gl/rbJxZFSon2aVwjzM8 > the called image at this link it is a 1200 x 630 png
- while the 1200 x 630 is shown in the right way ! photos.app.goo.gl/hjHZ3HYDgt4Lq6y77 > the called image at this link it is a 1200 x 630 jpg
Tested on 914 x 480 and 600 x 315 pixels images (same proportion) and there is no difference from png and jpg !
I tried also by adding Social Meta > Objects > Custom Object Type > Open Graph tags:
og:image:type=image/png
og:image:width=1200
og:image:height=630
But the situation does not change!

Twitter
See above + I tested also by using a square 300 x 300 jpg image, but doesn't matter if Social Meta > Configuration > Twitter Card Type > Summary Card with Large Image or just Summary Card, Twitter is not able to manage a square image: photos.app.goo.gl/ZRRJ7eLGLSNRNEwPA

WhatsApp
Again, the 1200 x 630 png image is not cropped in the right way: photos.app.goo.gl/JqezCUDXArbcLXEt7
While the 1200 x 630 jpg is working fine: photos.app.goo.gl/KT285Gp33nR5yRcT6
And also a 914 x 480 png is managed in the right way: photos.app.goo.gl/KSL2yeFggEbykDE79
+ Comparing the two png images with the jpg you can see also how it seems that the jpg reduction resolution to the 300 x 300 pixels used by WhatsApp on the thumnail have a really better result than the png ones...
+ I tested and I can confirm that by entering two images here Social Meta > Objects > Custom Object Type > Open Graph tags: ... FB and Twitter will grab the first one, while WhatsApp will grab the last one. Here the result by using a last small 300 x 300 px square image: photos.app.goo.gl/vi97VewbGegYHKCH7

So, I like png because I can have back better quality images for less bytes, but this BUG on 1200 x 630 png images is a mistery and the fact that it is happening on Facebook, Twitter, WhatsApp at the same time should be investigated.
Are you sure it is not from JFBConnect ? Please, Do you have a "fix" for it ?

FB Messenger
It does not have the preview, you need to send the message to see the result. There is some missing, it does not matter if:
- 1200 x 630 png: photos.app.goo.gl/ZEs5kD9doQR5AwcZ8
- 300 x 300 jpg: photos.app.goo.gl/BkEYsJMemBAayyg56
Generally it seems that jpg resolution is managed better, but Messenger is not resizing the images.
Am I missing anything ? Please, Do you have a workaround for it ?

Skype
It does not matter the original resolution image, it is cropping the image in a "unique" and "singular" way: photos.app.goo.gl/phyTNp5xpQFANyGNA ...
Am I missing anything ? OR just Microsoft ?!? Please, Do you have a workaround for it ?

WeChat
I tested and look for WeChat Open Graph without success. It seems that WeChat is not managing Open Graph, no images on sharing, Please, Am I missing anything ? Do you have suggestions for it ?

SMS
I have not tested it, but it seems that SMS are sharing small 2.46 : 1 images.
Please, Do you have any info about it ?


PS - I cannot find the default "Website" Object Type attribute into the list, Please, Am I missing anything ?
The topic has been locked.
Support Specialist
3 years 5 months ago #66810 by alzander
Facebook:
That is strange that it seems to be treating JPG and PNG images differently. The image from the Debug Tool was cutoff, so I couldn't see everything. Can you verify that the og:image tag found on the page was the correct png or jpg image? If so, there's nothing more that JFBConnect could do. You may need to contact Facebook bug support if this is critical for your site:


Twitter:
The summary card 'should' use and show a square image. However, they recommend (and they're documentation shows) a large rectangular image. It's possible their documentation is out of date, but unsure. The other point to note is that Twitter caches your page for quite a while and has no way for you to 'force' an update. Facebook has an easy "Scrape Again" button, but Twitter does not. Many times, you have to wait 3-7 days to see if your change takes effect, and there's nothing we can do about this.
Invalid consumer key/secret in configuration

Whatsapp
They are owned by Facebook and use the same tags. See my details about Facebook above.

FB Messenger
Facebook (to my knowledge) has not released any guides for open graph tag support for messenger. I'd assume it's the same as their main site, but I don't have any additional information on how best to set the tags specifically for messenger, or if that's even possible.

Skype/WeChat/SMS
I'm unsure what tags Skype, WeChat or SMS uses or how they crop. Do you have any information on their handling of images?

PS - I cannot find the default "Website" Object Type attribute into the list, Please, Am I missing anything ?

I'm not sure what you mean here. Can you explain more?

Thanks,
Alex
The topic has been locked.
Active Subscriptions:

None
3 years 5 months ago #66814 by joomleb
Hi Alex,

Facebook
"...The image from the Debug Tool was cutoff..." = What do you mean ? As I gave you you can test the 1200 x 630 png image debugging this page
"...Can you verify that the og:image tag found on the page was the correct png or jpg image?..." = Please, How can I check it ? As far as I see from the Facebook debug page informations, yes, it is the right one.
"...That is strange that it seems to be treating JPG and PNG images differently..." = It is happening only with JFBConnect and with both (Facebook and Twitter):
--- Social Meta > Configuration > Skip component: SP Page Builder
--- I added the OG 1200 x 630 px png image into the SPPB Page (I'm going to send you the image by PM)
--- You can see that debugging the page the proportions are maintained

Twitter
"...The summary card 'should' use and show a square image...." = I know and I can confirm
"...It's possible their documentation is out of date..." = No, it is right
"..Twitter caches your page for quite a while and has no way for you to 'force' an update..." = As far as I tested, that is not the cause.

I wrote: "...Summary Card with Large Image or just Summary Card, Twitter is not able to manage a square image...": As far as I tested it is happening only on Open Graph pages managed by JFBConnect, this is why I put it in evidence to you, I suspect can be related to the first png / jpg proportion bug I reported here...

Whatsapp
"...They are owned by Facebook and use the same tags..." = Yes, but they are managing them in a different way, as I detailed it to you

FB Messenger
As you can see from my test images the behaviour is really too strange. I know a new Messenger/Instagram API has been released.
I look for, but without success, no informations about. Please, through your channels as a developer company, Can you ask to Facebook about it ?

Skype/WeChat/SMS
"...Do you have any information on their handling of images?..." = I'm going to look for them and I'll report here the results


PS - "...I'm not sure what you mean here. Can you explain more?..."
Social Meta > Object > New ... > Object Type: I cannot find the default "Website" attribute into the list
Please, Am I missing anything or do you missed it ?
As you can read here , og:type: "...The type of media of your content. This tag impacts how your content shows up in News Feed. If you don't specify a type,the default is website. Each URL should be a single object, so multiple og:type values are not possible. Find the full list of object types in Object Types Reference..."
As far as I can understand , when og:type is no set, it is considered as "website", but in no way to don't set it through the dropdown menu
The topic has been locked.
Support Specialist
3 years 5 months ago #66846 by alzander
Facebook - When you use the debug tool, you can see exactly what image Facebook is using by looking in the "Based on the raw tags, we constructed the following Open Graph properties" section. With that, you can check that it's actually found the correct png and jpg images in your tags and isn't using something else. If it's showing the correct og:image that you're trying to set, but it's still cropped wrong, there's nothing we can do about that. I'd have to recommend reporting that as a bug to Facebook.

Twitter - When you run other pages of your site through the validator, what tags do those show? Are they similar or how do they differ from the ones managed by JFBConnect?

FB Messenger - "Please, through your channels as a developer company, Can you ask to Facebook about it ?" Unfortunately, Facebook doesn't have any special developer channels that we're able to take advantage of to ask things like this.

Social Meta - You should be able to add 'type' or 'og:type' to the Skip Tags area to prevent JFBConnect from setting that tag. Otherwise, the page you set as your default menu will be set to 'website' and all other pages will be 'article'.

I hope that helps,
Alex
The topic has been locked.
  1. Forum
  3. Discontinued Products
  5. JFBConnect v8.x Support (Joomla 3 Only) (CLOSED)
  7. Open Graph plugins - understanding
From the Blog
Facebook | Twitter | LinkedIn | Blog RSS