Blogger Resolves The FaceBook Photo Sharing Issue

Blogger Engineers recently added Blogger template code, to provide images in shares to FaceBook.

The added code is included in the standard template header. If you have a custom template, you may need to verify template header content.

If you have added the previously recommended Open Graph Code to your blog, to allow Open Graph based post / photo sharing - and you use the FaceBook Developers Debugger tool, you may see a new diagnostic suggestion.

Given newly added template code, blogs with added OG code may generate ominous warnings in the FaceBook Developers Debugger tool.

Looking at my blog, and the blog main page.

Object at URL 'http://blogging.nitecruzr.net/' of type 'article' is invalid because it specifies multiple 'og:url' values: http://blogging.nitecruzr.net/, http://blogging.nitecruzr.net/.

Looking at my blog, and a FaceBook Debug log, for this post.

Object at URL 'http://blogging.nitecruzr.net/2016/03/blogger-resolves-facebook-photo-sharing.html' of type 'article' is invalid because it specifies multiple 'og:url' values: http://blogging.nitecruzr.net/2016/03/blogger-resolves-facebook-photo-sharing.html, http://blogging.nitecruzr.net/2016/03/blogger-resolves-facebook-photo-sharing.html.

With Blogger now providing a properly resized image, automatically, from each post, the image provided in the previously suggested Open Graph code is now redundant - and causes duplication.

The browser source listing, for this post.

The FaceBook Debugger log, for this post.



Here's what I see now, in the standard template header.

<meta content='Blogger recently added template code, to properly share content to FaceBook. Learn how this affects your blog.' name='description'/>
<meta content='http://blogging.nitecruzr.net/2016/03/blogger-resolves-facebook-photo-sharing.html' property='og:url'/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqAwPngF8wVHKBg-4CTrKgEOUXfgtPIjSzp0sFgOqkFhMJhTKHaqT_qX06vE2Ib1fDdOMkwKs6Y17_XlYoZJxTQPoGHh_HerSMTCcWUT4O0JfV77PPXC3hkE6qypiqpqK69lBuQW6wOA-6/w1200-h630-p-nu/Screenshot+2016-03-13+at+14.35.32.png' property='og:image'/>

So, what do we have?

<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqAwPngF8wVHKBg-4CTrKgEOUXfgtPIjSzp0sFgOqkFhMJhTKHaqT_qX06vE2Ib1fDdOMkwKs6Y17_XlYoZJxTQPoGHh_HerSMTCcWUT4O0JfV77PPXC3hkE6qypiqpqK69lBuQW6wOA-6/w1200-h630-p-nu/Screenshot%2B2016-03-13%2Bat%2B14.35.32.png' property='og:image'/>

The chosen image - resized to 1200 x 630, to suit the FaceBook recommended 1.9 aspect ratio - and large, to suit the FaceBook recommended size.

Now, 3 data elements (2 Open Graph) may be redundant.

• description
• og:image
• og:url

This makes the immediately previous advice unnecessary.

If one wishes to provide author information, that also becomes slightly simpler.

<!-- BEGIN Open Graph tags -->
<meta expr:content='data:blog.metaDescription' name='description' property='og:description'/>
<meta expr:content='data:blog.pageTitle' name='keywords'/>
<b:if cond='data:blog.pageType == "item"'>
<meta content='article' property='og:type'/>
<meta content='https://plus.google.com/nnnnnnnnnnnnnnnnnnnnn/about' property='article:author'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='blog' property='og:type'/>
</b:if>
<meta expr:content='"en_US"' property='og:locale'/>
<!-- END Open Graph tags -->

If you truly want to share author details, you still have some work to do - but photos should now be shared, automatically, if your blog has a template with a standard header.

---

Recently, Blogger Engineering added OG code to the standard template header, to allow us to share posts with images to FaceBook, without having to add special code. This should help, for owners of blogs which have standard headers.

Read More

Base64 Photo Hosting, And Open Graph Code

Some blog owners make photos an important part of blog content.

When sharing a post to FaceBook, problems are seen with photo content. In some cases, this is because of how the photos were added into the post, when using Post Editor.

We've known about problems with photos installed using drag and drop, and post editor, for a few years. Drag and Drop photos, in some cases, are stored as "Base64" content - with the photo content hosted in the post, instead of Google Photos (or Picasa).

Photos added to posts in post editor, using "drag and drop", have been a problem for many years.

Base64 hosted photos make posts abnormally large.

Posts containing "Base64" encoded photos are abnormally large - and will cause problems with the index pages, and auto pagination. That is a nuisance - but just that.

With posts shared to social media, such as FaceBook and Twitter, photos hosted using Base64 become more than a nuisance. When normal posts are shared to FaceBook, OpenGraph code is used to identify key post content - such as a photo to accompany the shared post.

Open Graph code uses URLs to reference photos.

OG code uses HTML / XML tags, in template code - with a URL identifying a shared photo. A post that contains Base64 hosted photos won't have URLs identifying the photos - it will have the actual photo content.

This photo was installed, using drag and drop. Interestingly enough, it is not Base64. It is possible that Blogger no longer uses Base64 encoding - which would explain why the problem with OG code is rather irregular.

When shared to FaceBook, the photo must be converted to normal Google Photo hosted content, so it can be shared using a URL - as normal photos are shared, using OG code. If shared using Base64 content (if OG were to support Base64), the post, again, becomes abnormally large.

Base64 hosted photos simply present one more complication, when sharing posts to FaceBook, Twitter, and other social services.

---

Some blog owners publish posts that contain photos added using drag and drop. Some drag and drop installs result in Base64 hosted photos - which must be converted to Google Photos hosted content, when shared to FaceBook or Twitter.

Read More

Using The Meta Search Description In Your Blog

There is some confusion, about including "search description" meta content, in blog template code, to provide source for data shares to social sharing sites.

In various topics in Blogger Help Forum: Get Help with an Issue, I've seen references to "data:post.metaDescription", "data:post.snippet", and "data:post.pageTitle" used, in providing the blog post source for the FaceBook "og:description" tag. As far as I can tell, none of these exist.

The Layout data tag "data:blog.metaDescription", which provides "og:description", does exist - though it seems to be referenced, ambiguously.

Some FaceBook Open Graph content references different Blogger tags, depending upon page type. The FaceBook "og:title" references "data:blog.pageName" with an "item" (post) page, and "data:blog.title"; with other pages.

"og:description", on the other hand, only references one Blogger tag - "data:blog.metaDescription". The latter appears to change its source, depending upon whether the main page, or a post page, is being viewed.

• In main page mode, the per blog "Description", from Settings - Search preferences, is referenced.
• In post page mode, the per post "Search Description", from the Post Editor "Post settings", is referenced.

Source listing for this blog, in main page view.

"What Blogger won't (or can't) tell you. Blogger features and problems explained, using real life examples."

Source listing for this post, in post page view.

"Blogger provides the meta tag "data:blog.metaDescription", which seems to vary in source. Learn how it varies."



There is no mention of "data:blog.metaDescription", in the reference Blogger Help: Layouts Data Tags - as either a per blog, or per post, data element.

In my earlier post, my reference to "'data:blog.metaDescription' name='description'" was simple. But simplicity can lead to confusion.

<meta expr:content='data:blog.metaDescription' name='description' property='og:description'/>

Some tags are universal, others vary depending upon page type ("item" being post page).

<!-- BEGIN Open Graph tags -->
<meta expr:content='data:blog.metaDescription' name='description'' property='og:description'/>
<meta expr:content='data:blog.pageTitle' name='keywords'/>
<b:if cond='data:blog.pageType == "item"'>
<meta content='article' property='og:type'/>
<meta content='https://plus.google.com/nnnnnnnnnnnnnnnnnnnnn/about' property='article:author'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<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 expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.canonicalHomepageUrl' property='og:url'/>
<meta content='blog' property='og:type'/>
<meta content='http://xxxxxxxxxxxxxxxxx/xxxxxxxxxxxx/xxxxxxxxxxx/xxxxxxxxxxx/xxxxxxxxxxx/S1600-R/yyyyyyyyyyyyy.gif' property='og:image'/>
</b:if>
<meta expr:content='"en_US"' property='og:locale'/>
<!-- END Open Graph tags -->

'data:blog.metaDescription' name='description' is referenced once, in the template code - and the source is apparently determined, based on the context.

If you find this confusing, I have to agree with you.

---

#Blogger provides the Layout data tag "data:blog.metaDescription", which is used for the FaceBook meta ag "og:description" - for both blog main page, and post pages, when shared. This is in contrast to the FaceBook meta tag "og:title" and others, which use different Blogger data tags for the main page and post pages.

This variation has caused some confusion - and attempted use of different non existent Blogger data tags.

Read More

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.

Read More