ABCウェブエンジニアblog

Webデザイナー/エンジニア/講師のホームページ・ウェブサイト制作の備忘録

【Wordpress以外もOK】TwitterやInstagramウィジェットをサイトに埋め込む方法 Part.3「Instagram プラグイン無し編」

はてなブログで読者が一気に増えてめっちゃ嬉しいです。ありがとうございます。

今回の記事もブロガーさん需要が結構ある内容かもしれません。 

 

前回までの記事はこちら↓

【Wordpress】TwitterやInstagramウィジェットをワードプレスに埋め込む方法 Part.1「Twitter編」 - ABC ウェブエンジニアblog

【Wordpress】TwitterやInstagramウィジェットをワードプレスに埋め込む方法 Part.2「Instagram編」 - ABC ウェブエンジニアblog

 

元はWordpressのレッスンでの質問を受けての記事でしたがTwitterや今回のInstagram埋め込みの方法は、はてなブログなどHTMLを記述出来るサービスであれば適用できます。

はてなブログ読者さんも是非お役に立てて頂ければ幸いです。

 

 

プラグイン無しでのInstagramフィード埋め込み方法

前回はWordpressプラグインを使ってインスタウィジェットを実現しました。

今回はWordpress以外にも応用が効くHTML埋め込みによる方法です。

公式で提供されている機能を使うと難易度が上がるため、なるべく簡単な方法でSnapWidgetというサービスを利用します。

SnapWidgetでInstagram埋め込みHTML作成

まずは以下のSnapWidgetのサイトへアクセスします。

 

snapwidget.com

 

こういったサービスはだいたいが英語ですね。Google翻訳など活用して慣れるしかないです。(笑)

 

インスタウィジェットサービスSnapWidgetへ登録

 

右上の「SIGN UP」から登録画面へ進みましょう。

 

インスタウィジェット埋め込みSnapWidgetサインアップ画面

 

上から順に名前、メールアドレス、パスワードを入力してサインアップ。

もしくはFacebookと連携して登録することも可能です。

 

SnapWidgetでインスタウィジェット作成画面その1

 

↑サインアップして進むとこんな画面になります。

 

「やあ、最初のウィジェットを作成してみようぜ!」

という感じで

「1.どのサービスから写真を表示したいですか?」と尋ねられます。

どうやらインスタ以外にFacebookTwitterウィジェットも作成できるようですね。

 

ここではINSTAGRAMを選択して次へ。

 

SnapWidgetでインスタウィジェット作成画面その2

 

「2. どんなレイアウトに使いたい?」

的なことを聞かれてると思うので複数の写真が何列かになっている左上のレイアウトを選ぶとといいと思います。

他のレイアウトがよければそちらを選択。

 

カスタマイズ用の画面に進みます。

SnapWidgetでインスタウィジェット作成画面その3


ここでは左側でカスタマイズ入力、右側にプレビューが表示されます。

左側で「Username」を入力しようとすると画像のように「あなたのインスタアカウントを選んでくれさい」とポップアップウィンドウが出ます。

個人アカウントであれば左の「SIGN IN WITH INSTAGRAM

ビジネスアカウントであれば右の「SIGN IN WITH FACEBOOK

を選択してください。

今回は個人で進めます。

 

インスタログインとアカウントの認証が求められると思うのでOKで進めます。

 

あとはカスタマイズをごにょごにょ

SnapWidgetでインスタウィジェットカスタマイズ

カスタマイズ項目は通常上から順に

  • 説明文
  • サムネイルサイズ
  • レイアウト(横列×縦列)
  • 枠線の有無
  • 背景色
  • 写真どうしの余白
  • マウスオーバー効果
  • 共有ボタン
  • レスポンシブスマホ対応。

 

ごにょごにょといじって「GET WIDGET」でコードが作成されます。

 

SnapWidget埋め込みコードをHTMLとして貼り付け

作成されたコードを表示させたい場所へHTMLで貼り付けます。

Wordpressの場合はウィジェットでカスタムHTML。

 

 

はてなブログの場合は管理画面のデザインからサイドバーなどへ貼り付けるといいと思います。

 

そうして出来るのが以下のようなウィジェット

プラグイン無しでSnapWidgetでインスタウィジェットを埋め込んでみた

前回使用したSmash Balloon Social Personalのプラグインウィジェットが左、今回のSnap widgetは右です。

モザイクだと分かりづらすぎたので参考にInstagram公式のフィードをサンプルで貼り付けています。イメージ図です。

 

列の数や共有ボタンはカスタマイズできるのでどちらでも同じように表示させられそうですね!

 

SnapWidgetのひとつだけ残念な点

実はSnapWidgetで写真をクリックしてInstagramへ飛ぼうとすると、InstagramのページではなくSnapWidgetのページへ飛んでしまいます。

この動作だけがSnapWidgetの唯一の不満点かもしれませんね。

 

SnapWidgetを使ってみた結果

インスタ公式へ飛ばないというデメリットは使う人を選びそうです。

ただWordpressのようにプラグインが使えない場合、サインアップからちょこっとカスタマイズしてHTML埋め込み!と数分で簡単に利用できるのではてなブログなどのサービスではメリットが大きいと思います。

 

エンジニアブログにインスタを載せるというのは需要が全く無さそうなので予定が無いですが、みなさん是非活用してみてください!!