Tab Menu

Tạo Google Gadget API - Thủ thuật Google sites

thu thuat google site, tao google gadget, tao gadget, gadget api, google sites How to create Google gadgets.

Google gadgets là những tiện ích nhỏ ta có thể nhúng vào site, blog hay ngay cả trên desktop. Đặt biệt trong Google sites, Blogger hay iGoogle thì Gadget này càng trở nên quan trọng, chúng làm cho nội dung trang của bạn thêm phong phú và dễ dàng quản lý.


Trước đây để làm site của bạn hấp dẫn, chúng ta chỉ có thê lụt lọi trong kho gadget của google một tiện ích mà chẳng cần quan tâm tại sao chúng lại có mặt trên cõi đời này!!? Nhưng qua bài viết này, các bạn có thể tự tay biên tập cho riêng mình một tiện ích và publish nó cho tất cả mọi người cùng dùng. Nghe thật hấp dẫn đúng không nào nhưng để làm được điều đó, chúng cần phải có một chút kiến thức về lập trình xml, html, javascript ...happy

Đầu tiên bạn truy cập vào Gadget Editor của Google. Bạn thấy trong vùng soạn thảo có sẵn vài dòng code, đó là cấu trúc cơ bản của file xml.
thu thuat google site, tao google gadget, tao gadget, gadget api, google sites
Nội dung chúng ta soạn thảo sẽ nằm trong cặp thẻ
<![CDATA[
      Nội dung ở đây...
]]>
Nhưng trước khi biên soạn nội dung, chúng ta bổ sung một vài thông tin cho gadget để xuất bản nó sau này (nếu chỉ dùng mình ên thì không cần!) thông qua thẻ <ModulePrefs>
<ModulePrefs title="Magic Window - SaliproIT" 
          title_url="http://salipropham.blogspot.com" 
          thumbnail="đường dẫn ảnh làm đại diện"
          screenshot="đường dẫn ảnh xem trước"
          height="200" width="300" 
          author="Salipro Phạm" 
          description="Cửa sổ ma thuật" 
          author_email="saliproit.sgu@gmail.com" 
          category="Tools">
    <Require feature="dynamic-height"/>
</ModulePrefs>

Thư giãn xí trước khi đọc tiếp nhé! smug Tiếp theo chúng ta cùng biên tập nội dung nhé! Các bạn xem ví dụ tạo một iframe bên dưới:
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Hello World!" />
  <!-- Phần khai báo biến để lấy giá trị từ người dùng Gadgets -->
  <UserPref name="iframeURL" display_name="URL to content" required="true"/>
  <UserPref name="scroll" display_name="Display scrollbar" default_value="auto" datatype="enum">
    <EnumValue value="auto" display_value="Automatic"/>
    <EnumValue value="no" display_value="No"/>
    <EnumValue value="yes" display_value="Yes"/>
  </UserPref>
  <Content type="html" view="home">
    <![CDATA[
  // Nội dung chính.
  <html>
  <head></head>
  <body>
 <span> Đây là phần nội dung sẽ xuất hiện cố định</span>  
    <div id='dest'>
  <img src="http://www.google.com/ig/images/spinner.gif">
 </div>
     
 <script type="text/javascript">
    gadgets.util.registerOnLoadHandler(doRender);
 
    function doRender(){
    // Cài đặt biến.
    var prefs = new gadgets.Prefs();
    var iframeURL = prefs.getString('iframeURL');
    var scroll = prefs.getString('scroll');
    var height = 800;
    var width = 600;
    
 // Tạo đối tượng <iframe> bằng xml.
    var iframe = document.createElement('iframe');
    iframe.setAttribute('width', width + 'px');
    iframe.setAttribute('height', height + 'px');
    iframe.setAttribute('frameborder','no');
    if(scroll){
      iframe.setAttribute('scrolling', scroll);
    }
    iframe.setAttribute('src', iframeURL);

    // Xóa nội dụng có trong <div id="dest">
    var c = document.getElementById('dest');
    c.innerHTML = '';
 // Thêm đối tượng <iframe> vào <div id="dest">
    c.appendChild(iframe);
 
  }
  </script>
    ]]>
</body>
</html>
  </Content>
</Module>
Sau khi biên soạn xong, trong Gadget Editor chúng ta chọn File > Save hoặc Save as.. để lưu lại.
Nếu muốn xuất bản cho tất cả mọi người File > Publish > Publish to iGoogle Directory.
Sau này có nhu cầu chỉnh sửa, bạn vào lại Gadget Editor > File > Open
Vậy là chúng ta đã tự mình biên tập xong một gadget. Vậy muốn Add vào Google sites thì sao?
  • Nếu bạn đã xuất bản rồi thì sau một khoản thời gian bạn có thể search thấy Gadget của mình trong phần Public
  • Nếu không xuất bản thì bạn chỉ cần click vào tên file *.xml trong Gadget Editor và copy đường dẫn. Trong Google sites vào Insert > More gadgets > Add gadget by URL và dán đường dẫn file *.xml vào.
Tham khảo thêm: Gadgets API

Chúc bạn thành công! Có thắc mắc các bạn comment phía dưới hen. Mình sẽ cố gắng chia sẽ cùng các bạn.bee

Hiện có 12 comments

anh khoa

mình bấm vào file không hiện gì hết , mình đã đăng nhập vào google rồi , bạn có thể giúp mình được không

Salipro Phạm

@anh khoa có thể mô tả rõ hơn không, bạn click vào file nào? Và trình duyệt bạn đang dùng là gì?

pham anh khoa

@Salipro Phạm
mình dùng firefox , mình bấm vào chữ file ở khung soạn thảo này nè https://developers.google.com/gadgets/docs/tools?hl=vi#GGE , chỉ hiện chữ new và open from URL , chorome cũng vậy .

Salipro Phạm

@pham anh khoa ak, lý do là hosting của Google không sẵn sàng trong lúc này như thông báo đã hiện lên. Bạn có thể trở lại vào lúc khác nhé.

pham anh khoa

@Salipro Phạm
thank bạn nhé , bạn cho mình hỏi làm sao hiện bao nhiêu người đang online giống như của bạn thế , mình xài google sites

Salipro Phạm

Hi @pham anh khoa , bạn truy cập vào http://whos.amung.us và register một account, tiếp theo nhúng nó vào site nhé bạn.

pham anh khoa

@Salipro Phạm
mình chèn vô thanh bên google sites sao bạn , mình mới nên gà quá

pham anh khoa

@Salipro Phạm
mà hình như google sites không xài được script hả bạn

Salipro Phạm

Đúng đó @pham anh khoa , GS không cho phép bạn nhúng script vào nên việc nhúng whos.amung.us cũng khá phức tạp. Bạn có thể tìm một dịch vụ khác cho phép nhúng hình ảnh hoặc code một file Gadget XML như trên, lưu trên một host nào đó và sử dụng nhé bạn.

ngocgiau

mình cũng bị như bạn đầu tiên là File không cho có nút save. Mình trở đi trở lại 2 ngày nay rồi, cũng open Url hay New thôi

philong

Cám ơn vì bài viết
------------------------------------------------
Gà Đông Tảo TPHCM
Web: http://sieuthigadongtao.com
Xem thêm các loại Gà Đông Tảo TPHCM : Gà đông tảo tphcm
Xem them cac loai Ga dong tao tphcm : Ga dong tao tphcm

Post a Comment

Bạn có thể tự do cho ý kiến, thảo luận về bài viết này nhưng phải theo những điều khoản sau:
- Phải nghiêm túc, không dung tục, không spam.
- Nội dung phải liên quan đến bài viết.
- Không mang tính chất chính trị...
- Hạn chế sử dụng Ẩn danh, hãy dùng Tên/URL để thay thế.
Lưu ý : Có thể sử dụng tag HTML cơ bản trong comment: br, b, i, u, a href= ...

:)
:(
;)
:D
=))
:-/
:x
I-)
@-)
=D:
:-q
:-w
[-X
B-)
:((
:-B
:-h
:x(
:-*
~O)
@};-

About

RSS
Coming soon... :))