Skip to main content

Sharing Blog Content, With Photos, To FaceBook

We have a few blog owners, reporting problems with sharing their blogs to FaceBook.
When I share my blog on FaceBook, the photo from the blog doesn't appear. Some blurry pencil appears instead.
What the blog owner is seeing, is the effect of the FaceBook Share wizard, grabbing an unwanted photo, from the page being shared.

You have 2 choices, if you want to share blog content to FaceBook - and have it all look attractive.
  1. Publish every post, containing a photo that FaceBook will want to use.
  2. Add FaceBook Open Graph code, to your blog.

Too many blogs do not contain quality photos, per FaceBook Standard.



(Update 3/14): Blogger Engineering having recently added OG code to the standard template header, this tweak may be unnecessary for most blog owners.


The problem, that too many blog owners have, is that their photos do not have the correct quality, to FaceBook.

  • At least 200×200 pixels in both width and height.
  • Aspect ratio of width and height no greater than 3; in other words, the width can’t be more than three times more than the height, and vice versa.

Please define a chosen image using the og:image metatag, and use an image that's at least 200x200px and is accessible from Facebook.

Current opinion seems to suggest that an image of minimum size 400 x 400 px is better than 200 x 200 px. In other words, the image which fits neatly into the post column may not be a good choice.

Without a suitable photo in shared content, FaceBook Share gets imaginative.

If your main page, or post page, does not contain an acceptable photo, the FaceBook Share wizard will pick an image from the page. The first thing that the wizard looks for is a transparent image.

This is where the infamous "pencil" or a similar image becomes involved. The "pencil" - if the blog owner is doing the sharing - is found at the bottom of the post. It's also known as the "Quick Edit" icon.

If Quick Edit is not enabled, or the person submitting the share is not a blog owner, the "pencil" won't be available. In this case, FaceBook Share will grab a similar icon, from the blog face - or maybe from the sidebar.

We need Open Graph code, to instruct FaceBook Share how to find a photo.

FaceBook Open Graph code is not hard to develop - or install - but you do need to use the right code.

If you want something better than the "pencil" or similar fluff from being included in your shares, you add FaceBook Open Graph code, to tell FaceBook how to find an appropriate photo. You can specify a photo to include when the main page is shared - and (if you like) a different photo to include when a post, with no photo, is shared.

Some very simple code - not!

One would be helper has been making forum noise recently, with some very simple code.

<!-- Open Graph Meta Tags BEGIN -->
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
</b:if>
<!-- Open Graph Meta Tags END -->

There are two problems with this simple code.

  1. It's based on post code - and has nothing to make a main page share come out right.
  2. It requires a suitable image, in the post. We are here, because many posts do not have suitable images.

Something more than the simple code is needed.

Develop the proper simple code.

So the simple code requires a little more effort. This is what I recommend:

<!-- BEGIN Open Graph tags -->
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<meta content='http://xxxxxxxxxxxxxxxxx/xxxxxxxxxxxx/xxxxxxxxxxx/xxxxxxxxxxx/xxxxxxxxxxx/S1600-R/yyyyyyyyyyyyy.gif' property='og:image'/>
</b:if>
<b:else/>
<meta content='http://xxxxxxxxxxxxxxxxx/xxxxxxxxxxxx/xxxxxxxxxxx/xxxxxxxxxxx/xxxxxxxxxxx/S1600-R/yyyyyyyyyyyyy.gif' property='og:image'/>
</b:if>
<!-- END Open Graph tags -->

There are two alternate possibilities that we want to allow for.

  1. Sharing the blog itself - and no post containing an acceptable image, on the main page.
  2. Sharing a post - and no acceptable image, in the post

Please note that http://xxxxxxxxxxxxxxxxx/xxxxxxxxxxxx/xxxxxxxxxxx/xxxxxxxxxxx/xxxxxxxxxxx/S1600-R/yyyyyyyyyyyyy.gif needs to be replaced with an actual URL of a real photo, that fulfills FaceBook requirements, for this feature to be useful. Choose a good photo, that will represent the blog when shared in main page, or a post with no suitable photo.

Now, I need a default photo, to use when no acceptable image is involved, when sharing this blog. Here's a screen print of the opening page of this post.




And, the URL from the screen print.

https://4.bp.blogspot.com/-SToaLiXIkk4/VsI-fQ8n-ZI/AAAAAAAAYiA/DIJPwBdDrjM/s1600/Screenshot%2B2016-02-15%2Bat%2B13.08.21.png

This gives me:

<!-- BEGIN Open Graph tags -->
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<meta content='https://4.bp.blogspot.com/-SToaLiXIkk4/VsI-fQ8n-ZI/AAAAAAAAYiA/DIJPwBdDrjM/s1600/Screenshot%2B2016-02-15%2Bat%2B13.08.21.png' property='og:image'/>
</b:if>
<b:else/>
<meta content='https://4.bp.blogspot.com/-SToaLiXIkk4/VsI-fQ8n-ZI/AAAAAAAAYiA/DIJPwBdDrjM/s1600/Screenshot%2B2016-02-15%2Bat%2B13.08.21.png' property='og:image'/>
</b:if>
<!-- END Open Graph tags →

And, there is the simple OG code, that I might use for sharing this blog, with a proper image, to FaceBook. This is actually a portion of the code needed, when adding author identification to FaceBook shares.

You might use similar code - having chosen and developed a good quality photo, to represent your blog.

Install the proper simple code.

To install the code, you will use the Template Editor. Please backup the template, before and after you make this simple change!

Start by locating the "<HTML ... >" tag, at the top of the template header.

Find:

<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

And replace with:

<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<!-- BEGIN Open Graph tags -->
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<meta content='https://4.bp.blogspot.com/-SToaLiXIkk4/VsI-fQ8n-ZI/AAAAAAAAYiA/DIJPwBdDrjM/s1600/Screenshot%2B2016-02-15%2Bat%2B13.08.21.png' property='og:image'/>
</b:if>
<b:else/>
<meta content='https://4.bp.blogspot.com/-SToaLiXIkk4/VsI-fQ8n-ZI/AAAAAAAAYiA/DIJPwBdDrjM/s1600/Screenshot%2B2016-02-15%2Bat%2B13.08.21.png' property='og:image'/>
</b:if>
<!-- END Open Graph tags →

Save the changes. And again, backup the template, before and after you make this simple change!

And with the code added to your template, you can verify your code. In extreme cases, you may need advice from FaceBook Support. You may also find FaceBook Developers: Sharing Best Practices for Websites & Mobile Apps to be a helpful reference.

---

Many #Blogger blog owners share posts (and the blog itself) to FaceBook, with no problems. Some have recently observed odd images being included with the content shared.

An apparent change to the FaceBook Sharing wizard has caused odd photos to be included, with blogs that lack the necessary Open Graph code. Open Graph code is not complicated - but it does need to allow for possibilities.

Comments

Hi there!

I write a blog but know nothing about programming.

Until some time ago, whenever I shared a new post into FB it choose the first image of the post and that was fine (although I'd prefer to control which one to share every time). And it also got the title of the post correctly.

Now it always chooses the header picture of the blog and inserts the blog's title and description instead. Also, if I try to share the blog itself it chooses not the header picture but some old one from one given post...

FB debugger gives me this:

"og:image was not defined, could not be downloaded or was not big enough. Please define a chosen image using the og:image metatag, and use an image that's at least 200x200px and is accessible from Facebook. Image 'http://1.bp.blogspot.com/-vVHBaAssg-E/VdiSUEICydI/AAAAAAAAApw/Tsmhu4ZefTk/s1600/dpca%2Bblog%2Bcover%2Bv3.png' will be used instead. Consult (...) for more troubleshooting tips. To find the object, these are the redirects we had to follow"

But the pictures in the post (or the blog's header) are in fact larger than 200x200.

I've added code as suggested in FB and bloggers tutorials but still no juice...

What's wrong?

I'm using Addthis as the sharing "platform". Example post: http://doportocomamor.blogspot.pt/2016/02/brincar-com-o-fogo.html

thanks a lot in advance
Marino de Stena said…
Thank you very much for your post.
What if my Blogger post does NOT have any picture on it (it only has got text) and I want to share it without ANY picture on Facebook?
Thanks!
Chuck Croll said…
Hi Marino,

Thanks for the question.

Long ago, the FaceBook Share wizard used to include the option to not have a picture. There is now no such option.

If you don't specify an image, FaceBook will grab one from the blog. And that is where the mysterious "pencil" / "tools" icons come into existence.

Popular posts from this blog

Custom Domain Migration - Managing The Traffic

Your blog depends upon traffic for its success.

Anything that affects the traffic to your blog, such as any change in the URL, affects the success of your blog. Publishing the blog to a custom domain, like renaming the blog, will affect traffic to your blog. The effects of the change will vary from blog to blog, because of the different traffic to every different blog.Followers. People who find your blog because of recommendations by other people.Search engines. Robotic processes which methodically surf your blog, and provide dynamic indexing to people who search for information.Subscribers. People who read your content from their newsfeed reader, such as the dashboard Reading List.Viewers. People who read your content from their browser.No two blogs are the same - and no two blogs will have the same combinations of traffic sources.

Stats Components Are Significant, In Their Own Context

One popular Stats related accessory, which displays pageview information to the public, is the "Popular Posts" gadget.

Popular Posts identifies from 1 to 10 of the most popular posts in the blog, by comparing Stats pageview counts. Optional parts of the display of each post are a snippet of text, and an ever popular thumbnail photo.

Like many Stats features, blog owners have found imaginative uses for "Popular Posts" - and overlook the limitations of the gadget. Both the dynamic nature of Stats, and the timing of the various pageview count recalculations, create confusion, when Popular Posts is examined.