Thursday, 14 January 2016

Drupal 7 - Avoid sending thumbnail images to Facebook using Open Graph Meta Tags

Using Default Open graph Meta tags module, if we select an image from the list and trying to send to facebook, it tag og:image with thumbnail version. Facebook won't allow lesser dimension images while sharing. So, whatever that we want to display in facebook won't be shared in this case. It might take Logo or any image from Web Page.

To Resolve this problem, we can have a below patch code.

STEP1:
1. Open file opengraph_meta.common.inc
2. Search for a function which is used to render meta tag data for the given node. function name is "render_data". Line Number:249
3. Add below code after 258 line [i.e., after if (array_key_exists($field, $this->tags_already_output)) {}]
$images = OpenGraphMeta::instance()->harvest_images_from_node($node);
if (!empty($images)) {
  $image_selector_options = array();
  foreach ($images as $url => $image) {
    $image_selector_options[$url] = $image;
  }
}
4. Add below code after 264 line [i.e., After "case self::IMAGE:" line]
    $imageId = is_numeric($v) ? $v : 0;
5. Change below line to specified one
    Existing line: $v = url(ltrim($v,'/'), array('absolute' => TRUE));
    Update to: $v = $image_selector_options[$imageId]['url'];
6. Save Changes
   
STEP2:
1. In the same opengraph_meta.common.inc file there is a function to extract image fields. change them to form image from file_create_url instead of image_style_url
2. Search for a function "extract_image_fields"
3. Change below line to specified one.
    Existing line: $url = image_style_url('thumbnail', $fields[$_uri_field]);
    Update to: $url = file_create_url($fields[$_uri_field]);
4. Save Changes
   
STEP3:
1. In opengraph_meta.module, there is a function which will be used to display thumbnails in admin panel while creating or updating node. we have to update that to take original URL and also update the function to taken first image as default one if nothing got selected.
2. Open opengraph_meta.module file
3. Change below code to specified one
    Existing Code
        foreach ($images as $image) {
            $image_selector_options[$image['url']] = OpenGraphMetaDrupalLayer::theme_selector_image($image);
          }
    Update to:
        foreach ($images as $url => $image) {
            $image_selector_options[$url] = OpenGraphMetaDrupalLayer::theme_selector_image($image);
        }
        $old_value = !empty($node->opengraph_meta) ? $node->opengraph_meta[OpenGraphMeta::IMAGE] : '';
        $default = $old_value && isset($image_selector_options[$old_value]) ? $old_value : key($image_selector_options);

4. Change below line to specified one for taking default value in admin configurations section of node add/update.
    Existing Line:
        '#default_value' => !empty($node->opengraph_meta) ? $node->opengraph_meta[OpenGraphMeta::IMAGE] : '',
    Update To:
        '#default_value' => $default,
1. Save changes.

Now we can check from both frontend and backend whether images are sending with full width and height or not. After updating these also if you could not able to see changes in sharing image to FB, we have to clear cache from Facebook using Developer link.

No comments:

Post a Comment

Thank you so much for providing your valuable feedback. I will will look into them and update my skills & technologies accordingly.