BLOG CATEGORY

Monthly Archives

長フチコンテンツ

ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » webコラム» Instagramをホームページやブログに埋め込む方法(簡易バージョン)

このエントリーをはてなブックマークに追加

Instagramをホームページやブログに埋め込む方法(簡易バージョン)

   投稿日: 2016/08/26    投稿者:webコラム

突然ですが、あなたはInstagramやっていますか?
Twitterが流行し、その後Facebookが流行して、
今はもうInstagramの時代になっています。


せっかくInstagramをやっているなら、
ホームページやブログにInstagramの写真を埋め込みたいですよね?
ただ写真をリンクで表示するだけでなく
あなたがInstagramに投稿した写真が自動更新で表示されます。


埋め込み方法は、大きく分けて2パターンあるのですが、
今回は簡単な方法である
「SnapWidget(スナップウィジェット)」を使った埋め込み方法をご紹介します。


ちなみにあと一つはInstagram APIを使った埋め込み方法になります。
(こちらは少し難易度が高くなっております。)

では、いってみましょう!

201609blog01.jpg


目次
1.まずは「SnapWidget」のサイトにアクセス
2.表示したい情報を入力
3.「GetWidget」をクリック
4.ホームページやブログの表示したいところに貼り付ける


1.まずは「SnapWidget」のサイトにアクセス


SnapWidget
https://snapwidget.com/


[FREE] [INSTAGRAM] [GRID]の
「CREATE YOUR FREE WIDGET」をクリックします。


01_0825.jpg



2.表示したい情報を入力
下記の情報を入力します。
設定よっては様々なパターンが作れます。

入力が完了したら「プレビュー」で確認して、よし!コレだ!と思ったら「GetWidget」をクリックします。


03_0825.jpg



①ユーザーネーム:表示さるアカウントのユーザーネームを入力。
②サムネイルサイズ:表示させる画像のサイズを指定。
③レイアウト:行と列の数を入力。
④フォトボーダー:画像に枠線を付けるかどうかを選択。
⑤バックグラウンドカラー:背景色のカラーコードを入力。
⑥フォトパディング:画像間の余白を入力。
⑦ホバーエフェクト:画像にマウスカーソルを合わせた時の効果を選択。
⑧シェアボタン:シェアボタンの表示、非表示を選択。
⑨レスポンシブ:スマホに対応したサイズ調整を選択。


201609blog02.jpg

3.Instagramを表示する為のコードが生成されるのでコピーします。


04_0825.jpg



4.ホームページやブログの表示したいところに貼り付ける


これで、あなたもバッチリInstagramの投稿一覧を表示できます。


05_0825.jpg



201609blog03.jpg

投稿した写真をみんなに見てもらって、
お店を紹介するも、友達作るもあなた次第!
ぜひお試しください。

カテゴリ:

TOPへ