Facebook share button doesn't integrate Hero photo

1 year 9 months ago #518
Topic Author
's Avatar
Facebook share button doesn't integrate Hero photo

I am experiencing a bad UX with Facebook sharing button within my NorrCompetion page.

The competition page is set up as per original template visual display 'framework'. ie. I have a medium hero photograph on left hand side. The Facebook et al social share functionality has been made active nonetheless, it takes 2 attempts for the Facebook social share window to integrate the hero photo a share.

The medium photos for all my competition participants are mostly under 100Kb. Hence, please provide explanation or reason why sharing the medium photo is not a seemless process.

Please refer to my screenshots as to the steps I need to take.
(pix 1= start of share,
pix 2 = FB window but no hero photo integrated,
pix 3 = repeat of steps to share and hero photo integrated!).

I do not wish for my competition voters to think that they are only going to share text as opposed to a hero shot! I

1 year 9 months ago #519
Eugene's Avatar
Posts: 475
Re: Facebook share button doesn't integrate Hero photo

Hello AwardsTDA,
Thanks for your request.
Well, Open Graph protocol is used to mark up HTML pages according to Facebook standards and forward useful information about the page to FB.
We can implement special tags on the site or in the product to meet such standards.
If you're posting a link to the page first time (in our case this is participant's page), there might be a problem with Facebook cache.
You can remove the cache using Facebook debugger .

Actually, this is not NorrCompetition issue.
Alternatively, it is possible to force Facebook to clean cache every time if somebody open the page via special tag as:

<meta property="article:modified_time" content="2016-05-16T06:48:31+00:00" />
(it is needed to take actual date every time)
But this is not perfect solution since actually the content is not changed.


Like our extensions and support?
Add your voice to the JED listing with a 5-star review: bit.ly/2ciJBqC
Thanks!

1 year 9 months ago #522
Topic Author
's Avatar
Re: Facebook share button doesn't integrate Hero photo

Hello Eugene,

Thanks for the pointer(s).

I have run the Facebook debugger on my page and it 'found' 3 issue to be fixed. Namely:

Inferred

    Property: The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.
    Inferred Property: The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.
    Share A
    pp ID Missing: The 'fb:app_id' property should be explicitly provided, Specify the app ID so that stories shared to Facebook will be properly attributed to the app. Alternatively, app_id can be set in url when open the share dialog.

Refer to screenshot attached.

Now with regards to 'Share App ID Missing, please advise what app ID the warning refers to and where it is supposed to be inserted in NorrNext Competition admin settings?


Further out of interest where would one insert your special tag:
<meta property="article:modified_time" content="2016-05-16T06:48:31+00:00" />

Please note that of today my FB photo share displays as per screenshot attached, though had to wait a few very long seconds for the photo to display that way. In terms of UX I would have thought that FB wasn't going to share the photo if I didn't know better.

Thanks
L.

1 year 9 months ago #523
Eugene's Avatar
Posts: 475
Re: Facebook share button doesn't integrate Hero photo

Hello AwardsTDA,

I have run the Facebook debugger on my page and it 'found' 3 issue to be fixed. Namely:

Inferred
Property: The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property: The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.
Share A
pp ID Missing: The 'fb:app_id' property should be explicitly provided, Specify the app ID so that stories shared to Facebook will be properly attributed to the app. Alternatively, app_id can be set in url when open the share dialog.

I can't reproduce this issue on demo site. Here is example .

Perhaps you can get this issue first time, when you just been published the item and never posted in Facebook. But this is not an issue, but FB cache.
As concerning fb:app_id - have you added Facebook App ID in component settings? (Administrator panel > Components > NorrCompetition > Options > General tab)

Please provide an URL of the page where you get these issues, I'll check it out.

Please note that of today my FB photo share displays as per screenshot attached, though had to wait a few very long seconds for the photo to display that way. In terms of UX I would have thought that FB wasn't going to share the photo if I didn't know better.

There are just special HTML tags implemented in NorrCompetition to mark the page according to Open Graph standard, so the component does not transfer images to the 3d party side.

It might happen due to following reasons:
1. Facebook issue. The global social network as FB can work slowly time to time.
2. Server issue: downtime for a while.
3. Temporary problem with Internet connection in your Internet provider.


Like our extensions and support?
Add your voice to the JED listing with a 5-star review: bit.ly/2ciJBqC
Thanks!

1 year 9 months ago #524
Eugene's Avatar
Posts: 475
Re: Facebook share button doesn't integrate Hero photo

Please provide an URL of the page where you get these issues, I'll check it out.

I just been found a link on your site in another topic. Now see this message:

Missing Required Property
The og:type property is required, but not present.


We'll examine it.


Like our extensions and support?
Add your voice to the JED listing with a 5-star review: bit.ly/2ciJBqC
Thanks!

1 year 9 months ago #525
Eugene's Avatar
Posts: 475
Re: Facebook share button doesn't integrate Hero photo

Hello,
Well, as concerning these warnings:

Missing Required Property
The og:type property is required, but not present.

I have examined HTML source code and all tags are presented.

It is Facebook cache. Go to FB Sharing Debugger, paste an URL on participant's page and take a look at Time Scrapped line and then click on "Scrape again" button to clean cache. As a result, there are no such warnings anymore.

As concerning Share App ID Missing issue. I have noticed some pages don't have this problem. For instance:
The Villa - Share App ID Missing
Lilly's Espresso e Cucina - valid page

If we will see HTML source of both pages, the FB ID tag is identical:

<meta name="fb:app_id" content="[your_ID]" />


So, I have no idea why FB Debugger report the issue since the required tag is implemented. Maybe it happened due to location of your Joomla site (which is located in subfolder) - yoursite.com/joomla/
It would be good to check it out and temporary move the site from folder to the root and check FB debugger again.


Like our extensions and support?
Add your voice to the JED listing with a 5-star review: bit.ly/2ciJBqC
Thanks!

1 year 9 months ago #528
Topic Author
's Avatar
Re: Facebook share button doesn't integrate Hero photo

Hi,

Regarding:

"Share App ID Missing: The 'fb:app_id' property should be explicitly provided, Specify the app ID so that stories shared to Facebook will be properly attributed to the app. Alternatively, app_id can be set in url when open the share dialog."

and your answer/query back to me:

"As concerning fb:app_id - have you added Facebook App ID in component settings? (Administrator panel > Components > NorrCompetition > Options > General tab)"

Have now added FB App ID in components. It didn't appear evident from your documentation that it was necessary to include as para states:

"Facebook App ID – in order to use Facebook Domain Insights you must add the app ID for Open Graph." To my interpretation that didn't relate to sharing photos nor that it was a FB app ID as opposed to Open Graph app ID needed :)

Hence, thanks for the diligence in clarifying settings data.

I believe that my social photo share is now resolved and any delay in photo embedding/linking is due to your suggested inherent and uncontrollable IT tech issues namely:

1. Facebook issue. The global social network as FB can work slowly time to time.
2. Server issue: downtime for a while.
3. Temporary problem with Internet connection in your Internet provider.

So all's good and working as best it can!

You can get our help: Monday - Friday / 09:00 to 17:00 (GMT+2). but not limited. Our staff will be pleased to provide Premium support to every paid subscriber asap, but sometimes you should be ready to wait for our reply for up to 3 days. In case of free extensions we do the best to develop and maintain them either, but their support is not necessary.

Product Latest Update