InstagramをWordPressブログに貼り付け・連携方法


【期間限定】プライム会員ならクーポンコードで4,000円OFF!

InstagramもWordPressブログもやっている場合、インスタとブログを連携させたいと思う事ってありますよね。

今回は、Instagram(インスタグラム)をWordPressブログに貼り付け・連動する方法をまとめてみました。

今回ご紹介する方法は、

  • Instagramの写真を個別にブログに貼り付ける方法
  • 自分のInstagramアカウントをWordPressブログに連携・連動してサイドバーに表示させる方法

となります。

基本インスタはなんとな~く見る専門だったのですが、自分でもちょっと写真をUPするようになりました(*^^*)

スポンサーリンク

Instagramの写真をブログに貼り付け・埋め込み方法

インスタの画像を引用する形で、ブログに貼り付け、埋め込むやり方となります。

まずパソコンで、https://www.instagram.com/にアクセスし、埋め込みたい画像を表示させます。今回は、東京タラレバ娘の画像を引用させていただきます。今回のKEYくんを演じる坂口健太郎くん、めちゃくちゃカッコイイですねw

インスタグラムをブログに埋め込み

画像をクリックすると、右下にメニューが表示されるので、それをクリックします。

下記のようにポップアップで表示されるので、「埋め込み」をクリック。

インスタ埋め込みコード表示

埋め込みコードを選択というポップアップがまた表示されますので、コードをコピーします。

インスタグラム埋め込みコードの選択

キャプションなし

「キャプションを追加」のチェックを外すと、キャプションなしになり、以下のように画像のみのシンプルな形になります。

インスタグラムの画像のサイズを変更するには

ちなみに表示されるコードをそのまま貼り付けるとちょっと画像が大きいです。これはデフォルトのサイズが658px(ピクセル)になってしまっているので、この数値を調整することで、インスタグラムの埋め込み画像のサイズを小さくしたりできます。

サイズ変更 <blockquote class=”instagram-media” data-instgrm-version=”7″ style=” background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% – 2px); width:calc(100% – 2px);”><div style=”padding:8px;”> <div style=” background:#F8F8F8; line-height:0; margin-top:40px; padding:40.27777777777778% 0; text-align:center; width:100%;”>

インスタグラム埋め込みコード中の、前半に表示されるmax-width:658px という場所の数値を「300」など表示させたいサイズに変えるだけです。

やー、坂口健太郎くん、カッコ良すぎw

InstagramとWordPressブログの連携・サイドバーに表示させる方法

次は、自分のインスタアカウントとワードプレスを連動させてサイドバーに表示させる方法です。

ツイッターなら公式からウィジェットでブログへの埋め込みパーツが使えるのですが、Instagramでは公式でブログパーツの連携機能はついていません。

なので、やり方としては2通りあって、

  • 外部サービスを使う方法
  • WordPressプラグインを使う方法

があります。

スポンサーリンク

InstaWidget(インスタウィジェット)でブログに写真を表示

InstaWidgetを使ってWordPressブログにインスタを連携させる

InstaWidgetは、ブログにインスタグラムの写真を表示することができるブログパーツ(ウィジット)サービスです。無料&ユーザー登録なしで使えるので、気軽に利用できます。Insta…とついていますが、Instagramとは無関係のサービスで、Instagram APIを利用した外部の連携サービスになります。

InstaWidgetの使い方・設置方法は本当に簡単で、以下のように、埋め込みたいインスタグラムのユーザー名、もしくはハッシュタグを入力して、表示されるコードをブログのサイドバーに貼り付けるだけです。

InstaWidgetの使い方

InstaWidgetで表示できる画像は最大12枚までです。

下の方にあるレイアウトで横x縦の画像の表示方法が選択できます。

InstaWidgetのレイアウト

プレビューで表示方法が確認できるので、設定が完了したら、表示されている埋め込み用のコードをコピペします。

WordPressの場合、外観→ウィジェット→サイドバーで、「自由形式のテキスト」を新たに追加して、コードを貼り付けるだけで完了します。

以下のように、サイドバーに表示されました。(レイアウトは3x2の6枚での表示です)

InstaWidgetでインスタと連携してサイドバーに表示させた

画像をクリックするとInstaWidgetのサイトに飛び、Instagramの画像が表示され、画像が拡大して見る事ができ、コメントも表示されます。

 

なお、同じようなサービスとしてユーザー登録は必要になりますが、SnapWidgtというウィジェットサービスもあります。こちらは、Instagramだけでなく、TwitterやFacebookアカウントも連携させることができます。

 

WordPressのプラグインを利用してInstagramと連携させる方法

WordPressではInstagramと連携できる便利なプラグインがあります。

プラグイン→新規追加で、「Instagram」と検索すると、「Instagram」(Instagram Feed WD)というプラグインがありますので、インストール、有効化にします。

Instagramプラグイン

有効化すると、左のメニューにInstagram Feed WDという項目が追加されていますので、

まずそこからSetting(設定)の所で、Instagramのアカウントと連携の設定をします。

Instagram FEED WD設定

 

英語なんですが、「このプラグインを使うにはアクセストークンが必要なので、上記の 「Sign in with Instagram」ボタンをクリックしてInstagramにサインインして取得してください。」と出ますので、下記のボタンをクリックします。

Instagramと連携するか確認される

以下のようにあなたのInstagramアカウントを連携しても良いか?というアラートが出ますので、Authorizeで許可します。

Instagram連携許可

そうすると自動的にAccess TokenとUsernameにデータが入力されます。

ブログにInstagramを設置するには、外観→ウィジェットにいくと、

Instagram WD Widgetというウイジェットが追加されているので、それをクリックすると表示する場所が選択できますので、選択して、ウィジェットを追加。

Number of colomnsで、横に並べる画像の数、

Number of images to showで何枚表示するか設定できます。

これで以下のように簡単に表示が可能です。

まとめ

Instagramの写真をWordPressブログに貼り付ける方法と、連携してアルバムを表示させる方法をご紹介しました。

最近はiPhoneで写真を撮る事しかしていないので、あ、これ面白い!とか便利と思ったものはInstagramにアップする方が手軽です。

ブログに記事として投稿するまでもないというものや、あとでブログ記事にするかも…というものなど、アップしておくとそこから引用できたりもするので、意外と便利に使えそうと思いました(*^^*)

 

スポンサードリンク



2017年はどういう年にしたいですか?

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です