Tuesday, May 1, 2012

Adding gadgets to your mobile-template makes your blog better for smartphone visitors

This article shows how to add gadgets to the mobile version of your blogger template.

Gadgets and mobile templates

Previously I've described how to add a gadget to your blog.

If you have not enabled a mobile template for your blog, then visitors who look at it using a mobile device (smartphone, tablet etc) will see all your content and gadgets.   But they will probably have to scroll left and right a lot, because your blog will be a lot wider than their screen.  There might be some issues if you have gadgets that require javascript or particular media players, which their device doesn't have installed. But these are exactly the same as the issues for your visitors who are using desktop computers.

But if you have enabled a mobile template, then readers who are using a mobile device see a different design which is tailored to their screen-width, though still using the colour/theme that you chose.

Blogger faced some challenged when they built these mobile templates: many bloggers put a lot of effort into design and providing gadgets that.    But a 300-ish pixel screen simply does not have room for a sidebar and blog content, and may not have space for some of the things that gadgets do, either.

What Blogger have done is to say that only some gadgets are normally shown on mobile-template versions of your blog:
  • Header
  • Blog Posts
  • Profile
  • Pages
  • AdSense
  • Attribution

However it's easy to add other gadgets to your own customized mobile template, and to set up gadgets that are only seen by readers using mobile-devices - provided you are willing to take the risks of editing your template.

(I've described how to remove the attribution gadget from mobile-templates before, because it's one that some people particularly hate - and of course the same approach can be used for the other standard gadgets too.)


How to add a gadget to the mobile template

First, check that mobile has been enabled for your blog, and that your mobile template is set up to show customizations:   go to the Template tab, click on the gear-wheel under mobile, tick Yes (for show mobile template), then select Custom, and press the Save button.


Add the gadget to your blog, in the usual way:  when you are choosing the parameters, make sure you think about the amount of screen-space that your mobile-readers will have to see it.

Find the gadget ID.

Edit your template: you don't need to expand the widgets.

Locate the gadget code, by searching for the ID you found (tip: use your brower's search function, eg ctrl/F). It will look something like this (slightly different, of course, if the gadget you are working on is of a different type):
<b:widget id='PlusBadge1' locked='false' title='Google+ Badge' type='PlusBadge'/>
To show the gadget on the mobile version of your blog, add mobile='yes' to the code, like this:
<b:widget id='PlusBadge1' locked='false' mobile='yes' title='Google+ Badge' type='PlusBadge'/>

To show the gadget only on the mobile template and not to desktop users, add mobile='only' to the code, like this:
<b:widget id='PlusBadge1' locked='false' mobile='only' title='Google+ Badge' type='PlusBadge'/>

Save the changes.

Use either a mobile device (ideally), or another tool that lets you test blogs as they would appear on different screen sizes, to check that the gadgets are showing as you think they should.


Update:   

Since first writing this post, I have found out that due to a bug in Blogger, if you have a gadget with mobile='only' set, then when you try to make changes to the blog using the Dashboard > Layout editor:

  • They will not save, and 
  • If you try to preview, you get an error message:

The template is updated in other place. Please reload the original page and retry it again.
Error 500

The only way I have found to get around the error is to remove the mobile='only' statement.

If you really want to have mobile-only gadgets, then you may need to:

  1. Remove the mobile='only' statement
  2. Make the Layout editor changes
  3. Replace the mobile='only' statement.




What gadgets should you add to your mobile template?

There are no hard-and-fast rules here:   it's all about what you want your mobile visitors to be able to access.   I have seen people add blog-rolls, linked-lists, polls, profiles, and various other simple widgets.

Gadgets that I think could be more troublesome are slideshows, popular posts (if you try to show a thumbnail), newsreel, subscriptions, gadgets from Amazon.com and other 3rd parties.

You just need to remember amount of screen space which your visitors have, and how large the images are likely to be for them.   And also that gadgets are likely to be shown as the bottom of the list-of-posts (which is how the blog-posts gadget shows the home page of your mobile blog), so won't be nearly so obvious as they are in the sidebar.


Why put gadgets only in the mobile blog?

You may wonder why a gadget should only go on the mobile version.

One reason is to provide a simpler alternative to a full-featured gadget that is shown on the non-mobile version of the blog. For example, I use a two-page google-custom-search option here on Blogger-Hints-and-tips. This lets me control what sites are searched, and use some advanced display features. But a mobile-sized screen won't cope with this. So if I wanted to make Blogger-HAT more mobile-friendly, I'd add a regular search-gadget, but only show it to on mobile-devices so that non-mobile visitors didn't get confused.


Positioning gadgets on the mobile template

Tatami layout 1As far as I can see, Blogger users do not easily have any control over the positioning of gadgets in the mobile-template versions of our blogs.

Some experiments make me think that:
  • Gadgets from the header in the regular layout are put above the list of posts in the mobile view
  • Gadgets from the footer in the regular layout are put below the list of posts in the mobile view
  • Gadgets from the sidebar in the regular layout are put below the list of posts in the mobile view

But there could be more going on here - please let me know if you've worked out any more rules that are applied.

Also, I have no idea how mobile templates will cope with tricks like gadgets that are put above your header: test your blog extra carefully if you've tweaked your template in this way before adding mobile-specific tweaks.


Troubleshooting

Stopping gadgets from showing on mobile-template blogs (ie adding mobile='no') does not require you to choose the Custom option from the list of mobile template.   But adding them (except for the ones in the default list) does.

The default mobile gadgets are  only shown if you have put them onto your blog template: if they are not in your blog at the moment, then they will not automatically be shown just because you enable a mobile template.

What other problems have you had with mobile-templates?



Related Articles

Putting a gadget into your blog

Turning your blog's mobile template on

Advantages and disadvantages of editing your blogger template

Finding the id for any gadget

Adding a google-custom-search

Giving your blog a home-page

Share this Article

URL:

HTML link code:

BB (forum) link code:

Subscribe to Blogger-hints-and-tips

FeedBurner will send a confirmation message. Click the verify link in it to start your subscription.

Follow Me on Pinterest Subscribe to Blogger-HAT on Google + RSS subscription icon Follow BloggerHAT on Twitter

29 comments:

  1. Bro, i tried to resize my mobile view some smaller but i don't know how to make it. So i'd realy appreciate any help.. I hid the sidebar menu but it doesn't get smaller. I mean to hide the navbar but i don't know how to make it. Well please a lot help me.. :)

    here is my blog: http://j-smith-site.blogspot.com

    ReplyDelete
  2. Just tried your tips (seemed simple enough).
    Updated Widget ID: HTML1 and added mobile='yes' as noted below:



    It is not showing on any page on my mobile site and I've tried Mobile only (which in fact does take it off the desktop version but still not visible on the mobile version).

    I'm on an iPhone4, so I would think the device isn't problem and I've tested the m=1 (mobile) address on my laptop - to no avail.

    Any suggestions?

    ReplyDelete
    Replies
    1. My only possible suggestion would be that the phone is not handling some of the code you used (eg Javascript) - but I suspect you would know about that for other reasons.

      Other than that, why don't you try asking on the Blogger Product Forum? (I don't want to try trouble-shooting individual problems here, due to the lack of peer review of the answers.)

      Delete
    2. hi :: House ::
      i have the same problem..
      if you have solved it for your mobile site, can you help share that.
      Thanks

      Delete
  3. this post is great thanks....I did what you said, and it worked great...the only problem is that the header is tiny in a field of color....the actual image look like 20 x 20px in a 100 x 100 box....any way to fix this?...or maybe add a new header at the top of the mobile site? Thanks, Alicia

    ReplyDelete
  4. any adsise on how to make a tradedoubler ad show on mobile version? it's not working

    ReplyDelete
  5. Thanks for the tips, I tried this but it didnt work - Cant see the Gadget on Mobile - Like house said above.. it does hide it from the web version..

    Safari, Opera, and even Mobile view on Mozilla desktop failed to show the widget..

    ReplyDelete
  6. This was a great help.... but how do you a make a link from the mobile home page direct to outside link? insted of the standerd mobile link that open a new mobile page then click to outside link.

    www.cannabizreport.com

    in the regular view click text and its direct..
    in the mobile view there is a extra link.

    how do i fix this, ant ideas?

    ReplyDelete
  7. Whenever I try to add the mobile=only attribute to a widget, the layout tab gives me an error every time I try to save an arrangement.

    ReplyDelete
  8. Followed the steps and it worked, gadgets are now displayed.

    I've encountered a problem however, of the two blogs I've added the gadgets to, one now has much larger colored borders to the left and right on mobile view, and the other has no border colors at all.. Strange.
    Is there a way to get in and manually edit the widths of the mobile borders?

    Thanks for the post btw!

    ReplyDelete
  9. Great post. However this apparently doesn't work with the label widget. I wanted my labels(categories) to display in the mobile site but its just not working. I've simply switched off mobile display so visitors to my blog can see the main site even on mobile devices.

    I am however still interested in knowing if there is a way to display labels on mobile

    ReplyDelete
    Replies
    1. Mmm, I know the labels gadget can be handled differently sometimes - but not all the reasons for that. I'd suggest posting a question in the Blogger product forum.

      Delete
  10. Is there a way to move top adsense ads to below title of the post?

    ReplyDelete
  11. Sorry, but I don't know any way to do that in mobile templates. We don't have as much control there.

    ReplyDelete
  12. Hi! I follow the steps but it always appear an error message! What's wrong? Pls help!

    Error parsing XML, line 2099, column 52: Element type "b:widget" must be followed by either attribute specifications, ">" or "/>"

    ReplyDelete
    Replies
    1. I too got the same error

      FIX:- just give a space on both side when adding mobile='only'

      i.e mobile='only' title='Google+ Badge' type='PlusBadge'/>

      Delete
  13. I have a problem... so I put my header in my sidebar, and now the custom mobile template is reading it as a regular widget and put it BELOW my posts on mobile. I would really appreciate help with this. My email is acreativecookie AT gmail DOT com

    ReplyDelete
  14. Is it possible to centre the widgets on mobile? Also the titles of the widgets on mobile are coming up very light and are unable to be read. Is there a way to customise the titles of the widgets on mobile view?
    Thank you for the post.

    ReplyDelete
  15. Thanks for the info. I successfully added a mobile='yes' tag to a sidebar widget which now appears at the bottom of my mobile view. However, the symbol "x" now appears under the pages tab (above the main text) on all of my blog pages. Any idea where that comes from or how to get rid of it?

    ReplyDelete
    Replies
    1. I have the same question!!! Any help?

      Delete
    2. That is caused by your search widget. Try a custom one instead of the default blogger search.

      Delete
  16. thanks for the info, really helpfull, I wanna ask a question.... how do i set the widths for my mobile site, it's a bit wider and my post aren't coming out in full...

    ReplyDelete
  17. Little help down here..same as June Lim

    ReplyDelete
  18. Hello, I have a side bar with page widgets on my blog. The web version works perfectly displaying page title and the link to the page directly underneath, e.g.
    - My Facebook Page
    - Facebook (link)

    When I go onto the mobile version, however, all i can see is the word "Home" instead of either the Page name or the link name. Only after clicking on one of the "home" buttons I have a choice to click on either another "home" or "facebook". Links work all fine but it is rather ugly to see "home" 4 times at the top of the mobile page.

    I am a little surprised by this as I specifically unticked showing "home" in the gadget dialogue box.
    I have followed the steps above and although I did not get any errors, I did not fix the problem.
    Any solutions? Thank you!

    ReplyDelete
  19. I know just enough about editing HTML to be dangerous but I was able to do this by following your instructions. Worked perfectly. Thank you so much!

    ReplyDelete