sharing Joomla URL on Facebook - editing picture, title and description

Question

i have a handful of Joomla sites that i manage ranging from version 1.5 all the way to the recent version, 3.3. whenever i go to share a link from one of my sites on Facebook (no matter what Joomla version), the thumbnail, title and description does not reflect the information contained on the page i want to share.

i have seen a lot of information regarding the use of open-graph (OG) meta tags, but i am not sure as to how to implement them into the Joomla structure.

any input would be greatly appreciated!

Answer 1

Try this,

this is a different approach for the requirement, Many times the OG tags creates issue for sharing image URL on FB, due to cache,compression etc. So in any CMS its better to use Javascript SDK for FB share to share custom image,title ,description etc.

The issue with cache or compression and conflict with OG tags will get solved with this method.

Just Create an APP on FB.

<script type="application/javascript">
  window.fbAsyncInit = function() {
    // init the FB JS SDK
    FB.init({
      appId      : 'APP ID',                            
      status     : true,                                 
      xfbml      : true                                  
    });

  };

  // Load the SDK asynchronously
  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/all.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));

function FBShareOp(){
    var product_name   =    'your title name';
    var description    =    'description';
    var share_image    =    'full image url ';
    var share_url      =    'url to share'; 
        var share_capt     =    'caption';
    FB.ui({
        method: 'feed',
        name: product_name,
        link: share_url,
        picture: share_image,
        caption: share_capt,
        description: description

    }, function(response) {
        if(response && response.post_id){}
        else{}
    });

}

</script>

for more details of Custom Share button on FB

hope it make sense.

Answer 2

I would first use Facebook's debugging tool: https://developers.facebook.com/tools/debug

If nothing is populating, these are possible causes: 1. GZip 2. Compression Tools in Template 3. 3rd Party Plugins (Rokbooster, JCH Optimize)

If you have a newer Rockettheme template, look in the index.php as they have some meta OG tags pre-defined.

Here is a good guide to open-graph (OG) meta tags if you want to add them to your template's index.php file: http://moz.com/blog/meta-data-templates-123