As you all now I’ve recently started this blog. The form that I want it to be is still in progress. I’ve got a lot of ‘things’ to do in terms of adjusting and enhancing it. In general when it comes to changes in WordPress, it always involves PHP and obviously some WordPress stuff. I won’t reveal anything special here if I tell you that I’m not best when it comes to PHP or WordPress. That’s simply because I’m a .NET developer, so often I’m not familiar with some concepts or framework features that PHP or WordPress is providing. Thus, even if there are some neat functions, just under my nose, that are waiting to be used and I’m not even close to use them, please, forgive me.

But anyways, lately I was trying to share my post on Facebook. So I’ve clicked the Facebook Share button that was already there for me (thank you GoodSpace Theme) and a sharing screen appeared (or you have to log into your Facebook account and then Facebook Share screen appears). I was little bit disappointed when it turns out that the screen looks more or less like that:

Https Facebook Share Problem

There is nothing there, right ? You wrote like ~1000 words, put a lot of images in the post and all of the content is not showing as it suppose to. This problem could be caused by wrong address to your site (post in this case) that you have put to share. My problem was the https protocol that was inside my site address and which was causing this kind of behaviour. Facebook Scraper didn’t see anything, which is perfectly understandable because under https://progrunning.net address there’s nothing, blank page.

Https_Sharer_Address_Bar

Solution for this problem was to get rid of https and put insted http protocol. In general you must be perfectly sure that you give Facebook Scraper the correct address to inspect and scrap out of. The best way to check if everything is as you plan it to be, is to use Open Graph Object Debugger e.g. this post looks like that. This tool not only shows you how things will look like after sharing but also let you know what are the possible issues, what info you should provide, what is the best resolution for images etc. Generally everything that you should know or be aware of when sharing content on Facebook. Of course just in a nut shell, because sharing with Facebook and Open Graph is a complicated topic.

When it comes to GoodSpace Theme, code responsible for creation of Facebook Share link is located in social-share.php file. The issue lies in this snipped of code:

$currentUrl = $_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'];
if( !empty($_SERVER['HTTPS']) ){
	$currentUrl = "https://" . $currentUrl;
}else{
	$currentUrl = "http://" . $currentUrl;
}

I don’t know excatly why in $_SERVER array there is non-empty entry for HTTPS key, which indicates that we are using SSL on our site, because it should stay empty when you are making Facebook Share request from HTTP protocol e.g. from here. Someone have an idea why it is like that ?

For me it was easy choice, just to remove line responsible for that, put comment on it, or change it to HTTP because I’m not going to use HTTPS protocol on my blog posts, ever. Addresses are always going to start with http://

$currentUrl = $_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI']; //if( !empty($_SERVER['HTTPS']) ){ //$currentUrl = "https://" . $currentUrl; //}else{ $currentUrl = "http://" . $currentUrl; //}

After that you can enjoy your quite finely composed Facebook Share link. Everything looks great. Your featured image, title of the post and a little bit of post content as well. Perfect, right ? Not quite. When you check your post (site) link in Open Graph Object Debugger you will see this kind of notification:

Open Graph Warning

Even though you have not explicitly specified what should be shared, Facebook Scraper is enough ‘inteligent’ to look for other, similar, relevant tags and takes information from them. Nevertheless, you should be aware of what excatly is going to be shared from your website. That is why you should add Facebook Open Graph tags to your website header, somewhere between these two .

<!-- FB Share Properties
================================================== -->	
<?php 
	function get_excerpt_by_id($post_id){
		$the_post = get_post($post_id); //Gets post ID
		$the_excerpt = $the_post->post_content; //Gets post_content to be used as a basis for the excerpt
		$excerpt_length = 70; //Sets excerpt length by word count
		$the_excerpt = strip_tags(strip_shortcodes($the_excerpt)); //Strips tags and images
		$words = explode(' ', $the_excerpt, $excerpt_length + 1);
		if(count($words) > $excerpt_length) {
			array_pop($words);
			array_push($words, '…');
			$the_excerpt = implode(' ', $words);
		}
		//$the_excerpt = '<p>' . $the_excerpt . '</p>';
		return $the_excerpt;
	}	
	
	if( is_single() ){
		$post_id = get_the_ID();		
		$thumbnail_id = get_post_thumbnail_id();
		
		echo '<meta property="og:url" content="' . get_permalink($post_id) . '" />';
		echo '<meta property="og:title" content="' . get_the_title($post_id) . '" />';
		echo '<meta property="og:description" content="' . get_excerpt_by_id($post_id) . '" />';
		echo '<meta property="og:type" content="blog"/>';
		echo '<meta property="og:site_name" content="Mikolaj Kieres Blog"/>';
		
		if( !empty($thumbnail_id) ){
			$thumbnail = wp_get_attachment_image_src($thumbnail_id, 'full');
			echo '<meta property="og:image" content="' . $thumbnail[0] . '" />';			
		}
	}
?>

I don’t think that this code is really hard to understand. Idea is to add some tags that Facebook Scraper could recognise and you, as a developer or just author, were able to take control over what users will see after sharing your page on Facebook. Alhough, I would like to mention that function get_excerpt_by_id() is not mine, it was written by a guy named Withers Davis and I found it on his blog, here.

The final version of what is shown on user who shared a link from your page looks like this, compared to what it was at the beginning

Before and After on Timeline