2015/01/08

Google サイトにTwitter公式ウィジェットを挿入する - Google ドライブ利用版

管理面で少し面倒な部分があったので,自分のWebサイトをGoogle サイトに移行しました.

ここで躓いたのが,Twitterウィジェット.
Twitter公式のウィジェットは,そのままだとGoogle サイトに挿入できません.

調べるとGoogle Gadgets Editor(GGE)を利用する方法が出てくるのですが,フレームの中身が表示されず…….

色々と試行錯誤した結果,Google ドライブを利用する方法を思いつきました.

Twitter公式サイトでコードを生成

Twitter公式サイトの設定ページから,希望のウィジェットのコードを生成します.
このコードはメモ帳などにコピーしておきます.

コードをガジェット用XMLに

先ほどのコードをガジェット用のXMLにします.
こんな感じ.
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="<ガジェットの名前>" />
  <Content type="html">
    <![CDATA[
      <ここにTwitterで生成したコードを挿入>
    ]]>
  </Content>
</Module>

適当な名前(今回はtwitter.xmlにしました)で保存します.

Google ドライブに保存,共有

このセクションではGoogle ドライブのWebサイト上での操作になります. まず,先ほど作成したXMLファイルをGoogle ドライブにアップロードします.
アップロードが終わったらファイルを右クリックし,「共有...」→「詳細設定」の順にクリックします.
次に「変更」をクリックし,「オン - ウェブ上で一般公開」を選択して[OK]ボタンを押します.
さらに,「共有するリンク」のURLをコピーし,メモ帳などに貼り付けます.

URLの確認

先ほど貼り付けたURLを整形します.
"https://drive.google.com/file/d/<半角英数の文字列>/view?=usp=shar"を
"http://googledrive.com/host/<半角英数の文字列>"とし,ブラウザからアクセスします.
すると,別のURLにリダイレクトされ,XMLが表示されます.
XMLが表示されたこのURLを使います.

Google サイトにガジェットを挿入

最後にサイトにガジェットを挿入します.
挿入したいページの編集ページに入り,「挿入」から「その他のガジェット」を選択します.
「URLを指定してガジェットを追加」を選び.先ほどのXMLが表示されたURLを貼り付け,追加を押します.

あとは適宜サイズ等を指定すればGoogle サイトにTwitterガジェットが表示されます.

3 件のコメント:

  1. このコメントは投稿者によって削除されました。

    返信削除
  2. の箇所に、
    https://about.twitter.com/ja/resources/buttons#tweet
    で生成したシェア用のボタンのコードを挿入して指定の手順で
    http://googledrive.com/host/… のURLを生成してみましたが、
    クリックすると

    error on line 5 at column 14: Encoding error
    となってダメでした。

    返信削除
  3. の箇所に、
    https://about.twitter.com/ja/resources/buttons#tweet
    で生成したシェア用のボタンのコードを挿入して指定の手順で
    http://googledrive.com/host/… のURLを生成してみましたが、
    クリックすると

    error on line 5 at column 14: Encoding error
    となってダメでした。

    返信削除