Blogger và tính năng hỗ trợ mobile browser

Do lười biếng nên đã lâu lâu không ngó vào Dashboard của Blogger xem có tính năng gì mới không, hôm qua vào Blogger in Draft (Là blog công bố các tính năng thử nghiệm của Blogger) thì thấy Blogger đã thử nghiệm tính năng hỗ trợ mobile browser. Tức là khi bạn truy cập 1 blog trên nền tảng Blogger từ thiết bị di động thì giao diện của blog đó sẽ hiển thị phù hợp với trình duyệt di động của bạn, hay nói khác hơn là giờ đây bạn đã có 1 mobile version cho blog của mình.

Tính năng này với WordPress không phải là mới, WordPress đã triển khai giao diện mobile cho các blog trên nền tảng WordPress tại WordPress.com từ khá lâu rồi, các bạn dùng self-hosted WordPress blog cũng có thể dễ dàng kiếm cho mình vài plug-in để thực hiện tính năng này. Tuy nhiên, với Blogger thì đây là một điều đáng mừng vì trước giờ Blogger chưa hề hỗ trợ cho các thiết bị di động, và bạn sẽ phải load rất nặng nếu truy cập blog Blogger từ các thiết bị di động, lấy ví dụ ngay như blog của tôi, nếu truy cập qua smartphone thì sẽ load khoảng 1.6MB cho mỗi lần load trang, chưa kể đến những post có nhiều ảnh đi kèm, quá là nặng phải không nào? :| Sẽ có bạn bảo rằng “Blogger cũng có thể tạo mobile site với Mofuse cơ mà!” (Mofuse là một dịch vụ khá mạnh cho phép bạn tạo các ấn bản hỗ trợ thiết bị di động cho trang web của mình), nhưng rõ ràng là native support thì vẫn gọn gàng hơn, và tiết kiệm chi phí nữa chứ (Nếu dùng Mofuse thì mỗi tháng bạn sẽ phải trả ít nhất $8, nhiều hơn tiền ăn sáng của tôi nhiều lần rồi đấy =)) (j/k, vì tôi có thói quen hay bỏ bữa sáng do dậy muộn :D)

Vậy, để thực hiện điều này chúng ta sẽ phải làm những gì? Hãy cùng theo dõi trình tự mà tôi đã làm từng bước một nhé ;)

Bước 1: Kích hoạt giao diện hỗ trợ mobile browser

  • Đăng nhập vào Blogger in Draft Dashboard tại địa chỉ http://draft.blogger.com/ 

    Blogger in Draft Dashboard

    Ghi chú:
    Bên cạnh Dashboard chính với banner màu cam, Blogger còn có Dashboard cho Blogger in Draft, là nơi bạn có thể trải nghiệm tất cả các tính năng đang được thử nghiệm của Blogger, với banner màu xanh lam. Blog của bạn chịu sự chi phối của cả 2 Dashboard này cùng lúc, nếu bạn thích thử nghiệm các tính năng mới thường xuyên thì có thể đặt Blogger in Draft Dashboard làm Dashboard mặc định bằng cách tick vào ô “Make Blogger in Draft my default dashboard.” Tuy nhiên không phải tất cả các tính năng thử nghiệm lúc nào cũng tốt & hoạt động suôn sẻ, vậy nên Dashboard mặc định sẽ quản lý blog của bạn ổn định hơn

  • Vào mục Settings > Email & Mobile. Chọn “Yes, On mobile devices, show the mobile version of my template.” và SAVE SETTINGS

    Mobile Options

  • Bạn có thể xem trước giao diện sẽ hiển thị trên Mobile bằng cách bấm vào “MOBILE PREVIEW”, mobile site đã hiện ra trước mắt bạn rồi đó :))

    Mobile Preview

    Mặc định giao diện cho mobile site của bạn sẽ là giao diện Simple. Nếu bạn dùng 1 trong 12 giao diện tùy biến của Simple và Awesome (trong phần Template Designer của Blogger) thì giao diện mobile của bạn sẽ hiển thị tương tự như giao diện chính (màu nền, kiểu font,…), đẹp đẽ & màu mè hơn giao diện Simple mặc định một chút (Cái này thì Blogger đã hơn WordPress.com một chút rồi :D). Nhưng chúng ta dùng giao diện mobile cái tất yếu nhất là kích thước nhỏ gọn & load nhanh, chứ màu mè sặc sỡ cũng chả phải là yếu tố quan trọng, phải không nào?

  • Mẹo: Nếu bạn chú ý sẽ thấy URL của mobile site chính là URL bình thường, nhưng có thêm querry ?m=1. Ta có thể tận dụng điều này khi truy nhập các site trên nền tảng Blogger (nếu đã bật giao diện mobile nhưng chưa hỗ trợ redirect đến mobile site)  một cách nhanh chóng hơn bằng cách thêm ?m=1 vào cuối URL. Chẳn hạn URL của post này là https://tuantu.me/2011/01/blogger-va-tinh-nang-ho-tro-mobile.html thì URL mobile site của nó là https://tuantu.me/2011/01/blogger-va-tinh-nang-ho-tro-mobile.html?m=1

Bước 2: Tạo redirect đến mobile blog

Sau khi kích hoạt xong giao diện cho mobile site của mình, chắc hẳn bạn sẽ hí hửng vớ ngay chiếc phone của mình để thử vào xem thành quả phải không nào? Lúc làm xong tôi cũng như vậy mà :))

Theo công bố của Blogger in Draft thì chỉ có các browser trên nền WebKit mới tự redirect blog của bạn sang phiên bản mobile, mà browser mặc định trên máy Nokia E72 của tôi mặc dù cũng là trên nền WebKit nhưng chả hề redirect chút nào nên có lẽ chỉ có các bạn dùng Android phone hoặc WebOS phone may ra mới có thể thấy được thành quả này (Tôi cũng chỉ đoán như vậy chứ chưa có điều kiện sử dụng smartphone nào có 2 HĐH này, bạn nào dùng có thể chia sẻ xem sao :D). Vậy là có điều không ổn ở đây, về lý thuyết không phải tất cả các mobile browser đều được hỗ trợ tự động redirect sang mobile site, và trên thực tế thì ngay cả browser trên nền WebKit cũng chưa chắc đã tự động redirect sang mobile site, câu hỏi đặt ra là “Người nông rân lúc này phải hành động như thế nào?” Tất nhiên là người nông rân phải mò mẫm Google và tự mó tay vào code để cho nó hoạt động rồi, không lẽ lại phải thêm một cái chú thích vào ngay đầu blog của mình là “Nếu các bác muốn xem trang của em tốt trên các thiết bị di động thì làm ơn thêm “?m=1” vào cuối URL ạ!” thì thật là củ chuối =))

Thật may cho các bạn nông rân đang đọc bài này là nông rân tớ sau một nửa buổi chiều ngồi rị mọ Google và test thử đã tìm ra được cách để lái blog của mình theo ý muốn, và tớ cũng không hề có ý muốn giữ làm của riêng, bằng chứng là tớ viết bài này để sẵn sàng chia sẻ với các bạn đây. (Cũng xin phép không dám mạo phạm các bác trí thức giả danh nông rân trà trộn vào đây hoặc qua đường đọc được bài này, em là gà cũng chỉ múa rìu qua mắt thợ nên các bác làm ơn đừng chém em, tội nghiệp lắm ợ 8-}) Trình tự đơn giản là như thế này:

  • Vào mục Design > Edit HTML

    Edit HTML

  • Tìm dòng như hình dưới đây

    Edit Template

  • Copy/paste chính xác đoạn mã JavaScript dưới đây vào sau dòng đó và bấm SAVE TEMPLATE để hoàn tất.

//<![CDATA[

(function(a,b){if(/android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)/|plucker|pocket|psp|symbian|treo|up.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|/(k|l|u)|50|54|e-|e/|-[a-w])|libw|lynx|m1-w|m3ga|m50/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(-|2|g)|yas-|your|zeto|zte-/i.test(a.substr(0,4)))window.location=b})(navigator.userAgent||navigator.vendor||window.opera,window.location.href+’?m=1′);

//]]>

  • Vậy là xong, giờ bạn có thể kiểm tra thành quả của mình trên mobile browser rồi đó :D Ở đây tôi sẽ không giải thích rõ ra tôi đã làm như thế nào để ra được đoạn code như thế này, bạn nào thích thì xem phần Tài liệu tham khảo bên dưới và tự nghiên cứu nhé.

Bước 3: Hiệu chỉnh DISQUS Comment System

Nếu blog của bạn dùng Comment System mặc định của Blogger thì công việc của bạn đã hoàn tất, bạn không cần phải đọc bước này nữa rồi. Nếu blog của bạn dùng Intense Debate thì xin mời bạn tự nghiên cứu và có thể sẽ có một bài chia sẻ riêng vậy, tôi không sử dụng Intense Debate nên cũng không rõ liệu rằng Intense Debate có bị vấn đề tương tự Disqus này không. Còn với các bạn dùng Disqus, nếu bạn nào đã bật tính năng đồng bộ comment giữa Disqus và Blogger thì bạn cũng đã khắc phục được vấn đề đó rồi, còn nếu chưa thì bạn có thể cùng tôi mổ xẻ vấn đề này một chút.

Vấn đề gặp phải ở đây là khi bạn dùng Disqus Comment mà không bật tính năng đồng bộ comment giữa Disqus và Blogger (mà tôi dám cá rằng có rất rất ít người biết đến tính năng này) thì các comment của bạn được lưu ở Disqus, nhưng không có trong comment system của Blogger, mà mobile site của bạn lại hiển thị mặc định comment của Blogger thay vì Disqus, hãy check thử xem! :) Điều đó đồng nghĩa với việc trên mobile vesion bạn sẽ không thể nhìn thấy các comment hiển thị trên Disqus. Để khắc phục điều này, chúng ta sẽ bật tính năng đồng bộ comment giữa Disqus và Blogger:

  • Để thực hiện tính năng này, điều trước nhất bạn phải làm là chỉnh comment settings của Blogger thành Anyone. Vào Blogger Dashboard > Settings > Comments, mục “Who Can Comment?” chọn “Anyone – includes Anonymous Users”

    Comments Settings
  • Đăng nhập vào Disqus. Vào mục Admin, chọn Tools > Import/Export. Bấm Enable ở phần “Keep new comments synced”

    Disqus Options

  • Cửa sổ yêu cầu truy nhập Blogger sẽ hiện ra, chọn Granted

    Grant Access to Blogger

  • Chọn blog cần đồng bộ comment, Dashboard của Disqus sẽ trở về như thế này

    Comments Synchronization Enabled

Vậy là xong, giờ comment trên Disqus và Blogger của bạn đã được đồng bộ, bạn có thể nhìn thấy các comment trên blog của mình ở mobile version. Tuy nhiên, vẫn còn một chút xíu phiền phức là nếu bạn comment trên mobile site thì comment lại không được đồng bộ với Disqus, đồng nghĩa với việc bạn không nhìn thấy comment này ở desktop version. Lúc này bạn sẽ phải import comment từ Blogger vào Disqus một cách thủ công, hơi mất việc 1 tẹo, nếu blog của bạn có ít comment thì chắc cũng không vấn đề gì :)) Hiện thời tôi chỉ có cách khắc phục như vậy chứ chưa tìm ra được cách nào để có thể làm Disqus mobile hoạt động trên giao diện mobile của Blogger hoặc sẽ phải chờ đến khi Blogger cho phép tùy biến giao diện mobile thôi :)

KẾT QUẢ

Sau một hồi rị mọ mò mẫm thì cuối cùng tôi cũng làm cho blog của mình có được mobile site, có thể nói là khá sung sướng khi blog của mình giờ đây nhìn đã gọn gàng hơn trên mobile & truy cập nhanh hơn rất nhiều :D Hi vọng rằng sau khi đọc xong bài của tôi, một số bạn nông rân đồng cảnh ngộ cũng có thể làm cho mình 1 mobile site ưng ý. Ai có sáng kiến bổ sung hoặc thắc mắc thì comment ở đây, chúng ta sẽ cùng trao đổi nhé ;)

Tài liệu tham khảo

Advertisements

9 thoughts on “Blogger và tính năng hỗ trợ mobile browser

  1. Do you know? I found many website but I can’t see imformation for me. And now, I feel happy because your imformation is very useful. Thank you very much!.

    Like

  2. Bạn làm ơn cho hỏi, cách tùy chỉnh font chữ cho Comment Disqus? Tôi đã đồng bộ được hết rồi, chỉ còn kẹt mỗi font chữ nơi Comment Disqus thôi? nó cứ đậm (bold) chứ khg chịu normal?Cám ơn nhiều nhé?LTC

    Like

  3. Đồng chí không để lại url của mình nên cũng không rõ là thắc mắc cụ thể như thế nào, nhưng text ở comment thì sẽ ăn theo định dạng của site thôi, đồng chí thử xem lại CSS xem sao :-?

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s