Pages

Thursday, 13 January 2011

Мобильная версия блога для Blogger/Blogspot.

Привет, народ!

Обновлено: чуть-чуть изменил скрипт, теперь при заходе по прямым ссылкам с мобильных устройств скрипт перенаправляет на мобильную версию, но с сохранением перехода на сам пост. Раньше перенаправлял на заглавную страницу.

Несмотря на то, что проблему доступа к блогу с мобильных устройств я решил (как мне кажется) через Mippin, мне это решение не сильно нравилось. Даже не могу сказать, что именно. Я и не стал делать автоматическое перенаправление на Mippin, хотя это скорее всего из-за лени.
А сейчас ситуация немного поменялась: в декабре Google объявил о поддержке мобильных устройств для Blogger/Blogspot (подробнее здесь). Как говорится, “не прошло и пол года”. Live Spaces имело поддержку мобильных устройств с самого начала, а Google только сейчас “разродился”. Ну все равно, раз оно есть, то это сподвигло меня на “подвиг”: настроить нормальную мобильную версию блога. Мне она больше нравится в Google-ом исполнении, чем Mippin.
Итак, что надо сделать. В зависимости от используемого шаблона, процесс может состоять из одного или нескольких шагов:

  • Активировать шаблон для мобильных устройств. Для этого надо зайти в настройки своего блога через http://draft.blogger.com, если этого не сделать, опция активирования шаблона будет недоступна! Затем в Dashboard > Settings > Email & Mobile tab и установить “Show mobile template” в “Yes..”. Если используются простые стандартные шаблоны блога Google, то больше ничего делать не надо. Переадресация будет автоматическая. Для мобильных устройств прямая ссылка будет выглядеть так: http://<адрес блога>.blogspot.com/?m=1 – по этой ссылке блог будет принудительно отформатирован под мобильное устройство, например: http://rsadykoff.blogspot.com/?m=1. Чтобы открыть блог в принудительном режиме для десктопа, можно использовать ссылку http://<адрес блога>.blogspot.com/?m=0. Мой блог в режиме “настольного компьютера”: http://rsadykoff.blogspot.com/?m=0.
  • Теперь, если использовался нестандартный шаблон, надо будет приложить чуть-чуть усилий: “внедрить” (через редактирование шаблона в html) javascript, который будет определять что блог открывается с мобильного устройства и перенаправлять на мобильную версию. Это скрипт надо будет разместить сразу же после тега <head>:

    <script type='text/javascript'>
    //<![CDATA[

    var MOBILE_URL="?m=1";
    var DESKTOP_URL = "?m=0";
    var devices = new Array();
    devices[0]=/iphone/i;
    devices[1]=/ipod/i;
    devices[2]=/android/i;
    devices[3]=/dream/i;
    devices[4]=/cupcake/i;
    devices[5]=/blackberry9500/i;
    devices[6]=/blackberry9530/i;
    devices[7]=/incognito/i;
    devices[8]=/webmate/i;
    devices[9]=/symbianos/i;
    devices[10]=/lg/i;
    devices[11]=/blackberry/i;

    var UA = navigator.userAgent;

    if (window.location.search!=DESKTOP_URL) {
      for (var i=0;i<devices.length;i++){
          if(UA.match(devices[i])){
           window.location = window.location + MOBILE_URL;
          }
      }
    }
    //]]>
    </script>

Скрипт очень простой, я его “содрал” с Mippin и немножко модифицировал, добавив обнаружение параметра “?/m=0”, чтобы можно с мобильного устройства перейти на “десктопный” вариант блога.
Вот и все. Надеюсь, любители заходить по прямой ссылке на блог с BB оценят мои труды :) Да, вот еще: браузер BB зайдет на мобильную версию блога при отключенной поддержке javascript, но при переходе по ссылкам попросит ее включить. Если нет желания глобально включать javascript в браузере, можно создать ссылку в Favourites и для нее разрешить поддержку javascript. Тогда не надо будет подтверждать разрешение на выполнения скриптов каждый раз, когда заходишь на блог.
Я помню, что многие читают блог через RSS и статьи форматируются для мобильных устройств, но много труда мне составило это сделать, даже был благодарен случаю отвлечься от написания документа по работе. А дополнительная функциональность – это всегда хорошо :) Если кому-то еще хочется автоматическое перенаправление на мобильную версию с iPad – дайте знать, добавлю устройство в скрипт.

Засим раскланиваюсь,
Рустам.

9 comments:

Унунсептий said...

Привет, Руст!

Спасибо за полезную информацию! Тоже себе добавил :)

Кнопочки в мобильной версии такие большие и приятные :) Еще раз спасибо!

Сергей

PS: Ох уж мне эти фигурные скобочки в конце строки ;)
if (window.location.search!=DESKTOP_URL) {

Rustam Sydykov said...

Привет, Сергей.

Ага, хорошая вещь.
А чем тебе фигурные скобки не нравятся в конце строки !? :) Помню, когда я еще программировал, меня раздражал код С в виде:

if (...)
{
}

:D

Руст.

Унунсептий said...

Руст

Вот видишь какие люди разные, а меня именно так и учили ставить скобки :)

Поэтому и в глаза кидается.

Сергей

Rustam Sydykov said...

Сергей,

Правила, наверное, поменялись. Я читал книжку Страуструпа по С (1992 или 1991), там употреблялись фигурные скобки в таком виде. Сейчас посмотрел - формат в основном как ты сказал, хотя в могут встречатся скобки как у меня в одном и том же документе. Видимо, это дело привычки.

Руст.

Alexey said...

Полная лажа:
Любая ссылка из RSS, на комментарий или статью, открывает домашнюю страницу.
Попытка запостить комментарий их мобильной версии с выбором google account форвардит на бескровную версию комментариев, при этом текст комментария полностью теряется.
Лажа и отстой.
iOS4, safari. ,

Rustam Sydykov said...

Privet, Lesha.
Otvecayu tebe s mobilnoy versii. Samsung Galaxy Tab. Problem ne vizhu :? Seychas poprobuyy sdelat' sign out i snova ostavit komentariy.
Rust.

Rustam Sydykov said...

Da, esli sign in ne sdelan, to posle mobilnogo sign in povedwnie kommentariev kak ty skazal. Poshlyu bug report.
Rust.

JustBe theBest said...

здравствуйте Рустам!

огромное спасибо Вам за данную статью. Мне она помогла. только хотел спросить, после того, как все настроено, с мобильного он должен автоматически перенаправлять на мобильную версию, или же необходимо дописывать последние ?m=1 ?

Rustam Sydykov said...

Добрый день,

Будет работать автоматически если броузер поддерживает javascript.
В скрипте есть недостаток: если заходят по tracklink, т.е. прямой ссылке на любой пост, но скрипт все-равно перенаправляет на домашнюю страницу. Я не вебдизайнер, поэтому ошибку не заметил и друг мне указал на проблему. Прийдется посмотреть, как это решить :)

С уважением,
Рустам.

Post a Comment