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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiim6Npm_l_FkmnT7M2ZR-OrQLuaD42SAiDRyhAhXOf4pbRideSrn2hXzBgZo8XhzMGhxxjt50a2LTJOSE-ZRrg7RNX2mz1z5q-KNmf3YWCAyArC1Jh2lytWZc2op4UTULruOpMJMIhqo2w/s1600/Screenshot+2016-02-15+at+13.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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiim6Npm_l_FkmnT7M2ZR-OrQLuaD42SAiDRyhAhXOf4pbRideSrn2hXzBgZo8XhzMGhxxjt50a2LTJOSE-ZRrg7RNX2mz1z5q-KNmf3YWCAyArC1Jh2lytWZc2op4UTULruOpMJMIhqo2w/s1600/Screenshot+2016-02-15+at+13.08.21.png' property='og:image'/>
</b:if>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiim6Npm_l_FkmnT7M2ZR-OrQLuaD42SAiDRyhAhXOf4pbRideSrn2hXzBgZo8XhzMGhxxjt50a2LTJOSE-ZRrg7RNX2mz1z5q-KNmf3YWCAyArC1Jh2lytWZc2op4UTULruOpMJMIhqo2w/s1600/Screenshot+2016-02-15+at+13.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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiim6Npm_l_FkmnT7M2ZR-OrQLuaD42SAiDRyhAhXOf4pbRideSrn2hXzBgZo8XhzMGhxxjt50a2LTJOSE-ZRrg7RNX2mz1z5q-KNmf3YWCAyArC1Jh2lytWZc2op4UTULruOpMJMIhqo2w/s1600/Screenshot+2016-02-15+at+13.08.21.png' property='og:image'/>
</b:if>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiim6Npm_l_FkmnT7M2ZR-OrQLuaD42SAiDRyhAhXOf4pbRideSrn2hXzBgZo8XhzMGhxxjt50a2LTJOSE-ZRrg7RNX2mz1z5q-KNmf3YWCAyArC1Jh2lytWZc2op4UTULruOpMJMIhqo2w/s1600/Screenshot+2016-02-15+at+13.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.