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://4.bp.blogspot.com/-z3s2Jm6CHB0/VuXdZ_-X53I/AAAAAAAAZo4/GCKjYpD0qmIC9-aHwmwjskz2E0qfxQ-5Q/w1200-h630-p-nu/Screenshot%2B2016-03-13%2Bat%2B14.35.32.png' property='og:image'/>

So, what do we have?

<meta content='https://4.bp.blogspot.com/-z3s2Jm6CHB0/VuXdZ_-X53I/AAAAAAAAZo4/GCKjYpD0qmIC9-aHwmwjskz2E0qfxQ-5Q/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

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?".

With Following, Anonymous Followers Can't Be Blocked

As people become used to Blogger Following as just another tool to connect people, they start to think about the implications . And we see questions like How do I block someone who's been following my blog secretly? I couldn't see her in my Followers list (hence I couldn't use the "Block this user" link), but I have looked at her profile and could see that she's Following my blog. Following, when you look at the bottom line, is no more than a feed subscription and an icon (possibly) displayed on your blog, and linking back to the profile of the Follower in question. If someone Follows your blog anonymously, all that they get is a subscription to the blog feed. If you publish a feed from your blog, and if the feed is open to anybody (which, right now, is the case ), then it's open to everybody. If someone wants to use Following to subscribe to the feed, you can't stop this. You can't block it before, or after, the fact. You can't Block w