【Wordpress以外もOK】TwitterやInstagramウィジェットをサイトに埋め込む方法 Part.3「Instagram プラグイン無し編」
各SNSのサイト埋め込みは、Webデザイナーさん、ブロガーさんの需要が非常に高い内容だと思います。
▼Twitter埋め込みやWordpressプラグインを用いる方法など、前回までの記事はこちら
【Wordpress】TwitterやInstagramウィジェットをワードプレスに埋め込む方法 Part.1「Twitter編」 - ABC ウェブエンジニアblog
【Wordpress】TwitterやInstagramウィジェットをワードプレスに埋め込む方法 Part.2「Instagram編」 - ABC ウェブエンジニアblog
元はWordpressのレッスンでの質問を受けての記事でしたがTwitterや今回のInstagram埋め込みの方法は、はてなブログなどHTMLを記述出来るサービスであれば適用できます。
はてなブログ読者さんも是非お役に立てて頂ければ幸いです。
▼インスタによる集客力を高めるためには参考書を一読するとよいでしょう。
Instagram集客の教科書
プラグイン無しでのInstagramフィード埋め込み方法
前回はWordpressのプラグインを使ってインスタウィジェットを実現しました。
今回はWordpress以外にも応用が効くHTML埋め込みによる方法です。
公式で提供されている機能を使うと難易度が上がるため、なるべく簡単な方法でSnapWidgetというサービスを利用します。
SnapWidgetでInstagram埋め込みHTML作成
まずは以下のSnapWidgetのサイトへアクセスします。
こういったサービスはだいたいが英語ですね。Google翻訳など活用して慣れるしかないです。(笑)
右上の「SIGN UP」から登録画面へ進みましょう。
上から順に名前、メールアドレス、パスワードを入力してサインアップ。
もしくはFacebookと連携して登録することも可能です。
↑サインアップして進むとこんな画面になります。
「やあ、最初のウィジェットを作成してみようぜ！」
という感じで
「1.どのサービスから写真を表示したいですか？」と尋ねられます。
どうやらインスタ以外にFacebook、Twitterのウィジェットも作成できるようですね。
ここではINSTAGRAMを選択して次へ。
「2. どんなレイアウトに使いたい？」
的なことを聞かれてると思うので複数の写真が何列かになっている左上のレイアウトを選ぶとといいと思います。
他のレイアウトがよければそちらを選択。
カスタマイズ用の画面に進みます。
ここでは左側でカスタマイズ入力、右側にプレビューが表示されます。
左側で「Username」を入力しようとすると画像のように「あなたのインスタアカウントを選んでくれさい」とポップアップウィンドウが出ます。
個人アカウントであれば左の「SIGN IN WITH INSTAGRAM」
ビジネスアカウントであれば右の「SIGN IN WITH FACEBOOK」
を選択してください。
今回は個人で進めます。
インスタログインとアカウントの認証が求められると思うのでOKで進めます。
あとはカスタマイズをごにょごにょ
カスタマイズ項目は通常上から順に
ごにょごにょといじって「GET WIDGET」でコードが作成されます。
SnapWidget埋め込みコードをHTMLとして貼り付け
作成されたコードを表示させたい場所へHTMLで貼り付けます。
はてなブログの場合は管理画面のデザインからサイドバーなどへ貼り付けるといいと思います。
そうして出来るのが以下のようなウィジェット！
前回使用したSmash Balloon Social Personalのプラグインウィジェットが左、今回のSnap widgetは右です。
モザイクだと分かりづらすぎたので参考にInstagram公式のフィードをサンプルで貼り付けています。イメージ図です。
列の数や共有ボタンはカスタマイズできるのでどちらでも同じように表示させられそうですね！
SnapWidgetのひとつだけ残念な点
実はSnapWidgetで写真をクリックしてInstagramへ飛ぼうとすると、InstagramのページではなくSnapWidgetのページへ飛んでしまいます。
この動作だけがSnapWidgetの唯一の不満点かもしれませんね。
SnapWidgetを使ってみた結果
インスタ公式へ飛ばないというデメリットは使う人を選びそうです。
ただWordpressのようにプラグインが使えない場合、サインアップからちょこっとカスタマイズしてHTML埋め込み！と数分で簡単に利用できるのではてなブログなどのサービスではメリットが大きいと思います。
エンジニアブログにインスタを載せるというのは需要が全く無さそうなので予定が無いですが、みなさん是非活用してみてください！！
Instagram集客の教科書
