グランマ☆ライフ

元ハンドメイド作家のブログ。

最新版*Instagramをサイトに埋め込む【スナップウィジェット】の使い方/はてな

最新版・インスタグラムをサイトに埋め込む・はてな

 

 

「更新したツイッターやインスタグラムが反映される

サイトにしたい」

 

「SNSの投稿を 簡単に埋め込みできる

サービスは?」

 

 更新感のあるブログを目指して

ブログにインスタグラムやツイッターの投稿を

埋め込んでいるサイトが 多いようです。

 

チャッピーも両方載せています。

  

こちらでは

 

<こちらの記事は3分で読むことができます>

 

SNSの投稿をカンタンに表示できるツール

【スナップ ウィジェット】の使い方を

ご紹介いたします。

 

パソコンの不得意な方でも ご安心ください。

たくさんの画像を使ってわかりやすく

説明していきます。

 

 

Snap Widget(スナップウィジェット) とは?

 

 

記事にインスタグラムを埋め込むと

こんな感じに。

 

 Snap Widget とは

 

サイトやブログにフェイスブック、インスタグラム、ツイッターなど

の投稿写真を表示するためのツールです。

 

基本的な機能は無料。

 

あとはほったらかしておいても 大丈夫。

連動しているので

勝手に更新されていきます。

 

※ただし埋め込み投稿をクリックしても

 直接インスタには飛びません。

 

f:id:grandmamako:20200913160435j:plain

 

 クリックしたページは こんな感じでした。

 

インスタグラムAPI2020年3月で廃止

 

これから徐々に インスタグラムのAPIを利用した

外部ツールの使用ができなくなるようです。

 

【スナップウィジェット】はまだ使えるようですが

他のツールで作ったインスタグラムは

表示されなくなっているそうです。

 

使用に関しては 以上のことを加味した上で

お使いください。

 

APIとは?

Application Programming Interface)とは、広義では

ソフトウェアコンポーネント同士が互いに情報をやりとりするのに使用する

インタフェースの仕様である。 

Wikipediaより

  

よくわかりませんね。

でも 今回ここは重要ではないので

説明ははぶきます(^_^;)

 

さっそくスナップウィジェット 使ってみましょう!

 

スナップウィジェットのページへ。

 

f:id:grandmamako:20200913135731j:plain

 

無料ウィジェットを入手

 

f:id:grandmamako:20200913135744j:plain

 

無料アカウントを作ります。

 

「名前」(ハンドルネームでOKです)

「メールアドレス」

「パスワード」(任意)

 

を 入力。

 

f:id:grandmamako:20200913135749j:plain

 

 

f:id:grandmamako:20200913135753j:plain

 

 

今回は インスタグラムを選びました。

f:id:grandmamako:20200913135757j:plain

 

テンプレートが出てきますが

この中で インスタグラムを選びます。

 

f:id:grandmamako:20200913135802j:plain

 

さらに 人気のあるグリッドを選びました。

 

f:id:grandmamako:20200913135807j:plain

 

ユーザーネームのところをクリック。

 

 

f:id:grandmamako:20200913135811j:plain

 

 

 

 

f:id:grandmamako:20200913135816j:plain

 

 

 

 

f:id:grandmamako:20200913161632j:plain

 

 

①レイアウト

f:id:grandmamako:20200913135826j:plain

 

インスタらしい スクエア配列

3×3に。

 

※見やすいようにサムネイルのサイズを300にしましたが

 大きさを変えたい場合 数字を変更してください。

 

 

②背景色を変える場合は此方にHTMLカラーコードを。

 

 

③写真/パディング

f:id:grandmamako:20200913135830j:plain

 

写真と写真のスキマ幅。

 

 

④ホバー効果

f:id:grandmamako:20200913135834j:plain

 

・なし

・フェードイン

・フェードアウト

・ズームイン

・高評価とコメント

・キャプション

 

この中から選べます。

ポピュラーな「高評価とコメント」を選択。

 

 

⑤共有ボタン

 ツイッターやフェイスブック。

 なので「はい」を選択。

 

 

 

⑥レスポンシンブ「はい」を選択。

 

 

 

f:id:grandmamako:20200913135839j:plain

 

「ウィジェットを入手」

 

 

 

f:id:grandmamako:20200913135843j:plain

 

 「クリップボードにコピー」

 

 

 

いよいよブログに埋め込み

 

 

f:id:grandmamako:20200913135847j:plain

 

「デザイン」

 

 

 

f:id:grandmamako:20200913135852j:plain

 

「スパナマーク」→「サイドバー」

 

※インスタグラムを配置する場所は 好きなところでOKです。

 

 

 

 

f:id:grandmamako:20200913135932j:plain

ちなみサイドバーは グランマ☆ライフの場合

こちらになります。

 

 

 

f:id:grandmamako:20200913135902j:plain

 

①モジュールを追加

②HTML

③Instagram(わかりやすい名前でOKです)

④先ほど「スナップウィジェット」で「クリップボードにコピー」

 したものをこちらに「ペースト」

 

f:id:grandmamako:20200913135936j:plain

 ⑤「適用」

 

 

f:id:grandmamako:20200913135906j:plain

 

 

インスタグラムを貼りたい位置を 決めて

カーソルで移動させます。

 

チャッピーは「自己紹介」「日本ブログ村」の下に。

 

(後日「カテゴリー」の下へ移動) 

 

最後に「変更を保存する」

 

 

 

f:id:grandmamako:20200913135912j:plain

 

このような感じで インスタグラムが埋め込まれました。

 

 

 

 

 いかがでしたでしょうか。

きちんと表示されましたか?

 

 

 

インスタグラムのAPI廃止に伴って

いずれは消えてしまう運命のようで 残念です。

 

しばらく表示されるとよいのですが・・・

 

今回 スナップウィジェットのことを

いろいろ調べているうちに 気づいたのですが(API)

 

パソコンの苦手な方や 超初心者さんに向けて

練習のつもりで ブログを仕上げてみました。

 

画像が粗かったり 読みづらかったり

改善点も多くて

申し訳ありません。

 

これからも 少しずつですが

皆さんに読みやすいブログに育てていきますので

これからも 

 

どうぞよろしくお願いいたします。

 

最後までお付き合いくださり 

ありがとうございました。

 

 

 

トップに戻る