Round Rock / Austin, Texas
Drupal Web Developer

Want to Control the Thumbnail and Text when you Post or Share Something to Facebook?

Want to Control the Thumbnail and Text when you Post or Share Something to Facebook?

Control Facebook Thumbnail Default

Use the Facebook Debug Tool
First, check to see what FB is seeing by using their Debug Tool:

https://developers.facebook.com/tools/debug/og/object/

* Note: I definitely saw caching issues so be sure to click the "Fetch" button often.

 

For the Title and Text:
Use Drupal modules such as "Page Title" and "Metatag" to give you greater control over the <title> and description tags.  Those are what Facebook uses to display the headline and intro text.

 

For the Image Thumbnails, add custom code in template.php:
Below is an example of a Drupal 7 site where I wanted super specific control of what was used for particular page types and even node id's. You will definitely have to modify it for your specific site but it will at least give an idea of the logic and syntax used.

One thing I did was create specific images to use as my 'generic' FB post thumbnails.  I created them as 400x400 squares since (a) FB tends to show square thumbnails (b) FB requires them to be at least 200x200 large.

Then I put this code in my theme's template.php file:

 

NOTE: You will need to change the Function name, Imagefield Name, and Content Type Name, Image Paths, and Image Sizes to match your Drupal site to get this to work.

function THEMENAME_preprocess_page(&$variables) {
    $variables['template_files'][] = 'page-'. $variables['node']->type;

    global $base_url; //used for image paths

    // ============= Create the open graph title tag. Also, optionally, append the website's address or name in curly braces to make it pretty  ==============
    //print "debug: title = " . $variables['node']->title;
    $element_title = array(
        '#tag' => 'meta',
        '#attributes' => array(
            "property" => "og:title",
            "content" => $variables['node']->title . " {MYWEBSITE.com}",
        ),
    );
    //add it to the Drupal header
    drupal_add_html_head($element_title,'facebook_share_title');

    // ============= Create the open graph site_name tag ==============
    $element_sitename = array(
        '#tag' => 'meta',
        '#attributes' => array(
            "property" => "og:site_name",
            "content" => 'Outdoor Patriot',
        ),
    );
    //add it to the Drupal header
    drupal_add_html_head($element_sitename,'facebook_share_sitename');

      
    //============= Set the default to the special square icon we created =============
    $defaultimg =  $base_url . "/images/outdoor-patriot-logo-sq.jpg";
    $img =  $defaultimg;

    // ============= Do special stuff for specific node types and nodes
    if (isset($variables['node']->type)) {
        $nodetype = $variables['node']->type;
       
        //if it is an 'news' content type
        //override the image with the article image
        if($nodetype == 'news'){
           
            /* As long as the image does not have a whitespace, use it.  Otherwise it should keep our default
               This is because FB rejects images with spaces in them
            */
            $pos = strpos($variables['node']->field_news_image['und'][0]['filename'], " ");
           
            if($pos){
                $img = $defaultimg; //found a space so use the default
            } else {
                //use path to an image that is at least 200x200 in both height and width or it will not work
                $img = $base_url . "/sites/default/files/styles/news_home_images/public/news-images/" . $variables['node']->field_news_image['und'][0]['filename'];
            }
        } //END: if node type = news
    } // END: if have node type

    
    // ============= If we are using the default image set the width and height so FB stops freaking out =============
    if ($img == $defaultimg){
        $element_height = array(
            '#tag' => 'meta',
            '#attributes' => array(
                "property" => "og:image:width",
                "content" => '250',
            ),
        );

        $element_width = array(
            '#tag' => 'meta',
            '#attributes' => array(
                "property" => "og:image:height",
                "content" => '250',
            ),
        );

        //add it to the Drupal header
        drupal_add_html_head($element_height,'facebook_share_image_h');            
        drupal_add_html_head($element_width,'facebook_share_image_w');            
    } //END: if using default image

    
    // ============= Create the open graph image tag =============
    $element_og = array(
        '#tag' => 'meta',
        '#attributes' => array(
            "property" => "og:image",
            "content" => $img,
        ),
    );

    //add it to the Drupal header
    drupal_add_html_head($element_og,'facebook_share_image');

    // ============= Create image_src tag =============
    $element_rel = array(
        '#tag' => 'link',
        '#attributes' => array(
            "rel" => "image_src",
            "href" => $img,
        ),
    );
   
    //add it to the Drupal header
    drupal_add_html_head($element_rel,'facebook_share_image_rel');

} // END: function