読者です 読者をやめる 読者になる 読者になる

ブログへのInstagram(インスタグラム)の埋め込みは超簡単!「SnapWidget(スナップウィジェット)」を使った5パターンの表示方法をご紹介!

f:id:yoshitokamizato:20170105221355j:plain

最近やっと、Instagram(インスタグラム)を始めました。

もしよかったら、フォローお願いします。

 

で、せっかく始めたなら

 

「ブログにもどうにかして自動更新されるようなインスタグラムの埋め込みを表示したい!」

 

と思いました。

それでちょっとやり方を調べてみたんです。

  

そうすると、めちゃくちゃ簡単にインスタの表示ができるサイトを見つけました。

これ、結構有名なサイトのようですね。

下のブログでも紹介されていました。

 

www.ozawaakira.com

 

www.ca-advisors.co.jp

 

 SnapWidget(スナップウィジェット)

snapwidget.com

 

ブログへのインスタの埋め込みが出来るこのサイト、使い方がめちゃくちゃ簡単なんですよ。 

なんと、たったの2ステップで埋め込み用のコードが出来ちゃいます!

 

<手順>

①の部分にユーザーネームを入れる

②の「Get Widget」ボタンを押す

 

f:id:yoshitokamizato:20160429121913p:plain

 

これで、埋め込みコードの作成は終了です!簡単簡単!

あとは出来上がったコードをコピペして、

 

f:id:yoshitokamizato:20160429133700p:plain

 

ブログのHTMLモードに切り替えて、インスタを表示させたいところにコードを貼り付けるだけ!

 

f:id:yoshitokamizato:20160429133839p:plain

 

 

デフォルトで出来上がるのがこんな感じ↓

 

めちゃくちゃ簡単じゃないですか!? 

 

この表示方法には5パターンあるので、それぞれのパターンをご紹介します。

 

パターン1.Grid

これは、さっき例にあげたやつですね。

 

「Widget Type」のボタンで選択!

これから紹介するパターンも全てこのボタンで選べます。

 

f:id:yoshitokamizato:20160429122836p:plain

 

何もいじらない状態で、アカウント名を入力してコードを作るとこうなります。

 

 

ぶっちゃけ、これで十分じゃないですか!?w 

普通にクオリティー高いですよね。

 

ちなみに、

 

①の「Layout」のボタンで行と列の数を指定できて、

 

②の「Responsive」のボタンでレスポンシブル(画面のサイズに合わせてインスタを表示する)

 

に変えられます。 

 

f:id:yoshitokamizato:20160429124520p:plain

 

スマホで表示することも考えると「Responsive」はYesにしといた方がいいですね!デフォルトではNoになってるのでご注意を!

 

よく使いそうなの機能はこのくらいかなぁ。

他は正直、あまり気にしなくていい気がします。

シェアボタンも、デフォルトで表示されるように設定されているので。

 

2.Board

Widget Typeを「Board」に変更してみると、、、、、

f:id:yoshitokamizato:20160429124735p:plain

 

こんな感じで表示されます↓

 

うん、おしゃれ! 

ぼくはこれを採用してます!

 

3.Scrolling

f:id:yoshitokamizato:20160429125302p:plain

 

 これはなかなかおしゃれですよ〜。

 

こんな感じ↓ 

 

4.Slideshow

f:id:yoshitokamizato:20160429130145p:plain

 

 

これは~、ちょっとしょぼいかなw 

 

5.Map

f:id:yoshitokamizato:20160429130802p:plain

 

これはもう、そのまんまですね。

Mapです。

 

 

投稿した時の位置情報がそのまま反映されてるっぽいですね!

これを載せる際は、自宅が特定されないようお気をつけてw

 

詳細設定 

マウスをインスタの画像に合わせた時に、ちょっとエフェクトを入れたい場合は「Hover Effect」を使用してみるといいです。(スマホ表示では設定は反映されません)

 

種類は「none」「Fade in」「Fade out」の3種類!

 

「none」はマウスを画像に合わせても何も反応しません。

 

f:id:yoshitokamizato:20160429132242p:plain

 

「Fade in」を選択すると、マウスを画像に合わた時に「はっきり」見えるようになります。

 

 

「Fade out」を選択すると、 マウスを画像に合わせた時に「薄く」見えるようになります。

 

 

ちなみに、ぼくはこのモードを採用しました。

なんとなく、かっこいい。 

 

 まとめ

こういうふうに、見た目を考えてデザインをいじるのが簡単にできると楽しいですよね。

ぜひ、自分の好みにカスタマイズしたデザインでインスタを埋め込んでみてください。

 

ちなみに、ぼくはこういうのが好きで色々やってたらプログラミングにはまりました。

そして、研究職からエンジニアへと転職し、これから本格的に稼働予定です。

 

注目!!

プログラミング初心者からわずか半年で転職を決めたぼくが利用した学習ツール14選

 

よかったら、あなたもプログラミングの楽しさを体験してみてください。

転職までする必要はないかと思いますが。笑