「メンタルてんきよほー」は”hikaru3.Labo”へリニューアル。

Instagramを10分でブログに埋め込み連携。プラグインの設定を解説!

ワードプレス
スポンサーリンク

こんにちは!HSPライターひかるんです( @hikaru3blog)

Instagramのタイムラインをブログ連携する方法を紹介なんですが、連携って言っても2パターンに絞られます。記事にもお気に入りの写真だけを貼り付けたいorタイムラインを埋め込み連携

どちらも覚えてしまうと簡単ですが、少しハードルが高い作業でもあります。

そこで、写真多めで見たままやればいい方法にしてみました。

 

 

スポンサーリンク

Instagramタイムラインの埋め込みは、プラグイン「Instagram Feed」を使う

 

いくつかプラグインはありますが、1番楽チンで安定しているプラグインがいいですね。

なかでも「Instagram Feed」というプラグインを積極的にススメる理由があるんです!

  1. ショートコードで簡単に自分のウェブサイトやブログへインスタグラムの写真や動画を埋め込める。
  2. 他の人のインスタグラムの写真もショートコードで、自分のウェブサイト・ブログへ簡単に貼り付けられる。
  3. レスポンシブ対応なので、ワードプレスとの相性が良く勝手に複数の写真の表示感覚が伸び縮みする。
  4. Instagram Feedの設定画面で表示する写真の枚数などの表示する内容の変更がカンタン。
  5. 基本、利用は無料。(有料を部分を使わなくても十分です。)

 

ぼくのブログで連携しているスクリーンショット

 

◆ 初期設定では写真が4X5ですが、設定でタテ・ヨコの枚数はカスタム出来るんです。

 

インスタグラム

 

 

◆ メインへショートコードを貼り付けたカスタマイズ。

 

トップページで写真をタイル状にするのもオシャレで、見た人をひきつけやすいですよね~。

[instagram-feed width=50 num=9 cols=3]

 

 

プラグインをインストールしていきましょう

 

作業の流れ

3ステップで簡単設定していきます。

① プラグインをインストール

② Instagram Feedの設定

③ サイドバーへウィジェットで貼り付け、埋め込み

おまけ:ハッシュタグをつけておく

 

① Instagram Feedプラグインをインストール

 

プラグイン⇒新規追加で「Instagram Feed」を検索。

インスタグラム

 

Instagram Feed ←コピペでOKインスタグラム

 

 

このプラグインの今すぐインストールをクリック!

 

インスタグラム

 

有効化をクリック。プラグインがインストール出来ました。

インスタグラム

 

 

② Instagram Feedの設定

インストールが正常に済んでいたら、赤い四角のようにショートカットが出来ています。

赤枠をクリック!

インスタグラム

設定画面の赤い四角をクリック。

 

あなたのインスタグラムから、ワードプレス連携に必要なデータを勝手に取り出してくれます。

インスタグラム

 

赤い四角と青い四角にそれぞれ数字が出ましたね。

図のまんま、赤い四角の長い数字を下へコピペ!

青い四角も同じくコピペ!

 

変更を保存をポチッとな!

インスタグラム

 

見栄えよくカスタムします。

赤枠のところはデフォルト設定から変更しましょうね。

① Number of Photos(写真の表示枚数)20 ⇒ 9

② Number of Columns(写真の表示枚数)4⇒3

③ 保存を変更をポチッとな!

※ ここはあとで好みにカスタム出来ます。

インスタグラム

 

ショートコードをサイドバーなど任意の場所に貼れば埋め込み連携は完了。

インスタグラム

 

このショートコードは、1番上で見本で見せたデフォルト設定で表示されてしまいます。

 

 

 

③ サイドバーへウィジェットへ貼り付け、埋め込む

※ ストーク以外のテーマでは、若干見え方が違いますが同じことが出来るので大丈夫。

 

「外観」⇒「ウィジェット」⇒「ビジュアルエディター」をサイドバーへドラック。

ビジュアルエディターをテキストモードにしておいて、次のショートコードを貼り付けてください。

<center>[instagram-feed num=6 cols=3]</center> ←[ ]の全角を半角に変えてくださいね。

Instagram

 

 

Instagramプラグインを使わない方法もある

 

 

貼り付ける方法のステップ

1)PC版のInstagramを開く。

2)好きな写真を選ぶ。

3)写真の埋め込みコードをコピー。

 

 

1)PC版のInstagramを開く。

 

PC版のInstagramを使っている人は、1)は飛ばしてください。

 

① Instagramのログイン画面から、このままFacebookでログインをオススメします!

 

 

※ InstagramとFacebookが相互連携させておくとで後々楽チンなんです。

 

PCでこのリンクをクリック する

 

 

Instagram

 

 

② Facebookでログインをクリック!

 

 

Instagram

 

 

 

③ PC版Instagramの画面になりました。右上の人間マークをクリック!

 

 

Instagram

 

 

 

2)好きな写真を選ぶ。

 

① 自分のInstagramページが出るので、好きな写真をここで選びます。

 

白い花の写真を例に説明をしていきます。


赤わくの写真をクリックする!

 

Instagram

 

 

② 画面右下の・・・をクリック!

 

 

Instagram

 

 

 

③ 埋め込みをクリック!

 

Instagram

 

 

 

3)写真の埋め込みコードをコピぺ

 

① 「埋め込みコードをコピー」をクリック!

 

 

Instagram

 

 

 

キャプション付きはこんなに感じ。

 

キャプションなしはこんなに感じ。

 

 

キャプションについて

キャプションとは、いいねやコメントの数、コメント内容など写真以外の情報。

上の投稿は、キャプションをつけています。

写真だけを貼り付けたい場合は、「キャプションを追加」のチェックを外してからコピー。

 

 

② ブログやウェブページの好きな場所に貼り付ける。

 

【ワードプレスの場合】テキストモード

【アメブロの場合】HTML表示

 

 

それぞれ変更して、コードを貼り付けてください。

ここ以外に貼るとコード文字がそのまま出てきます。

 

 

コピーしたままのコードを貼り付けると、Instagramの投稿は画面いっぱい。

 

 

スマホになれば小さく表示されるんですが、少し大きすぎますよね。。。

スマホでもPCでも見やすいとされるのが 300px って大きさ!

貼り付けたコードの数字を書き換えてみましょう。

 

 

 

⬇ max-width:658px(最大658pxの大きさ)がデフォルト設定 ⬇

 

 

 

コピーしたままのコードをちょい変更する

 

 

Instagram

 

 

大丈夫です!コード見て、パニックにならないで

 

たくさん訳わからん文字と数字があるけど、赤のマーカーのところだけ見つけてください。

あとは無視でいいです!

 

 

マーカー部分の半角数字を658から300に変えて、保存したらいいだけ。

 



300pxにすると、こんなに小さくなりますよ(^^♪

(スマホ表示では大きな写真も勝手に縮小。PCから見ると一目瞭然。)

 

 

Instagramの写真をブログに貼り付けるまとめ

 

いかがでしたか?Instagramのあなたのお気に入りの写真だけを、ブログに貼りつける方法を紹介しました。

 

タイムラインを埋め込み連携するよりもカンタンでしたね。

 

少しコードの数字を変えてもらいましたが、慣れると自分の好みの大きさにも変更出来ます。

 

さっそく、挑戦して素敵なページを作ってくださいね。

 

まとめ

もう、インスタっておっさんのぼくでもやってるので、少々終わってる感があります。

ところが、文章をダラダラ書くよりも視覚にアピールするのは、商売していなくても効果的。

ブログもインスタもやっているけど、ハードルが高いから貼り付けはスルーしてきた人には一度チャレンジして欲しいです。

 

スポンサーリンク
この記事を書いた人
ひかるん

当サイト「hikaru3.Labo(ひかるんラボ)」管理人
45歳で軽度ADHDと分かり、現在リハビリ中。

ミラーレス片手に自然や大地に近づいて、様々な問題が解消。
Perfumeと仮面ライダー電王で「未来に希望を持つ」

詳しいプロフィールはこちらで~す

ひかるんをフォローする
ワードプレス
スポンサーリンク
この記事が気に入ったら最新ニュース情報を、
いいねしてチェックしよう!
hikaru3.labo