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/AVvXsEinBb17rkStDcQMf4ySxb5DdvxHQM51ZwDHKE1fpfLBsh4uYuz2XEKgs6Do0mySLXLrQB7j1N-GiquUrzKWMNo3I4GRL-KR79KB0HxBisfjUkYSNW9hSytOiTR3rJmGTOo1c1Hl0j6XjtWv/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/AVvXsEinBb17rkStDcQMf4ySxb5DdvxHQM51ZwDHKE1fpfLBsh4uYuz2XEKgs6Do0mySLXLrQB7j1N-GiquUrzKWMNo3I4GRL-KR79KB0HxBisfjUkYSNW9hSytOiTR3rJmGTOo1c1Hl0j6XjtWv/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.

Use A Blogger Blog As An OpenID Host

We see an occasional request, in Blogger Help Forum: Learn More About Blogger, about commenting and the profile used when authenticated.

How do I have my comments linked directly to my blog? I don't want my comments linked to my profile, with people having to hunt for my blog links!

This person does not understand why we have Bogger / Google / Google+ profiles, linked from our comments.

Even if we can't provide direct links to our blogs, when commenting using a Blogger or Google account - we can do that, if we can comment, using an OpenID account. An OpenID account links directly to our designated blog - when we specify the right blog URL, while logged in using OpenID, to publish a comment.

Your Blogger blog will provide an OpenID account, just as well as a FaceBook or WordPress account will do, for any Blogger blog using Blogger hosted commenting. Blogs using third party commenting systems may, or may not, support OpenID.

Blogger has been providing, OpenID authentication, for comments, for some time.

Getting OpenID to work - to allow comments using a Blogger based OpenID "account", is not automatic, however. The OpenID V1 tags, which are part of the standard Blogger blog header, don't work. You'll need to replace them, with OpenID V2 - and you will need a Blogger account, with a Google / Google+ profile.

Here, as always, I'll advise you to backup the template - before and after tweaking it.

You'll add 3 lines of code. Copy and paste 3 lines (which may display here as up to 6 lines, wrapped), below.

<link href='https://www.google.com/accounts/o8/ud?source=profiles' rel='openid2.provider'/>
<link href='http://www.google.com/profiles/nnnnnnnnnnnnnnnnnnnnn' rel='openid2.local_id'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>

Access the dashboard Template wizard, and use "Edit HTML". At the top of the header section, look for the "all-head-content" tag.

Change

<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>

To

<b:include data='blog' name='all-head-content'/>
<link href='https://www.google.com/accounts/o8/ud?source=profiles' rel='openid2.provider'/>
<link href='http://www.google.com/profiles/nnnnnnnnnnnnnnnnnnnnn' rel='openid2.local_id'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<title><data:blog.pageTitle/></title>

Then, replace

nnnnnnnnnnnnnnnnnnnnn

with your Google or Google+ profile id. And hit "Save template".

The next time you are preparing to comment, on a blog that supports OpenID based comments, select OpenID, and provide the URL of your blog.

You will have to login, using your Blogger account with the right Google / Google+ profile, and accept the comment. Other than that, it's pretty straightforward.

>> Top

What's The BlogID Of My Blog?

This blog is (for those of you not familiar with it) "The Real Blogger Status".

The URL (name) of this blog is currently "http://blogging.nitecruzr.net/", and it was previously "http://bloggerstatusforreal.blogspot.com/". Subject to the details involved in the renaming process, I am entitled to rename this blog anytime that I wish, and the name (URL) can change, anytime I do so.

There is another "name" for the blog, that does not change (unless I should perform a blog / URL swap).

The BlogID is the internal name, that's setup when the blog is first created. Look at the source for the blog, in the header.

<head>

...

<link href='http://blogging.nitecruzr.net/' rel='canonical'/>
<link rel="alternate" type="application/atom+xml"
title="The Real Blogger Status - Atom"
href="http://blogging.nitecruzr.net/feeds/posts/default" />
<link rel="alternate" type="application/rss+xml"
title="The Real Blogger Status - RSS"
href="http://blogging.nitecruzr.net/feeds/posts/default?alt=rss" />
<link rel="service.post" type="application/atom+xml"
title="The Real Blogger Status - Atom"
href="http://www.blogger.com/feeds/24069595/posts/default" />
<link rel="EditURI" type="application/rsd+xml" title="RSD"
href="http://www.blogger.com/rsd.g?blogID=24069595" />

There we see two places to find the BlogID.

If you are a blog member, you can also find the BlogID in a few links in your dashboard. In some cases when asking for help in Blogger Help Forum: Something Is Broken, you may need the BlogID, as well as the URL.

Since the BlogID is easily visible in the blog source code, you'll not hide it with any useful result. The BlogID, when known, won't provide a hacker or blog thief access to the dashboard. Any URL which contains "blogID" can only be used by a blog owner or administrator.

If I were unlucky, and this blog was to be locked as suspected spam, the BlogID would become the LockedBlogID. In this case, the LockedBlogID may be the only thing useful in Blogger Help Forum: Something Is Broken.

Blogger Magic - Detecting The Blog Feed

Ever see a magician take a pack of playing cards, shuffle the deck, wave his wand over the deck, and make the Ace of Spades rise into the air? Pretty mysterious.

How about I wave my wand over my blog, and make the blog feed URL rise into your browser? You've seen a BlogList wizard - you add a blog to your bloglist. Just type in the blog URL, and it pops up the feed. How did it do that?

The answer isn't hard to see, just look in the template header, for the live blog.

You can find the feed URL, by viewing the template header.

Use View - "Page Source" with the blog displayed in your browser, or use an HTTP text proxy, to examine the blog code. There, you will find the auto discovery feed URL.

Here's the header for this blog.

<head>

...

<link href='http://blogging.nitecruzr.net/' rel='canonical'/>
<link rel="alternate" type="application/atom+xml"
title="The Real Blogger Status - Atom"
href="http://blogging.nitecruzr.net/feeds/posts/default" />
<link rel="alternate" type="application/rss+xml"
title="The Real Blogger Status - RSS"
href="http://blogging.nitecruzr.net/feeds/posts/default?alt=rss" />
<link rel="service.post" type="application/atom+xml" title="The Real Blogger Status - Atom" href="http://www.blogger.com/feeds/24069595/posts/default" />

...

</style>

There it is

http://blogging.nitecruzr.net/feeds/posts/default

You won't see anything from the template source, in "Page Elements" - "Edit HTML". You have to look at the live, rendered HTML.

Here's what you may see, in "Edit HTML".

<head>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<meta content='width=1100' name='viewport'/>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>

Not all third party templates will include the crucial code snippet:

<b:include data='blog' name='all-head-content'/>

If your template is missing that line of code, no magic for you.

Enable the blog feeds from the dashboard Settings page.

To enable the newsfeeds, use the dashboard Settings - Other - "Site feed" wizard. The choice of setting for "Allow Blog Feed" affects the use of dynamic templates, and successful search engine indexing of the blog.

Now, consider possible additional details which some blogs have. Both a custom domain redirect, and a custom feed (ala FeedBurner) redirect, may provide more challenge.

You can't change the native feed URL, without a feed redirector.

Also note that the URL shown in the header displays the native URL of the feed - and reflects the value of the internal feed URL variable. If you change this header record, that won't change the internal variable. To change the URL, you need to setup a redirected feed (such as a FeedBurner feed) - then use the Post Feed Redirect setting, to point to the redirected feed.

Set the "Post Feed Redirect URL", to point to the redirected feed.



You do know, I hope, that if your blog is private, it will not publish a feed. And finally, be aware that not all online services accept a redirected feed.

Any blog with a standard header will provide the feed URL, as auto discovery.

But once you understand the details, you can Follow any blog which has the auto discovery feed URLs, defined in the blog header. Just use the "Add" wizard in "Reading list", in your dashboard - and provide the URL of the blog.

Identifying Yourself, As The Owner Of Your Blog

Occasionally, somebody in Blogger Help Forum: How Do I? wonders

Why don't I have a Layouts (or Template) link in my dashboard?

or

How do I setup additional team members, without the right link in Permissions?

and the first question is

Are you logged in as the blog administrator / owner?

It's not difficult to verify the owner of your blog, if you have a public profile, and a standard template.

In your browser, select View, then "Page Source" or "Source". Or, use an HTTP text proxy. Look at the code for this blog, heavily trimmed and broken, for 'link rel="me"'.

<head>

...

<link rel="service.post" type="application/atom+xml"
title="The Real Blogger Status - Atom"
href="http://www.blogger.com/feeds/24069595/posts/default" />
<link rel="EditURI" type="application/rsd+xml"
title="RSD" href="http://www.blogger.com/rsd.g?blogID=24069595" />
<link rel="me" href="http://www.blogger.com/profile/08069634565746003311" />

There it is!

https://www.blogger.com/profile/08069634565746003311

or maybe you'd see

https://plus.google.com/114025756997654559499

That's my profile. Click on either link.

Find the Profile URL, and follow the link - and look at the Profile.

So, look at the header code for your blog, locate the "me" link, extract the attached URL, and follow the link- either for a Blogger Profile, or for a Google+ Profile.

If there's no "me" link - which is normal, for blogs under team ownership - look carefully in the sidebar - if the blog has a Profile / "About Us" gadget, you may be able to find a "www.blogger.com/profile/ ..." or "plus.google.com/ ..." link there.

With some team blogs, you may find a list of each individual profile, for the whole team. Each individual profile should have a different Profile ID in the attached URL - again, "www.blogger.com/profile/ ..." or "plus.google.com/ ...".

Then, find the Profile URL from your dashboard - and compare the two.

Take each available "www.blogger.com/profile/ ..." or "plus.google.com/ ..." link, paste it into your browser, and take a look - or click on the link, if possible. Then, go to your dashboard, and find the Profile URL, from the dashboard. Compare the two profiles - are they the same?

If not, you probably inadvertently created a second (or third) Blogger account, possibly as you incorrectly transferred a blog from one Blogger account to another.

Learn to login to Blogger properly - and avoid multi account confusion.

When you login to Blogger, first clear cache, cookies, and active login sessions - then make sure that you login using the proper Blogger account. If necessary, recover the account information, and start over.

Remember that when you login, Blogger will not select the account for you. If you have FeedBurner, GMail, Picasa, or any of the other many Google services under another account, you'll need to use two different browsers - or a different computer.

Note the limitations of the procedure, when the owner wants privacy.

Note that this procedure works only for blogs and profiles that are properly made public. If a blogger has chosen to not make the profile public, or if the blog in question is published as private (with designated readers), you won't get the details needed here. And if the blog has multiple administrators, it probably won't have the "me" meta tag in the header.

In extreme cases, you'll need assistance from Blogger, using the Having trouble signing in? wizard. Now, you have to hope that your account isn't intentionally based on a bogus email address.

Identify The Template In Your Blog

My preferred policy in Information Technology starts with

Everything has a name.

Having worked with Blogger for several years, I have compromised that, and now say

Everything should have a name.

Unfortunately, there will always be things that have no names, they are just there.

When you work on the template in your blog, and especially when you ask for help with the template, the first thing that you must provide is the URL of the blog.

The first thing that I do, when providing template help, is look at the blog, and determine.

• Is the template classic, or layouts?
• What is the make and model?
  • Is it a Blogger standard template, or third party?
  • If Blogger, what "model" is it?

While you're reading this article, do "View page source" or "Ctrl+U" (for Chrome), "View", then "Page Source" (for Firefox), or "View", then "Source" (for Internet Explorer). Alternately, use an HTTP text proxy. That will give you a display of the code behind the page. You'll find a couple relevant and useful clues, in the display.

At the top, and since this blog uses a Blogger standard template, you will find the template "model" information. Third party templates may, or may not, have this. Likewise, highly customised templates may, or may not, have this.

/*
-----------------------------------------------
Blogger Template Style
Name: Simple
Designer: Josh Peterson
URL: www.noaesthetic.com
----------------------------------------------- */

That tells me that I am looking at a blog that uses the Blogger standard "Simple" template. It's "Simple" - but somewhat customised.