Joomla! 3 PHP 7.4 Maintenance Only
Joomla! 4 PHP 7.4 PHP 8.0 PHP 8.1
Social Media platforms like Facebook, Twitter, Linked, etc. are ideal showcases for your content.
But how do they determine what text and images to show when somebody shares your content?
Time to take control again over how your content looks on Social Media Platforms!
Facebook introduced the Open Graph Protocol. With this protocol meta-tags are added in your blog / article source code. These meta-tags tell Facebook what the article is about, which image to use, which url, who is the author, etc. This information is then used to display your article on the Facebook platform.
Linkedin, Google+ have adopted this protocol as well. Twitter introduced its own 'protocol': TwitterCards.
This content plugin helps you make the most of your content on these Social Media platforms by automatically implementing the OpenGraph protocol and TwitterCards into your Joomla! articles, JCal Pro (event) pages, K2 Items, Easyblog Entry pages, FocalPoint Location maps, ochGotNews items and YooTheme Zoo blogs / pages, jDownloads and Econa Custom Image Fields!
New in version 1.8.0: out of the box support for jDownloads! Automagically add TwitterCards and OpenGrapgh tags to your jDownload pages!
It has build in support for Joomla! 3.7+ Custom Fields. Including Econa (new in version 1.8.0)
It even lets you add OpenGraph protocol and TwitterCards to other web pages using the tag. (new in version 0.1.1)
"Thank you so much for everything. Just great. If this plugin was good before, now it's amazing. This plugin is now more complete and has all the requirements that any website needs to go further in social networks. The possibilities this plugin offers is unmatched by any other in the market for Joomla components. There is no other, because I have seen them all, bought some and otherwise I have asked and their developers simply tell me: you can not do this, you can not do that, no it's not possible. But ochOpenGraph does everything a site needs to really stand out on the web"
Now you decide which image, description and / or title to use.
If the image resolution is not good enough to be used on e.g. Facebook or twitter? No worries, the image quality is validated and when insufficient you can use a configured fall-back image. You can even select a custom image per article (other image then the image in your article) and use that. This way you can share a professional image on e.g. Facebook with the title and or author avatar in the image: this will not show in your article but only on the Social Media platforms... You can configure to use the custom image for all authors or only a select group (acl) of authors: How cool is that!
"... everything works, just as I've wanted for a long time testing components, modules and plugins. This is really the most powerful OpenGraph solution I've tested. the truth: it is the best. But, above all, thanks for your attention, I think that without it would have been much more complex and difficult to configure the plugin. Especially your patience and speed in answering is what makes a difference. Top support!..."
Did you ever wanted to migrate a page to a new page but didn't do that because you didn't want to loose your Facebook share count?
New in version 0.2.3 is the possibility to set a custom og:url for an article via a Custom Article Field.
What this enables you to do is point the og:url meta tag to a different url. Why would anyone want to do that you wonder... If you have a page A and migrated that to page B, you will loose all credits and share counts for page A. Page B starts from zero... When you point the og:url meta tag in page B to the url of page A, you retain your share count and credits (Facebook). It's like a canonical url, but then for Facebook.
"LerendeLeiders.nl is the leading leadership community and blogging site in the Netherlands. We differentiate between bloggers (free) and pro-bloggers (paid subscription). Pro-bloggers are professionally promoted on Facebook, Linkedin and Twitter because of the Custom Image features of this plugin. Our platform functions as a professional showcase for their content. Due to the professional look on Twitter, Facebook and Linkedin of their articles they attract more visitors then ever!"
Language support
ochOpenGraph comes out of the box with the following languages:
- en-GB
- sr-RS
- sr-YU
- tr-TR (Türkçe Çeviri: Mehmet TAŞ)
You can create or improve your own language on Transifex. Or just use the Joomla! language override system: It's your site, you decide what to do with it :)
Screen-shots
[Gallery created with ochGlightbox]
Requirements
- Joomla 3.10+ or Joomla4.0+
- Basic Joomla! knowledge available between the chair and the keyboard :)
Installation is easy!
- Download the plugin
- in the Back-end go to menu Extensions > Manage
- in the tab [Upload file package] click [browse] and select your downloaded plugin
- click [Upload & Install], wait for the installation to finish
Configuration
- in the back-end go to menu Extensions > Plugins
- search / locate the 'ochOpenGraph' content plugin
- open the plugin
- in the tab [Plugin] set status to [Enabled]
- in the tab [OpenGraph settings] configure your Generic OpenGraph tags and the Image priority
- in the tab [Twitter Cards settings] configure your generic Twitter Card settings and the Image priority
- in the [Advanced] tab configure your advanced settings
- click [Save & Close] and you are good to go
Important: please check the FAQ and Tips and Trick in how to activate and troubleshoot Facebook / Linkedin and TwitterCards!
Activate Joomla! One Click update integration
Updating of the plugin is integrated with the Joomla! One Click Update manager. In order to activate follow the steps below:
- On this site: In the menu [Tools > My Subscriptions] copy your 'Download ID#'
- On your site: In the plugin configuration click the [Advanced] tab and paste the 'Download ID#' in the [Download ID] field
- Click [Save] or [Save & Close], You will be prompted with an informational message that your Download ID was changed.
Manually add OpenGraph and TwitterCard meta tags to other (non-article) pages
The ochOpenGraph plugin automatically adds the OpenGraph and Twitter Cards meta tags to Joomla articles, K2 items and EasyBlog blog pages.
You can also add OpenGraph and Twitter Cards meta tags to other pages. Prerequisite is that the components that generate these pages trigger content plugins or you can use a Custom module that you assign to the specific page(s):
- create / open the custom module
- insert: into the module (if no image is specified, the default fall-back images will be used)
- set the module to an active template position
- Assign the menu items that you want to assign this custom module to
- in the [Options tab] of the custom module set [Prepare content] = 'Yes'
- disable caching of the module if you are using the module on different pages
- click [Save & Close]
- when surfing to your page on the front-end, the OpenGraph and Twitter Card meta tags will be automatically added (visible in page source)
Are you using Kunena (forum)? Due to how Kunena pages handle Custom modules you need to set caching of the custom module to off!
New in version 0.3.0: additional parameters!
Starting from version 0.3.0 you have the possibility to set additional parameters in the ochopengraph tag. You can set the following parameters giving you full control of what is being shared:
- image="path to image": this allows you to use a different image then the image in the article
- title="custom title": set a different title then the article title as the title to be used on Social Media when the page is shared
- description="custom description": set a custom description that will be used on Social Media
- force="no": when you assign the opengraph tag to e.g. a category blog menu, then all articles that are displayed in this category have the parameters from the ochopengraph tag set. When you set the parameter force="no" then the articles in the category blog will use the articles values instead of the menu values.
- type="...": Set the og:type manually (default = article)
ochOpenGraph uses default Joomla Custom Fields to provide upload and select fields for Twitter Card Custom image and OpenGraph Custom image.
- In the Joomla Article manager add a new Fields Group:
- Title: e.g. ochOpenGraph
- Permissions: set 'Edit Custom Field Value' to 'Allowed' for group 'Author' (if you forget this, then the fields in this group will be read-only
- In the Joomla Article Manager add a new Field for the Custom twitter Card image:
- Title: e.g. Twitter Card image
- Type: media (but this can be any image type)
- Configure the field to your requirements
- Repeat step 2 for OpenGraph image
- In the ochOpenGraph plugin goto the [Opengraph Settings] tab
- Select the 'OpenGraph Custom image field': the field created in step 3
- ing the ochOpenGraph plugin goto [Twitter Card Settings] tab
- Select the 'Twitter Card Custom image field': the field created in step 2
When the Author is logged in he has a new tab when editing or creating an article. Now he is able to upload / select the image(s).
ochOpenGraph uses default Joomla Custom Fields to provide the possibility to specify a custom og:url value for an article.
- In the Joomla Article manager add a new Fields Group:
- Title: e.g. ochOpenGraph
- Permissions: set 'Edit Custom Field Value' to 'Allowed' for group 'Author' (if you forget this, then the fields in this group will be read-only
- In the Joomla Article Manager add a new Field for the og:url field:
- Title: e.g. ogURL
- Type: url
- Configure the field to your requirements
- In the ochOpenGraph plugin goto the [OpenGraph settings] tab
- Select the 'og:url Custom Field': the field created in step 2
When the Author is logged in he has a new tab when editing or creating an article. Now he is able to set the url that will be used in the og:url meta tag.
New in version 0.3.0: setting a custom Title for Twitter or OpenGraph metatags
ochOpenGraph uses default Joomla Custom Fields to provide the possibility to specify a custom twitter:title and / or og:title value for an article.
- In the Joomla Article manager add a new Fields Group:
- Title: e.g. ochOpenGraph
- Permissions: set 'Edit Custom Field Value' to 'Allowed' for group 'Author' (if you forget this, then the fields in this group will be read-only
- In the Joomla Article Manager add a new Field for the twitter:title / og:title title field:
- Title: e.g. ogTitle
- Type: text
- Configure the field to your requirements
- In the ochOpenGraph plugin goto the [OpenGraph settings] tab
- Select the 'og:title Custom Field': the field created in step 2
- Repeat steps 3 and 4 for the [Twitter Cards settings] tab.
When the Author is logged in he has a new tab when editing or creating an article. Now he is able to set a custom title that will be used in the og:title / twitter:title meta tag.
New in version 0.3.0: setting a custom Description for Twitter or OpenGraph metatags
ochOpenGraph uses default Joomla Custom Fields to provide the possibility to specify a custom twitter:description and / or og:description value for an article.
- In the Joomla Article manager add a new Fields Group:
- Title: e.g. ochOpenGraph
- Permissions: set 'Edit Custom Field Value' to 'Allowed' for group 'Author' (if you forget this, then the fields in this group will be read-only
- In the Joomla Article Manager add a new Field for the twitter:title / og:title title field:
- Title: e.g. ogDescription
- Type: textarea
- Configure the field to your requirements
- In the ochOpenGraph plugin goto the [OpenGraph settings] tab
- Select the 'og:description Custom Field': the field created in step 2
- Repeat steps 3 and 4 for the [Twitter Cards settings] tab.
When the Author is logged in he has a new tab when editing or creating an article. Now he is able to set a custom description that will be used in the og:description / twitter:description meta tag.
Tips & Tricks
Facebook Page ID
In order to indicate ownership to the articles shared on Facebook, a special fb:pages field is configurable (more information about why this is important and what this enables you to do: https://developers.facebook.com/docs/sharing/domain-verification)
You can find your page id here:
- goto your Facebook (company) page
- click 'About'
- scroll down: this is where your page-ID is listed
- copy and paste this ID into ochOpenGraph settings (OpenGraph Settings tab)
Sharing best practices for websites (source: Facebook)
When your article is shared on Facebook, Facebook caches the contents of your article and it's meta tags. When changing the article / image / meta tags these changes are not reflected on Facebook.
Use this Facebook development tool to clear the cache of your shared article and to troubleshoot any issues with your og: parameters:
https://developers.facebook.com/tools/debug/sharing/
When your article is shared on Linkedin, Linkedin caches the contents of your article and it's meta tags. When changing the article / image / meta tags these changes are not reflected on Linkedin.
Use the LinkedIn Post Inspector to discover hhow to optimize, refresh the cached data and debug in case of issues:
https://www.linkedin.com/post-inspector/
Twitter and TwitterCards
Important: for your Twitter Cards to work, your first have to whitelist Twitterbot in your site's robots.txt.
Failing to do that will prevent Twitter from building up your Twittercard.
in your robots.txt you should have some 'code' like:
User-agent: Twitterbot Disallow:
You then need to instruct Twitter that you are ready for your Twittercards (whitelisting your domain). You do that here:
https://cards-dev.twitter.com/validator
Image sizes
Use images that are at least 1200 x 630 pixels for the best display on high resolution devices. At the minimum, you should use images that are 600 x 315 pixels to display link page posts with larger images. Images can be up to 8MB in size. (I use: 920px by 480px)
The minimum image size is 200 x 200 pixels.
More info: Sharing best practices for websites (source: Facebook)
Image size: 800 x 418 pixels for 1.91:1 aspect ratio, 800 x 800 pixels for 1:1 aspect ratio (max 3mb) (I use: 920px by 480px)
More info: https://business.twitter.com/en/help/campaign-setup/advertiser-card-specifications.html (source: twitter)
LinkedIn status update OR blog post image size: scaled to 744px by 400px (I use: 920px by 480px)
More info: https://www.linkedin.com/help/linkedin/answer/86782 (source: LinkedIn)
Important: Before asking for support please first check the FAQ and Tips and Trick in how to activate and troubleshoot Facebook / Linkedin and TwitterCards!
Technical support and feature requests via our forum (You need a valid subscription to be able to post)