簡単で美しい！Instagramギャラリーブログパーツ（はてなダイアリーへの設置も解説）

ウェブサービス ブログ

"Instagram"が楽しい。"miil"が現れたことで、食べ物写真と明確に差別化できるようになったから。
せっかくアウトプットしているのでブログでも披露したいと思い、ブログパーツを探してみた。オススメはログイン不要で簡単にギャラリーが作れるこちら！

今日は SnapWidget の紹介と合わせて、はてなダイアリーに対応していないブログパーツを設置するために役立つTIPSも紹介したい。

SnapWidget

まずアクセスしよう。

画面下に入力欄がある。

  • Username：自分の写真を見せたいならここにアカウントを入れればよい
  • Hashtag：ハッシュタグがついた写真だけを見せたいならここに
  • Thumbnail Size：1枚の写真の大きさを選択する
  • Layout：どんなレイアウトで表示したいかを選択する

だいたいこんな項目を入力したら、Previewしてみよう。気に入った見た目にできれば、あとは Get Code するだけ。取得したソースコードをサイドバーなどに貼付ければ完成。なんと簡単なこと！


このブログパーツはiframe形式。

<iframe>〜</iframe>

WordPressやMTへなら問題なく貼付けられるはず。Instagramにハマっているブロガーさんは是非試してみてほしい。Instagramにもっと写真を投稿したくなるだろう。

はてなダイアリーでの設置方法

さて。問題ははてなダイアリー。はてなダイアリーは貼付けられるブログパーツに制限がある。はてなが許可しているブログパーツでないとダメなのだ。

ただし、許可されているブログパーツの中に、Googleガジェットがある。実はGoogleガジェットは公開されているものだけでなく、オリジナルのものを作ることもできる。つまり対応外のブログパーツを設置することもできるということ！

上のふたつのエントリを参考に、もう少し詳しく説明してみたい。こんなステップをふむと、対応外のブログパーツが設置できる。

  1. xmlファイルの作成
  2. xmlファイルを公開
  3. ガジェットの調節
  4. はてなダイアリーへの貼付け
xmlファイルの作成

まずはGoogleガジェットの元となるxmlファイルを作成する。このファイルの中に、貼付けたいブログパーツを忍び込ませるというわけ。中に記述されている内容はこんな感じ。

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title=" " />
  <Content type="html">
    <![CDATA[
<!-- SnapWidget -->
<iframe src="http://snapwidget.com/in/?u=c3ByaW5nX21hb3xpbnwxNTB8MXwzfEZGRkZGRnx5ZXN8NQ==" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:165px; height: 495px" ></iframe>
    ]]>
  </Content>
</Module>

ただし！慣れていない人はxmlファイルを最初から作ることはオススメしない。なぜかというと文字コードの違いやコピペ時に含まれる不要なもののせいでうまく機能しないことがあるから。

というわけで、すでに動いているxmlファイルをダウンロードして書き換えてみてほしい。

InstaSW.xml

   <![CDATA[

    ]]>

ここの間に SnapWidget で取得したコードを挿入して上書き保存する。

サーバーへの公開

作成したxmlファイルは誰からでもアクセスできる場所に公開する必要がある。私の場合は DropboxのPublicフォルダに置いてみた。

置いたファイルを右クリックし、パブリックリンクを取得すれば、誰からでもアクセス可能なURLが手に入る！

ガジェットの調節

あと一息。

Googleガジェットとして設置するコードを取得するために、下記のページへアクセスしてほしい。
http://www.gmodules.com/ig/creator?url=先ほど取得したURL

SnapWidget の一部が見えた！この横幅と縦幅を変更して、ちょうど入るように枠を調節する。

調節できたらコードを取得ボタンを押す。

ついにGoogleガジェットのコードが取得できた！あとはダイアリーへ貼付けるのみ！

はてなダイアリーへの貼付け

コードをコピーして、ダイアリーの設置したい場所へ貼付けよう。ただし！ここでもまたトラップがある。
取得したコードは

<script src="//www.gmodules.com/ig/ifr?

から始まる。これを以下のように書き換えよう。

<script src="http://www.gmodules.com/ig/ifr?

どうやらはてなは http://www.gmodules.com から始まるコードを許可しているらしく、書き換える前の状態だと、許可したブログパーツではありません。と注意されてしまうのだ。


この手順を踏めば、はてなダイアリーにも SnapWidget が設置できる。ちなみにGoogleガジェットで表示されてしまう枠線は、CSSに追記すれば見えなくすることが可能だ。
先ほども紹介した下記のエントリを参考に！（不要な部分を CSS で隠します　というところから読むとよいです。）

amachangさん本当にありがとうございます！！


試行錯誤して貼付けることができたブログパーツ。とても嬉しい。はてなブログになったら自由にブログパーツが貼付けられるようになって、こういうTIPSも不要になってしまうのかな…


苦労してでも設置したかった、美しいInstagramギャラリーSnapWidget。あなたのブログにもいかがですか？


【関連記事】