Link with Article Images on Facebook Documentation

If you did not find answer in documentation then ask a support question.

  1. Plugin order position
  2. Facebook requirements for images
  3. When does Facebook scrape my page?
  4. Default image on home page is not used
  5. Facebook does not display images or displays wrong image when sharing link
  6. New post with image is not displayed on Facebook Wall after clicking Like button
  7. Facebook Debugger explanation
  8. URL format for sharing
  9. Website HTML validation
  10. Facebook Like button does not display
  11. Facebook Like button configuration

  1. Plugin order position

    This extension searches for image in article content. You should change order of your content plugins and move it to first place. If you would not do that then this plugin might find images with small icons added to article contetn by other plugins. If you want to add images form gallery plugin then it should be before Facebook plugin. In Advanced tab of plugin configuration you can additionally enable event Open Graph onContentPrepare: Yes which is also called by other thumbnail or gallery plugins.

    Change order preview

  2. Facebook requirements for images

    The image must be at least 50x50 px (though minimum 200x200 px and maximum 1500x1500 px is preferred) and have a maximum aspect ratio of 3:1. Maximum image size is 5MB. We support PNG, JPEG and GIF formats. Facebook scrapes your page every 24 hours to ensure the properties are up to date.

  3. When does Facebook scrape my page?

    Facebook needs to scrape your page to know how to display it around the site.

    Facebook scrapes your page every 24 hours to ensure the properties are up to date. The page is also scraped when an admin for the Open Graph page clicks the Like button and when the URL is entered into the Facebook debugger. Facebook observes cache headers on your URLs - it will look at "Expires" and "Cache-Control" in order of preference. However, even if you specify a longer time, Facebook will scrape your page every 24 hours.

  4. Default image on home page is not used

    If you have FREE version, then you need to upgrade to PRO.

    If you have PRO version already then enable Debug mode in Advanced tab of plugin configuration and go to your home page.

    If you do not see any debug message form this plugin then make sure that your home page menu item is type of: single article, category blog or feateured articles and there is published and displayed at least one article in category or featured view.

    Article can not be displayed by some module. It has to be displayed by native Joomla Content component, because only then plugin is being fired and can add Open Graph tags for Facebook.

  5. Facebook does not display images or displays wrong image when sharing link

    Make sure that your site is online. Facebbok can not read any data from site which can be accessed after login. Go to Joomla Global Configuration and check if Site offline is set to: No. Also check if access to your article is set to: Public.

    Debug output example

    Enable debug mode in Advanced tab of plugin configuration. Go to you Article page which you want to share and reload it. In message area you will see all Open Graph tags which were added by this plugin to document header and all images which where found. in PRO version of plugin you will also see images which were rejected because them did not meet minimal requirement of Facebook. FREE version of plugin does not check if image which you want to share has minimal size and aspect ratio.

    Copy URL of your page and paste in Facebook debugger. You can check there if you will find there Open Graph tags which where outputted by plugin in Debug mode. Also your page will be reloaded in Facebook cache and when you will try again to share a link you will see correct image. If not then Facebook has still old version of your page.

    If you have shared your link before installing this plugin you will have to wait until Facebook will refresh cache or use Facebook debugger to reload cache.

    If images inside your article are not visible when you are editing it, but are inserted by some gallery content plugin, then you can change order of plugins in administration panel that gallery will be before Facebook plugin. It will only work if gallery plugin inserts images into article as HTML <img/> tag and not as JavaScript code.

  6. New post with image is not displayed on Facebook Wall after clicking Like button

    Facebook does not post automatically Likes on your Wall. It will only appear in list of all Likes. If you want to show your Like on Wall then you have to add some comment. It is a limitation of Facebook and not of this extension.

    Post Like on wall, Facebook wall.

  7. Facebook Debugger explanation

    Facebook debugger

    Errors That Must Be Fixed
    More Than One OG URL Specified: Object at URL 'http://www.perfect-web.co' of type 'article' is invalid because it specifies multiple 'og:url' values: http://www.perfect-web.co, http://www.perfect-web.co.

    It means that you have some other Joomla plugin or Template which adds og:url tag. You have to disable those plugin, because you can have only one Open Graph plugin installed or disable option Open Graph site details in Perfect Link with Article Images on Facebook (since version 2.0.7).

    Like Button Warnings That Should Be Fixed and Open Graph Warnings That Should Be Fixed can be ignored, but it is better to resolve all of them.

  8. URL format for sharing

    Enable in Joomla Global Configuration SEF URLs because after clicking Like button popup bubble with publishing on wall might not show.

    If you share link with your Joomla! article it can not contain # in URL, because Facebook may link without image.

    Examples of correct link:
    http://www.perfect-web.co/joomla
    Examples of bad link:
    http://www.perfect-web.co/joomla#page

  9. Website HTML validation

    Add XML namespace to the <html> tag of your template.
    <html xmlns:fb="http://ogp.me/ns/fb#" xmlns:og="http://ogp.me/ns#">

  10. Facebook Like button does not display

    In PRO version of plugin you can display Like button at the beginning or at the end of Article.

    If you have enabled Like button in plugin configuration and it does not display in your Article then  do following tips.

    • Change position of Like button from Before Article to After Article.

    • In Advanced tab of plugin configuration set Like button onContentPrepare: Yes. If button will shows up then your template has incorrect logic and does not display output of events: onContentBeforeDisplay and onContentAfterDisplay.

    • Change your site template to Joomla! default template.

    • Enable Debug mode in Advanced tab of plugin configuration and reload page with Article. In message area you will see: Like Button has been enabled if button was prepared and return for display. It means that your template does not display some of Joomla! content plugin events. You will have to add to your Article layout following code or contact with template developer to correct this:

      <?php echo $this->item->event->beforeDisplayContent; ?>
      <?php echo $this->item->event->afterDisplayContent; ?>
    • JoomlArt templates with JA T3 Framework, e.g. JA Purity II.
      Edit file: /plugins/system/jat3/jat3/base-themes/default/html/com_content/article/default.php
      and make changes (marked yellow) around line 40 - 50 in following or similar code:

      <?php if ($useDefList || $canEdit ||  $params->get('show_print_icon') || $params->get('show_email_icon') || $this->item->event->beforeDisplayContent) : ?>
      <div class="article-tools clearfix">
  11. Facebook Like button configuration

    In PRO version of plugin you can display Like button at the beginning or at the end of Article.

    • Show faces option works only with standard layout.

    • Send button can be displayed only when type of Like button is: XFBML or HTML5.

    • Popup bubble after clicking Like button can be displayed only when type of Like button is: XFBML or HTML5. You have to enable SEF URLs also.
    • If you have another Facebook extension which is displaying on all pages (Like Box) then disable loading JavaScript SDK in this plugin because it should be loaded only once. Do the same for HTML element <div id="fb-root"/>. But if you have another extension which loads Facebook plugin by Iframe then do not disable this options.

    • Available layouts:

      standard - displays social text to the right of the button and friends' profile photos below. Minimum width: 225px. Minimum increases by 40px if action is 'recommend' by and increases by 60px if send is 'true'. Default width: 450px. Height: 35px (without photos) or 80px (with photos).

      button count - displays the total number of likes to the right of the button. Minimum width: 90px. Default width: 90px. Height: 20px.

      box count - displays the total number of likes above the button. Minimum width: 55px. Default width: 55px. Height: 65px.