Post an illustrated Joomla-site article on Facebook using OG-tags
Published: Thursday, 17 September 2015 16:23       Written by Ogri       Hits: 14873

Some time ago I created a number of articles about embedding of Social Media Buttons in a site running Joomla 2.5. After switching to 3.x (at the moment of writing this site works at 3.4.4), I continued keeping buttons of share42 in pages of my articles, they were integrated using the same methodology and up to certain moment everything was working well. But recently when sharing in some social networks I ran across some bugs. For example, earlier when trying to share on Facebook I had an option to choose one of the pictures available on the page. Now this option no longer exists, the picture was being chosen by Facebook script at random. I had to investigate changes in Zuckerberg's policy and adjust accordingly. This article is devoted to those investigations.

But first I updated script from share42 and found out it was dated May 2014. At that time I was still using October 2013 version. Script was changed to the fresher one but issue remained. In the JavaScript code I found an event triggered by clicking on FB button which opens the "Share" window. I figured out that the sharer.php service is called. Before its calling, a query string is generated, and this query string consists of several parameters: url, title, summary (description) and the images[] array. The last parameter–array was forming picture choice in a dialogue.

Facebook has changed set of parameters for sharer.php. All links apart from the link to the shared page were dismissed. The current processing of the button click event should look like this:

onclick="window.open('http://www.facebook.com/sharer.php?u=' +
         encodeURIComponent([url веб-страницы]) + ')"'

All other parameters are now taken from meta-tags placed in section <head></head> of the page html-markup. After commenting a couple of lines in js-file I removed from query string all old parameters.

I also figured out that Facebook for a couple of years has its own meta-tags - Facebook Open Graph. Their syntax:

<meta property="og:[tag name]" content="[tag value]" />

A special bot-spider, called Facebook Crawler, supplies the sharer with values of these tags-parameters. You can find set of available tags with descriptions in a sharing guide for webmasters in Facebook section intended to be used for developers. Beside the fact that availability of Open Graph meta helps to properly create page sharing dialogue, it also increases site rating in Facebook and has a positive influence on outgoing traffic. So it is worth thinking about generating them on website pages. You will learn how to do this further and now I would like to finish with images.

You can point crawler on correct picture by inputting the following tag in a page head:

<meta property="og:image" content="[url правильной картинки]" />

I tried to add it into one article which I published earlier in my timeline with wrong picture and than removed. Wrong picture was not changed to the correct one. I opened page code on the server and made sure the tag was there. After googling, I found and eliminated the cause.

It turned out that Facebook kept settings of the previous sharing in its cache. On subsequent calls to the dialog "Share", those old settings were used, including URL for the wrong picture generated prior to inserting tag og:image. In Facebook terms it is called scrape. So "scraped" once they keep using the old values of parameters-tags which is reasonable as response time and traffic are being decreased.

Fortunately, you are provided with a debugger tool that allows you to reset the tag values. It is called Open Graph Object Debugger and available here: https://developers.facebook.com/tools/debug/og/object. Input page link into the box Input URL and click on the Fetch new scrape information button...

facebook open graph 01 debugger

... and you produce a fresh "scrape" of og-tags and see immediate results. At the end of result page - in section When shared, this is what will be included - you will see clickable preview of sharing dialog. You can post your article on Timeline directly from there.

Well, now about the main thing: how to generate Open Graph mega-tags in the code of Joomla-site pages.

Among both paid and free extensions connecting Joomla-site with social media I picked plugin plg_fblinkcontentimage. It has a paid version (only 7 Euro) and free version with reduced functionality. For most of my current needs free version is enough. In this variation the plugin inserts four og-tags: title, type (its value - always article), url and site_name. If article contains pictures meeting Facebook bot standards (min size - 200x200px, and available for crawler), tag og:image is also added, referring to the first suitable picture of all available in the article. Settings in free option are almost all inactive, it is enough simply to install plugin via Extension Manager and activate it in Plugin Manager. Now after refreshing the front-end page in browser and extracting its code you can see the tags in the head section.

In paid version additional functions are available and they might be useful as well. Below is the comparison of each version functionality:

facebook open graph 02 plg_fblinkcontentimage

I consider buying full version in the future. At the moment I have what I was aiming at: Open Graph tags in articles and possibility to post article description with the first suitable picture in Facebook timeline. This first picture was chosen by me earlier in 90% cases.

In conclusion I would like to encourage you to react promptly to important policy changes related to the promotion of your resource. Social networking is a very important part in promoting websites. You may not like them, but you can not ignore the fact that they can add a significant amount of traffic to the site.

By the way Facebook was not the first company who started using its own mega-tags. Twitter became a role-model implementing its Twitter Cards. I will add them to the website in the nearest future and share my experience. Look forward for my report!

Comments  

writing service
+1 # writing service 2017-05-09 06:17
This article is use simple, straightforward sentences with few modifying phrases and clauses.I enjoy articles that have one big word that fits perfectly. It makes me feel the article was worthwhile , no matter what.Thank you for this information.

Users must be registered and logged in to post comments.

By working with this site, you agree to our use of cookies necessary to keep the settings you select, as well as for the normal operation of Google services.
OK
More Information