WordPress

簡単すぎるWordPressへのInstagram埋め込み方法!※制限あり

投稿日:

どうも、田中です。

 

自己紹介の一部なんかでInstagramを使いたい!と思ったことはありませんか?

Instagramを使うとかなり簡単に自己を紹介できちゃうなって思うんです。

例えば

  • 私の興味のあること
  • 最近やったこと
  • フォローしているタイプ

などなど、その人に関するパーソナルな情報の一部を見ることが出来ます。

 

こういったサービスを使ってしまえば、わざわざ文章で自己紹介をするよりずっと人に理解してもらえたりします。

文章だけで理解するのは結構難しい事です。

写真なら簡単に自己表現できると思うので、サクッとブログに導入してみましょう。

今回の方法はWordPressへの導入をまとめてます。

他のブログサービスへ導入するときは読み替えてくださいね

使うサービスは無料のこれだけ!

WordPressにInstagramを埋め込むために使うサービスは1つだけInstaWidgetってやつです。

このサービスでは名前の通り、任意のアカウントやハッシュダグをウィジェット化することが出来ます。

今回は自分の紹介のためって事でまとめているので、自分のアカウントをウィジェット化する方法を紹介します。

設定方法

InstaWidgetにアクセスしましょう。すると画像のようなページに移動します。

そしたら以下のボタンを押してみましょう(このボタンを押しても移動できます)

 

ボタンを押すとウィジェットの作成のページに移動できます。

この画面で自分のためのウィジェットを作成しましょう。

 

ウィジェットの作成画面のレイアウトは見てわかるよと言われるかもしれませんが

左側に

  • 設定項目
  • プレビューボタン

右側に

  • プレビュー画面
  • ウィジェットコード取得

があります。

 

左側の設定項目で覚えておきたい最低限は以下の通り

  • ユーザ名
  • レイアウト

この2つだけ覚えておけばウィジェットを作ることに問題は無いでしょう。

このサービスは無料なので、他の設定項目は試してみてください。

ウィジェットにアイコンを出すか、フォローボタンを消すか、などなど見た目通り色々な設定が可能です。

 

でも、できることは画面にある設定項目だけです。

殆どの場合は十分かもしれませんが、完全に自分の思い通りにするには制限があることを忘れてはいけません。

※JKT48が設定されているのは趣味じゃなくこのサービスの仕様です。

 

あと1つ忘れてはいけないことは画面最下部にある「プレビュー」のボタンを押すことです。

左側の設定項目だけイジってもウィジェットは完成しません。

「プレビュー」ボタンを押して右上にプレビューが出来上がった段階で設定にあったウィジェットが出来上がっています。

設定するだけじゃなくて見て確認してからってことを忘れないようにしましょう。

ブログへの導入

ある程度いじってみて満足したらブログへ埋め込みましょう。

画像赤枠分の「埋め込みコードを取得」を押しましょう。

すると

こんな感じでポコッと埋め込みコードが表示されます。

このコードがプレビュー画面で確認してたInstagramのウィジェットの埋め込みコードになります。

コードを見ても何がなんだかわかりませんが、とりあえずコピーします。

あとはこのように記事や固定ページのエディタにペタッとペーストするだけです。貼り付けってやつですね

1つだけ注意するのはエディタを「テキスト」にしておくことです。

こうしないとうまいこと埋め込みコードを入力することが出来ません。というか、ビジュアルにしているとコードではなく文字として扱われてしまいます。

 

貼り付け終わったらエディタを「ビジュアル」に変更してみましょう。

こんな感じになっていると思います。全然良くわかりませんねʕ•ٹ•ʔ

ということでプレビューでも確認してみましょう。

こんな感じにちゃんと表示されることが確認できます。

これで埋め込み完了です!

ちょっとした制限事項

タイトルにも書きましたが、無料サービスですし若干の制限があります。

主に気になるところは以下の通り

  • 全てのInstagramの投稿は確認できない

個人的に気になったのはこのくらいです。気になる人はもっと気になるかもしれませんね

 

もっと見る的なモノもありませんし、フォローボタン以外はウィジェット作成用の別ページに移動してしまうので閲覧している人にとってはちょっと不安になるかもしれません。

それでも自分でプログラミングを勉強することに比べたらとっても便利です。

でも、ちょっとだけの工夫で上記の悩みは解決できたりします。

こうすれば制限も気にならないよ

ということで、ほとんど知識がなくても気になる制限事項を解決する方法を考えてみました。

こうすれば上に上げたような悩みは解消できます。

全ての投稿を見れるようにする!

InstaWidgetではレイアウトで定められた数の投稿しか表示することが出来ません。

最新の投稿○○件まで、といった感じになってしまうということです。

「もっと見る」とかをイメージしてこんな感じで対応しましょう。

はい!ただウィジェットの下に「もっとみる」という名前のリンクを作って、リンク先を自分のInstagramにしただけです!

たったこれだけで表示されているものより、もっと見たい人に向けた対応ができますね

 

足りない部分は他の機能を使って保管できることを考えてみましょう。

(差し込み画像は友人のポートフォリオから抜粋しました。よかったら見てください→amayadori

 

最後に

InstaWidgetを使ったWordPressへの簡単な埋込方法はこれで終わりです。

便利なサービスはやっぱり便利です。

あとはちょっとの工夫と魅せ方次第でオリジナリティがでてきます。

是非参考になればと思います。

 

あとTwitterも簡単に埋め込むことが出来ます。

写真やイラストをInstagramで、そして文章的な部分はTwitterで、といった具合で棲み分けするとそれぞれのSNSが使いやすいかもしれません。

ってことであなたのちょっとしたパーソナリティを紹介するためにTwitterも埋め込んでみてはどうでしょう↓

プラグイン不要!超カンタンTwitter連携🔌
WordPressにツイートを表示させる方法

どうも、田中です。   無料で出来る情報発信ツールの一つとして 『Twitter』は強力なツールの一つです。 ...

-WordPress
-, , , , ,

Copyright© おっどじょぶマン田中 , 2019 All Rights Reserved.