Show the Image & Teaser Text you prefer – in SHARES of YOUR WordPress Post

Choose the image you want Facebook to show when sharing your Post

Are you getting frustrated by the text and images that are chosen for your article or page, when it’s SHARED in social media?

Facebook will try its best to interpret the content of your page but without your detailed guidance, it can easily display an inappropriate image or the wrong sentence from your post, which is out of context and not an effective teaser at all!

Part 1 of a 2-part series (WordPress Posts handled here):

How to guide Social Media programs to show the photo and excerpts YOU want whenever someone shares or likes your WordPress blog posts.

You will require a medium-level appetite to fiddle technically in your WordPress blog – but it is worth it for your Social Media marketing to work properly.

This is a long and seemingly complicated post, but steps 1, 2, 3, 7, 8 are really only for you to follow and apply ONCE.

Only steps 4, 5, 6 will be applicable to each blog post your write and should add a few minutes at most to your effort.

1 ~ Understanding Open Graph Meta tags

Open Graph (og:) is a protocol for informing social media players like Facebook what you want in certain fields.

When you do NOT specify Opengraph tags, systems like Facebook will decide for itself which image and text snippet to use in your post.  This could kill any possibility of your great content going viral!

This image illustrates the key Open Graph meta tags you should ideally specify yourself, so as to control how your information is posted on Social Media:

Illustration of Opengraph meta tags
Illustration of Opengraph meta tags

2 ~ Creating a fall-back image for your WordPress articles

In general, try to save your WordPress Post images as 1200×630 pixels (or 600×315 or 900×473) as this displays best in shares and will not give errors.

Create one image as your fall-back image should Facebook not find or like the image/s in your posts, e.g. of your logo or something representative that would work for different article topics.

Save this image as “opengraph_image.jpg” and place it in your image folder.

3 ~ Set up your WordPress Opengraph tags

As always when you fiddle in WordPress, make a full backup of your website & blog and preferably create and work in a Child Theme.

Next, locate your functions.php file (use an FTP program like Filezilla) in wp-content of your theme in your WordPress installation directory:

Finding Functions.php
Finding Functions.php

Edit the file the way you would normally edit code. If you are not sure what I am talking about, please stop now and ask us to help, or if you are brave, get a program called Filezilla and use it to connect to your hosting server and live blog folder.  Once you have found the file, right-click to view/edit it and it will open up in Notepad.

Scroll right down to the bottom of functions.php and then insert the following code:

function add_opengraph_doctype($output) {
    return $output . ‘
    xmlns=”https://www.w3.org/1999/xhtml”
    xmlns:og=”https://ogp.me/ns#”
    xmlns:fb=”http://www.facebook.com/2008/fbml”‘;
}
add_filter(‘language_attributes’, ‘add_opengraph_doctype’);

//Add Open Graph Meta Info from the actual article data, or customize as necessary
    function facebook_open_graph() {
        global $post;
        if ( !is_singular()) //if it is not a post or a page
            return;
        if($excerpt = $post->post_excerpt)
            {
             $excerpt = strip_tags($post->post_excerpt);
            $excerpt = str_replace(“”, “‘”, $excerpt);
            }
            else
            {
                    $excerpt = get_bloginfo(‘description’);
        }

            //You’ll need to find you Facebook profile Id and add it as the admin
            echo ‘<meta property=”fb:admins” content=”999999999“/>’;
            echo ‘<meta property=”og:title” content=”‘ . get_the_title() . ‘”/>’;
        echo ‘<meta property=”og:description” content=”‘ . $excerpt . ‘”/>’;
            echo ‘<meta property=”og:type” content=”article”/>’;
            echo ‘<meta property=”og:url” content=”‘ . get_permalink() . ‘”/>’;
            //Let’s also add some Twitter related meta data
            echo ‘<meta name=”twitter:card” content=”summary” />’;
            //This is the site Twitter @username to be used at the footer of the card
        echo ‘<meta name=”twitter:site” content=”@site_user_name” />’;
        //This the Twitter @username which is the creator / author of the article
        echo ‘<meta name=”twitter:creator” content=”@username_author” />’;
            
            // Customize the below with the name of your site
            echo ‘<meta property=”og:site_name” content=”http://yourownwebsitename.co.za“/>’;
            if(!has_post_thumbnail( $post->ID )) { //the post does not have featured image, use a default image
            //Create a default image on your server or an image in your media library, and insert it’s URL here
            $default_image=”http://yourownwebsitename.co.za/path-to-your-images-folder/opengraph_image.jpg“;
            echo ‘<meta property=”og:image” content=”‘ . $default_image . ‘”/>’;
        }
        else{
            $thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), ‘large’ );
            echo ‘<meta property=”og:image” content=”‘ . esc_attr( $thumbnail_src[0] ) . ‘”/>’;
        }

        echo “
    “;
    }
add_action( ‘wp_head’, ‘facebook_open_graph’, 5 );

You will need to customise the 3 bits in red above as follows:

  1. The fb:admins number is the profile number of the person who is the Admin of your Facebook Business Page.  To get this, go to the profile of the admin person, then copy the link at the top and place it into this tool (make sure to use one of the Facebook link example layouts shown in the tool): http://findmyfbid.com/
  2. The site_name to contain your own website’s url in the format shown
  3. The default_image to show the full path to where you saved your fallback image in step 2

Next save your changes, then click back on Filezilla where it will again ask you if you want to save – tick the box “Finish editing and delete local file” and click on Yes.

There may be errors in your code, which we will pick up in a later step.

4 ~ Set up your WordPress Excerpt

Log onto your WordPress editor and edit your latest post.  Scroll down until you see a box header Excerpt and type in the teaser that you want to appear in the Description of your post share.

If you do not see the Excerpt box, you will first need to go to Screen Options in the top right of your Post screen, and ensure that Excerpts is ticked.

An Excerpt is best 1 or 2 short sentences and you can tweak it once you’ve tested how it will appear (see below).

Please note that the “Continue reading” bit that may have appeared at the end of Excerpts on your Category and Index Pages, will no longer show when you create a custom Excerpt.  The article heading is still clickable though.  Just in case you thought you did something wrong…

HINT: in some WordPress themes/versions this Excerpt will now appear above your actual post content on your post page.  If you don’t like this, there is a way to override it…:  As above, edit your content-single.php page in the template-parts folder of your theme (in twentysixteen) to delete the line about excerpts (see below for the line marked in yellow) and save:

Dont show excerpt at top of post page
Dont show excerpt at top of post page

5 ~ Set up your WordPress featured image

Next you will include a featured image that you want to show in shares (representative of the post content) that corresponds to the image sizes mentioned in step 2.  This is done by scrolling down your post to the bottom right, where you can upload a featured image.

HINT: in some WordPress themes/versions this photo will now appear at the top of your post on your post page.  If you don’t like this, there is also a way to hide the featured image (you can still insert it wherever YOU want to in the post, but override it from automatically displaying at the top).  To do this, install and activate a WordPress Plug-in called, surprisingly, Hide Featured Image and then you can upload a featured image and elect to show or not show it in the new selection toggles provided above the featured image.

Hide Featured Image
Hide Featured Image

Now you can hide your featured image from automatically showing right at the top of your post like this:

hide-featured-image2

6 ~ Test your blog post with this scraper

Now you are ready to test the appearance of your blog post, as it will appear when someone shares the page / url.

Go to the live page of your blog post and copy the URL of your post from the navigation bar at the top (e.g. I will use my url for illustration purposes): http://smallbusinessvolution.co.za/how-your-usps-stop-you-from-being-sucked-into-the-digital-void/

Next you go to Facebook’s Object Debugger and then paste the URL link you copied as follows:

Facebook's Object Debugger
Facebook’s Object Debugger

Scroll down to see how Facebook interpreted your Opengraph Meta Tags, followed by a visual representation right at the bottom. It should come up with your Featured image, the correct Title, Site name and your custom Excerpt in the description, like this:

Test how your post SHARE will look
Test how your post SHARE will look

If anything does not show the way you want it to (e.g. your description is cut off), then you can edit it in WordPress before coming back to re-test it here.

HINT: Now for a trick – for some reason Facebook does not always seem to get it right the first try, so you may have to do exactly this, twice in a row – if you see text or an image you did not expect, try a second time before you start with other trouble-shooting.

If there are any errors, this Facebook Tester will also display errors (worry about the red errors marked with a !; the rest are warnings).  You can double check that you placed and saved the code correctly and that you put your own ID, site name etc correctly and if beyond that you still cannot figure out what is wrong, remember we are a click away from helping you.

7 ~ Rinse and Repeat Steps 4, 5, 6 for each Blog Post you want to control

It is obviously best to know this when you first start out with WordPress, but even if you just set up the Excerpt & Featured Image for new posts you write from now on, your Social Media efforts will still be better off than when you let Facebook et al make up their own fine minds about what to place in shares…

It stands to reason that people will want to share posts where the image is strong and appropriate, where the description is apt and invites you to click.  I have often wanted to share a post that interested me, but abandoned my attempt when the resulting share had images or text that were downright misleading or that I knew would simply make my friends go “next!”.

Your goal is to have your wonderful content shared as often as possible so that it can reach the people who are looking for the information you are offering!

Can you see how the time you spend preparing your posts to look just right when being shared on social media, will return the favour with dividends?

8 ~ Bonus tip if you were wondering…

You may have noticed the snippet right at the very bottom of this post (or in the excerpt above) that included the Like and Share buttons, as well as indicating how many people liked the post already. E.g.:

like-share-buttons

Having this on every post,  makes it very easy for people to Like or Share your post.

Don’t worry: you do not actually have to add it into each Post individually, since WordPress serves your posts dynamically, you can include the snippet in a feature like the Footer, to automatically be included on each Post.  Facebook will still know which Post you are on if you dynamically include the URL (see below).

You can also use a WordPress plug-in for social sharing (we use the free GetSocial floating plug-in, but it only works for desktop and does not come up for mobile users, and as a free tool it offers no support, which is sadly much needed).

You can easily get the code snippet to include your own Facebook Like and Share buttons on your posts – at the Facebook Button Code generator.

Once you have the code as you’ve personalised it, you need to add it in the appropriate place of your WordPress file footer.php found in your theme.

E.g. our code where we replaced the url with a php code snippet to dynamically allocate the url of the post’s permalink:

<div class=”fb-like” data-href=”<?php echo the_permalink(); ?>”
          data-width=”48″ data-layout=”standard” data-action=”like” data-size=”small” data-show-faces=”true” data-share=”true”></div>

It’s best placed in a container that will re-size responsively – and if you are unsure how to do this, remember, we are here to help!

May your Posts be shared all over Social Media…

Why not try out the Like / Share buttons below (scroll to the bottom) for yourself now, to see how it works?

It also helps us spread our labour of love!

gift

STAY AHEAD OF YOUR COMPETITION!

Receive our free blog posts in your inbox:

Your Name



 

 

Author: Ronel Pieterse

Ronel has spent 24 years in the corporate world (finance, banking, mining, manufacturing and agriculture) and has also started 5 small businesses herself over the past 20 years. Four of these are still operational today in one form or another. Ronel's passion is to use her considerable skills in spheres of business and IT to help other small business owners and entrepreneurs to grow their businesses to the next level and to attain sustainable competitive advantage in the process.

10 thoughts on “Show the Image & Teaser Text you prefer – in SHARES of YOUR WordPress Post”

  1. I’m impressed, I have to admit. Rarely do I come across a blog that’s both equally educative and engaging, and let me tell you, you’ve hit the nail on the head. The issue is something that not enough folks are speaking intelligently about. I’m very happy I found this in my hunt for something concerning this.

  2. I don’t even know how I ended up here, but I thought this post was great. I don’t know who you are but certainly you’re going to a famous blogger if you aren’t already 😉 Cheers!

  3. Great post. I am impressed! Very helpful information specially the final phase 🙂 I handle such info a lot. I was seeking this information for a long time. Thanks and best of luck.

  4. Your articles always include a decent amount of really up to date info. Where do you come up with this? Just saying you are very imaginative. Thanks again.

  5. I simply want to mention I’m very new to blogging and site-building and truly liked you’re web site. You actually have outstanding posts.

  6. Excellent post. I looked for something different completely,
    but stumbled on your site. I am pleased I did. Thank you for sharing this
    useful information.

Leave a Reply

Your email address will not be published. Required fields are marked *