Skip to main content

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/AVvXsEh1oSmt5FueHpccciakALUNT3iiggTFumPcP3QErXNB6g4ksta8J3ji9bWRV7za9Wg6wFn4a91zM4qFvgqzhmhGkVTgi96IqWbtR-FDNzfugTyTzDvVZ_5EmvY-YOSDZNeh2ywclg/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/AVvXsEh1oSmt5FueHpccciakALUNT3iiggTFumPcP3QErXNB6g4ksta8J3ji9bWRV7za9Wg6wFn4a91zM4qFvgqzhmhGkVTgi96IqWbtR-FDNzfugTyTzDvVZ_5EmvY-YOSDZNeh2ywclg/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.

This won't be present, in all templates / themes.

OG code is produced by FaceBook - and used in sharing to FaceBook and Twitter. Blogger did a lot of work, to include the necessary code in the newer Blogger supplied templates. Older Blogger templates - and custom, third party templates - may not contain this level of detail. If sharing to FaceBook and / or Twitter is a priority, you may want to consider moving your blog to a new, Blogger supplied theme.



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.

Comments

Unknown said…
I have tried to make sense of this and to apply it to my own blog - which suffers from this trivial yet annoying issue. My fruitless endeavors have led me to ask the help of many people, but none can help me it seems. I know this might be a simple ordeal for some, but I'm not familiar with the HTML lingo and therefore have little to no reference when it comes to finding a viable remedy for this stupid situation. PLEASE HELP.
I've copied and pasted some of these codes, and nothing seems to work.
Nitecruzr said…
Hi Dorje,

Thanks for your observation!

This was broken, during the past 3 or 4 days - but it was just fixed, this afternoon (14:00 or so Pacific USA time). So be patient - and try your blog, later today.

If necessary, update a post, and see what your meta code looks like. Post in Blogger Help Forum: Get Help with an Issue, if you like - and we'll take a look.

Popular posts from this blog

Adding A Link To Your Blog Post

Occasionally, you see a very odd, cryptic complaint I just added a link in my blog, but the link vanished! No, it wasn't your imagination.

Embedded Comments And Main Page View

The option to display comments, embedded below the post, was made a blog option relatively recently. This was a long requested feature - and many bloggers added it to their blogs, as soon as the option was presented to us. Some blog owners like this feature so much, that they request it to be visible when the blog is opened, in main page view. I would like all comments, and the comment form, to be shown underneath the relevant post, automatically, for everyone to read without clicking on the number of comments link. And this is not how embedded comments work.

What's The URL Of My Blog?

We see the plea for help, periodically I need the URL of my blog, so I can give it to my friends. Help! Who's buried in Grant's Tomb, after all? No Chuck, be polite. OK, OK. The title of this blog is "The Real Blogger Status", and the title of this post is "What's The URL Of My Blog?".