Facebook Sharing Thumbnail Problem SOLVED!

Hey you guys,
I’ve been having issue with facebook not showing the thumbnail of my website’s homepage and posts for quite a while. And now, after following the instructions of many websites, I’ve cracked it. So, I’ll think I post this to help those who are encountering the same problems and to express my gratitude towards the websites whose content had helped me.

I’m just gonna tell you everything I did. Because honestly I don’t really know which of these make it work. (But if you know which one of these steps is unnecessary you can skip it and comment so that others can skip it as well)

1. Create a Facebook app and connect it to your website.
(It’s not as hard/complicated as it sounds)

– Go to https://developers.facebook.com/apps
– Create new app > Insert a display name (it can be anything – I chose my site’s name)
> Choose a category
– Facebook will show your app’s dashboard
– Go to settings > Insert your website’s URL in the “App Domains” area
> Add a new platform > Insert your website’s URL
– Copy your APP ID (yes, the long number)

Next step : 2. Install “WP Open Graph Protocol” plugin on WordPress.org
– Paste the app id (that you’ve just copied) into the “APP ID” area
– And upload a 200×200 px image that you will use as a default image for your site
(upload then copy the url and paste it into the Default Image area)
– You can tick the box of fallback image underneath — this is up to you
– Activate the plugin
– Now open new window > go to https://developers.facebook.com/tools/debug
insert your website URL and scroll down. You should see a list of meta tag and the default image that you just uploaded
– Ok, go back to your wordpress dashboard
– DEACTIVATE the plugin
(Sorry if this seems a bit stupid but this is exactly how i did it and i don’t want to skip anything because it might result differently – sorry, i’m no code expert T_T)

LAST STEP: 3. Paste this code
the following code came from http://www.wpbeginner.com/wp-themes/how-to-avoid-no-thumbnail-issue-while-sharing-post-on-facebook/
Thanks!!
– paste the code below in the “Theme Function.php”
– it can be anywhere within the <?php>
– Don’t! forget to make a copy of your Theme Function.php before you do this! Just in case…
———————————————-

function insert_image_src_rel_in_head() {
	global $post;
	if ( !is_singular()) //if it is not a post or a page
		return;
	if(!has_post_thumbnail( $post->ID )) { //the post does not have featured image, use a default image
		$default_image="http://example.com/image.jpg"; //replace this with a default image on your server or an image in your media library
		echo '<meta property="og:image" content="' . $default_image . '"/>';
	}
	else{
		$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
		echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';
	}
	echo "
";
}
add_action( 'wp_head', 'insert_image_src_rel_in_head', 5 );

———————————–
– Replace the “http://example.com/image.jpg&#8221; with your default image URL
– Save everything
– Go back to https://developers.facebook.com/tools/debug
– Click “debug” or “Fetch New Scrape Information” (depends on what page you’re in)
– Now! Try and share your link (both the homepage and the posts) on Facebook
* The thumbnail that will appear for the post will be the Featured Image*

I hope this help.
If you’re feeling kind please visit my site http://papercuts.co
(it’s written in Thai) and tell me what you think about it 🙂