ブログ

インスタグラムはブログに埋め込みできる?サイドバーに貼る方法

皆さんインスタグラム使ってますか( ・∀・)?

僕はわりと最近使い始めましたw

 

「インスタグラムのフォロワーさんをもっと増やしたい!!!」

 

ということで、こちらのブログからもインスタの投稿が見れるように、

サイドバーに貼ってみました( ・∀・)

こんな感じのやつですね!

 

どうやったらこんなの表示できるかな〜って調べてみたら、

InstaWidgetというものが一番簡単そうだったので、こちらを利用しました!

 

こちらの記事ではInstaWidgetを使って、ブログにインスタの投稿の埋め込む方法について説明していきたいと思います!

InstaWidgetの使い方

InstaWidgetは誰でも簡単に、しかも無料で使えちゃいます( ・∀・)

 

まずはこちらからInstaWidgetを開きましょう。

InstaWidgetはこちら

 

InstaWidgetを開いたら

「無料インスタグラムブログパーツ作成」か

「早速作ってみる」というボタンをクリックします。

そうすると、ブログパーツ作成の画面が開きますので、

ここに必要な部分を入力していきます。

 

まず、ユーザー名は必須で入力しなければなりませんね!

一応ハッシュタグを入力すれば、そのハッシュタグがついている投稿を表示もできます。

 

こんな感じ(#カフェ会の投稿を表示させてみました)

ブログに貼るんだったら自分のインスタグラムを載せたいと思うので、ユーザー名の方を入力しましょう!

 

ユーザー名を入力して、一番下の「プレビュー」をクリックすれば、

一応ブログ埋め込み用のコードはできます!!!

 

特に変更しなくてもいいや〜って方は

ユーザー名を入力したら終了です( ・∀・)!

 

その他、変更したい場合は、変更箇所を入力していきます!!!

僕が変更しているところを中心に説明していきます。

 

  • ブログパーツ幅

ワードプレスのテンプレートによってサイドバーの幅が違うと思いますので、

そのサイドバーの幅に合わせて作成するブログパーツの幅も変えましょう。

 

  • レイアウト

デフォルトだと3✕2になっていますが、

僕はもう少し写真を表示したいので、3✕4に変更しています( ・∀・)

 

  • 新しいウィンドウで

デフォルトだと「開かない」になっていますが、

こちらの写真等をクリックすると「InstaWidget」のページにとんで、

ブログのページが閉じられてしまいます。

 

できればブログのページを開かないでほしいので、

僕は「開く」に変更しています。

 

  • 色の設定

ブログのテンプレートによって、外枠の色、文字の色、背景色を変えるといいかもしれませんね!

僕は白背景なので、デフォルトのまま使っても違和感がないですが、

ブログに背景色などを設定している場合は、その背景色に合わせて設定するといいかもしれません( ・∀・)

 

カラーコードを調べたい場合は「カラーコード 一覧表」などで検索すればたくさんでてきますので、調べてお好きな色に変えてみてくださいね!

 

  • 写真効果

「フェードイン、フェードアウト、なし」の3つから選べるようになっています。

視覚的に変化が合ったほうがいいので、僕はフェードインを選択しています( ・∀・)

 

他にも色々と設定がありますが、

お好みに合わせて色々変更してみてください!

 

その都度「プレビュー」をクリックすれば、

プレビューが表示されますので、自分が納得の行くブログパーツを作成してみてください!

 

また、ブログに埋め込むためには「コード」に表示されている

<!– InstaWidget –>
<a href=”https://instawidget.net/v/user/yushisato0510″ id=”link-8ed87df6b222dbc1a16b98c29a85d136f8f9c0a958517fbe92778d313053dd48″>@yushisato0510</a>
<script src=”https://instawidget.net/js/instawidget.js?u=8ed87df6b222dbc1a16b98c29a85d136f8f9c0a958517fbe92778d313053dd48&width=300px”></script>

こんな謎のコードを使いますので、「埋め込みコードを取得」をクリックしてコピーしておきましょう( ・∀・)

ブログ(ワードプレス)に埋め込む方法

ブログパーツというぐらいなので、ブログに設置しなければ意味がありません!笑

 

けどHTMLだのはさっぱり分からない・・・

 

そんな人でも簡単に設置できるので安心してください( ・∀・)

インスタウィジェットをブログ(ワードプレス)のサイドバーに貼る方法

サイドバー以外にも設定できるのですが、

サイドバーに設定する方が多いと思うので、

サイドバーに貼る方法を例としてまとめておきます。

 

まずワードプレスのダッシュボードにログインします。

(テンプレートなどにより少し画面が違いますが、大体一緒ですので、参考にしてみてください)

そうしたら、左にあるメニューから「外観」→「ウィジェット」と進みます。

そうすると、ウィジェットを編集するページが表示されます。

左にある「テキスト」を選択して右の「サイドバーウィジェット」にドラックアンドドロップしましょう。

※お使いのテンプレートによって、「テキスト」や「サイドバーウィジェット」などの名称も多少違いますので、それらしいものを入れてみてください。

例えば、僕が現在使っているテンプレートに関しては、「テキスト」ではなく「ビジュアルエディター」がそれにあたります。

テキストをドラッグアンドドロップでサイドバーに入れたら、

内容のところに先程インスタウィジェットでコピーしたコードを貼り付けます

 

タイトルのところにはInstagram(インスタグラム)などと入れておくといいと思います。

 

ちなみにテキストのタブの中身に

「ビジュアル」「テキスト」と選択するタブがある場合は「テキスト」を選択してから貼り付けるようにしてください!

 

入力して「保存」をクリックすれば、

こんな感じでブログのサイドバーにインスタウィジェットが表示されると思います( ・∀・)

インスタウィジェットにインスタの投稿が反映されない?

僕がインスタウィジェットを作成して、ブログに貼り付けた時、

以前の投稿は表示されるものの、

更新した投稿が反映されないということがありました。

 

それを解決した方法を載せておきます。

原因を調べてみた

まず、インスタグラムの投稿をして、

すぐにはインスタウィジェットには反映されません

 

インスタウィジェットのページの「よくある質問」に

「インスタウィジェットでは2時間ごとにインスタグラムの更新をチェックしています。」

と書いてあります。

 

ですから、まずは2時間待ちましょう!!!

それでも表示されなかったから問い合わせてみた

2時間経ったら反映される〜

と思ってたので、2時間以上とりあえず待ちました。

 

というか、昼頃に投稿して、夜まで待ちました。

 

しかし、いつまで経っても投稿が反映されない・・・

 

ということで、夜に問い合わせのメールを送ってみました!

 

しかーし、返信はありませんでした・・・(´・ω・`)w

結局解決できた

返信は無かったのですが、次の日には解決できました。

 

前日の夜には表示されなかったものの、

次の日朝起きたらしっかり更新が反映されてました( ・∀・)

 

結局何をしたわけではありませんが、

更新が反映されるようになりました!!!

 

最初に設定したばかりのときは、2時間以上かかる場合があるのかもしれませんね!

まとめ

インスタウィジェットを使えば誰でも簡単にブログにインスタの投稿の埋め込みが可能です!

 

ブログにアクセスがあるのでしたら、

インスタの投稿を貼っておけばフォロワーが自然に増えていきます。

 

インスタグラムのフォロワーを増やしたいのでしたら、ぜひインスタウィジェットを使ってブログにもインスタを埋め込んでみてくださいね( ・∀・)

ABOUT ME
佐藤雄思
好きなことだけして生きています( ・∀・)w