08 July 2010

Show location on Blogger posts

While location services are gaining more and more coverage and users, it’s easy to overlook similar features for bloggers. For Blogger users, geo-tagging articles is available as a feature of Blogger in Draft. If you use it as your default dashboard, you have probably noticed the ‘Location’ box below the post editor, next to ‘Labels’. Once you search and add a location, the data is added to the blog post and the RSS feed after publishing. It’s picked up in any application that supports it, like . Blogger post location displayed on Google Buzz

Of course, adding a location doesn’t always make sense or adds relevant information for the reader. But if you run a photo-blog, for example, location can add valuable context to the photos you are sharing and talking about. The information could be used by search engines to correctly rank the blog posts when doing a local search. I’m not sure if that is the case now, but I don’t think there is a technical reason why this couldn’t be implemented.

Blogger enable location for articles in the dashboardThe article location can also be displayed for the visitors on the web site. With a fresh, unaltered template it’s only a matter of activating a check box: in the Blogger in Draft dashboard, go to Design ► Page Elements, click Edit on the Blog Posts widget and activate the check box like in the screenshot on the right. Here you can set up where the new box will appear in the blog post and the caption – by default “Location: ”. After saving, the blog should display a new element on those blog posts where you specified a location during compose.

If that’s not the case, there is always the manual fix: a piece of code to be added to the template. On the same Design tab, visit Edit HTML – preferably after you back-up the template, check Expand Widget Templates and add the code below:

<span class='post-location'>
<b:if cond='data:top.showLocation'> <b:if cond='data:post.location'>
  <data:postLocationLabel/> <a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a> </b:if> </b:if> </span>

Where you add the code depends on where you want the location element to display. To show it in the footer for example, paste the lines after <div class='post-footer-line post-footer-line-1'>. I added it inline right after the post timestamp; in this case, look for <div class='post-header-line-1'> and add the location code after the two closing <span> tags for author and timestamp.

Blogger location displayed on the home pageIt’s a bit odd that this feature, launched more than a year and half ago, still wasn’t added to the regular Dashboard for all users, while other features took a couple of months to graduate. My guess is the Blogger team is waiting for a more wide-spread support of geo-location in browsers; instead of manually choosing the location, the browser could detect and suggest it to the user, making geo-tagging easier and faster.

Update: After a lengthy discussion in the comments as well as some testing of my own, it appears Blogger has a bug with displaying location in mobile templates, if you’re using anything other than ‘Dynamic views’ and have also connected your profile with Google+. You can read more about it in Sam Nordberg’s article, the reader who first mentioned it to me. I filed a bug report on the support forum and you can follow it there and vote the issue, but based on my previous experience, it’s unlikely it will be fixed anytime soon…

16 comments:

  1. Thank you for the hack but I have question on how adding it automatically when you know exactly where you are so you don't have to add it manually each time you make a post?

    ReplyDelete
    Replies
    1. I think it works if you use a browser that has geolocation features (like Chrome and Firefox, probably also in the mobile apps) and allow Blogger to access your location. But you still have to confirm it, it isn't fully automatic.

      Delete
  2. Thanks for your code to sharing, but my blooger not working fine at here : http://www.vietnamhotelinformation.com

    Help me, please.

    ReplyDelete
    Replies
    1. Did you check if your template includes the code snippets described in the article? If the template is heavily customized maybe they got removed.

      Delete
  3. Hello, i entered the code as you said, but i don't get what you mean by "and add the location code after the two closing < span > tags for author and timestamp."

    Thank you

    ReplyDelete
    Replies
    1. Hi,
      If the blog is set up like mine, after the blog title there are two sections for author and timestamp; both are enclosed in span tags in the code. You should insert the code for post location after these two span tags.

      Delete
  4. Oops, I don't know if my last comment went through.

    I'm wondering about Location displayed in Blogger's normal templates (Simple, Awesome Inc, Picture Window, etc).

    Locations is displayed fine in all templates on the desktop/web version, but on mobile, *only* "Dynamic Views" shows the post location. Is there a way to add the location to "Awesome Inc" for example on mobile? I tried adding your code but still see nothing (on mobile).

    ReplyDelete
    Replies
    1. Hi! I only received one comment, so I suppose the other one didn't make it...
      As for your question, as far as I know, mobile templates (excluding Dynamic Views) have a different structure than desktop ones, so I'm not sure if location is included in any of them. Some components are hidden on mobile either with a different CSS class or with widget attributes, so it could be possible to show the location. I'l do some tests in the coming days and get back to you.

      Delete
    2. Ah, I think I see what the problem is. I was adding your code under the [div class='post-header-line-1'] for the blog template as a whole (my template HTML has multiple listings for this). I didn't realise there is a special subsection for the mobile template (sorry for my poor terminology here, I'm not a coder haha). I found a solution by adding your location code under [div class='post-header'] section that is under [b:includable id='mobile-post' var='post']. Now the location is displayed in mobile templates other than "Dynamic Views"
      I'll try to write up a blog post about this little quirk, and will of course give you credit and link.

      Delete
    3. Maybe I spoke too soon. Through the method I mentioned, I can get the location to display on mobile templates for blogs that are not associated with a Google+ account. I have two Blogger accounts: one still using the old Blogger profile, and one integrated with Google+. I can't seem to get the G+-integrated blog to display the locations on mobile (again, unless using "Dynamic Views").

      Delete
    4. That's exactly what I was talking about, Blogger maintains a separate set of rules for the mobile (non-dynamic) template. It's weird that this works on one blog and not on the other. I'll check on my own setup, I also have the profile linked to Google+.
      Could you also share the address of your two blogs?

      Delete
    5. I see the same problem on my blog: location is visible with Dynamic views, but on the regular template it doesn't appear, no matter how or where I insert the location code. I guess it might be a bug caused by the connection to Google+...

      Delete
    6. I can't get the location on any template when connected to G+ (perhaps that "Share" button that appears in the footer in mobile view is interfering?).

      As for my Blogger-profile (non G+) blogs, I can make the location display on "Simple" templates in mobile view, but not "Awesome Inc".

      Really bizarre. Nowadays people browse the blogs on mobile more than desktop. Being able to read a review post (for example) and then click the Location link to bring up a Map right there on your phone would be a great feature! I wish I could solve this!

      Delete
    7. I know... the only solution I see for the moment is to manually add a link for location at the end of your posts, so that it's included in the post and will be shown no matter the template.
      I'll try to report this as a bug on the Blogger development forum.

      Delete
    8. I've written up something about my experience with this here:
      http://10wontips.blogspot.com/2014/08/displaying-your-blogger-posts-location.html
      I genuinely do hope this gets addressed, or a better workaround can be found.

      Delete
    9. I hope so too, but knowing how slow to non-existent Blogger support is these days I wouldn't hold my breath...

      Delete