No bug FB share Missing Article Intro Image - Joomla 3.7 Native Content & Yootheme Pro

Hi There,

I am noticing an issue whereby the FB share doesn't pickup the 1st article image (or the intro article image) so the share just has the article text.

I'm using Yootheme Pro J!3.7, native content and jsocials 0.5.7.

Any ideas?

Thanks

Hi Daclina,
Thanks for your request. I have a lot of ideas

Do you have a link to the page so I can tell you exactly what's going on and (hopefully) how to fix.

Regards,
Ruud

Thanks. Email sent.

Hi Hristo,

got your mail and see your problem

Just to clarify some 'theory' before addressing the issue:

1. what social sharing buttons do (not only jssocials, but all of them) is push the url of the article you want to share to the social media provider: in this case Facebook. NO images, no text, nothing else then the URL
2. facebook 'receives' your request and the facebook 'crawler' visits the url to fetch the information that it needs: image, text, author, data, etc.

That is it: nothing more / nothing less.

Now to your question: why doesn't facebook show my first article image / intro image

before answering this, we first need to answer the HOW facebook fetches those images / information.

Because websites come in all sorts and shapes, and the information on the webpages is not standardized, facebook created a standard for websites to share information with: the ogp.me/Open Graph Protocol

What that does is tell facebook (but also twitter, linkedin, google+ etc.) where the information you want to share is located / what information you want to share. This is done with metatags in your webpage.

These metatags look like this (as an example I took my websites frontpage:
When you share my frontpage to facebook, Facebook will visit my website and will take the image specified in og:image tag.

So what happens when you do not have the Open Graph protocol enabled on your website. Well that is a little bit of guessing: facebook will still try to gather the information needed, but the logic in doing so is not always 'logical' for us mortals

Now how to fix that: ochOpenGraph

What this extension does is add the required og tags to your website (and twitter cards) where you can configure e.g. what image it should present to facebook in the og: image tag.

Your article can have multiple images (intro, full text, 1st article image), so you can set it up to first look for the full text article, if not present take the intro image and if not present take the 1st article image. Or in another order (configurable).

This makes you in control of what is being shared and how it is displayed on e.g. Facebook.

But this plugin even takes it a step further:

Facebook requires an image to have a minimal quality (e.g. 200 x 200 minimum pixels). The plugin has the possibility of having a fall back image: so when no image has the required resolution it will present facebook with the fall back image. You want to ALWAYS share a post on facebook WITH an image!

And now for the really cool stuff (what makes this plugin stand high above all other open graph plugins )

You can create a custom image for every article. What you want to do is share on facebook the highest possible resolution, but what you do not want to do is make that image part of your article: Google will 'punish' you for having a too big image on your page where you don't need it.

What this also enables you (and that is how many of my customers are using it) is to provide a call to action on the image.

When you look for example on this page: onlinecommunityhub.nl/community-tools/77...due-to-hack-attempts

You (and Google) see the for this webpage optimized image of a padlock, but when you look what is provided to facebook (and twitter etc) is a custom image of this padlock with my avatar on it > This gives me a competitive advantage on facebook (in terms of branding etc.)

So there you have it: if you want to share like a pro, you need this plugin (or another one that has the same functionality)

And a last tip: facebook caches the first share of your webpage. So if you add the image after this or change the image, it will with every next share show the old (first) information (no or old image).
luckily facebook has a tool to clean that cache unlike twitter and linkedin who also cache shared information.

More information here: onlinecommunityhub.nl/joomla-extensions/ochopengraph#faq-t-t

Does this help?

Thanks Ruud.

You always take the time to explain in such great detail - I really appreciate it.

Long story short, jsscials doesn't generate the OG tags, which is completely understandable.

I use SH404sef which is supposed to do this out of the box and I have it switched off for now. In any case, I might end up taking a look at ochOpenGraph if I run into any more issues.

Thanks again.

Hi Hristo,
Your short version is correct
Thanks for your kind works! I strongly beleive in 'sharing = caring'

SH404sef should do okay when you need basic OG implementation. One of my customers was using that as well. In the end we decided to use ochOpenGraph for it, but that was due to an extension that was not supported by SH404sef > wrong page titles and no images

Because ochOpenGraph is highly configurable and can even be run from a custom module, that was the route we choose in that site: never looked back.

Will implement Joomla 3.7 custom fields for ochOpenGraph (on my todo list): then you can upload / pick your OG image from the article yourself: I think that will make things even more easy

But for regular Joomla Articles SH404sef should be okay.

BTW, have you seen my latest extension: ochBlog

I think that this would make an awesome addition to the website you sent me. I will be adding ochOpenGraph / ochFitvids and ochjsSocials part of that subscription.

BTW2, with this custom css code you remove the underline when you hover your jssocial buttons, you can add that in the jssocials theme tab

Thanks for the suggestion and the css. The fact that ocBlog doesn't replace Joomla native content (just extends the features) makes it very attractive. Does it have support for canonical URLs ie:

<link rel="canonical" href=" someothersite.com/article.html">

If not, maybe through J! custom fields?

Also, when do you plan to make the rest of the plugins available as part of the subscription?

PS. We are going offtopic sorry

Hi, Just finished writing the documentation for ochBlog and realize the potential of this extension. Not because I am so great in developing extension, but because I am smart enough to build upon what is already there (Joomla CMS / articles) :whistle:

Currently no support for canonical URLs , but (and that is the beauty) if you have a plugin that will handle that for you then it works seamlessy with ochBlog

Good tip for the canonical custom field! My mind is going crazy with all the possibilities that Custom Fields have to offer for Joomla websites and extensions.
Will have a look in what is is and what is can achieve for a blog website. I'll put it on the #todo for ochBlog

Rest of the och plugins are now part of the ochSEO|SMO Toolbox subscription, need some time to figure out how to add them to the ochBlog subscription (without copying them) and how to describe in the product pages without confusing the customer
Will do that sometime this week.
Plugins will then automatically be available for all exciting ochBlog customers

daclina wrote: ... Does it have support for canonical URLs ie:
<link rel="canonical" href=" someothersite.com/article.html">

Yes it has will be in next update (currently in test), it is via J! custom (URL) field > if set = use, if not do not use.

daclina wrote: ... Also, when do you plan to make the rest of the plugins available as part of the subscription?

Just did it: when you subscribe to ochBlog you will also be able to download ochJSsocials (more features then jssocials), ochOpenGraph and ochFitVids...

These plugins complement ochBlog perfectly!