wordpressのサイドバーにInstagramウィジェットを設置。followボタンもね

シェアお願いしますヽ(=´▽`=)ノ

150501-0005

やっていない人を探すほうが難しいInstagram。当ブログサイドバーにも、Instagramウイジェットを追加してみました。いい感じです自画自賛w 

wordpressのプラグインではなく、WEBSTAというwebサービスを利用して設置しています。テーマに関係なく簡単に設置できるよ。

スポンサードリンク

ブログに埋め込むコードを生成

こちらのページから、Instagram画像をブログに埋め込むためのコードを生成しましょう。

WEBSTA
http://websta.me/tools

150501-0001

WEBSTAでは、ユーザー名、ハッシュタグ等からパーツを作成することが可能です。画像サイズ、表示方法も細かく設定できます。
wordpressのウィジェットの「テキスト」をサイドバーなど、好きな位置に設置してコードを埋め込みましょう。

2016年5月8日追記。
2016年6月にウィジェットのアップグレードが行われるようです。本記事で紹介しているhttp://websta.me/toolsからではなくWEBSTA Widgets websiteからコードを作成するようにとアナウンスされています。詳しくは

【注意】WEBSTAでInstagramをブログ表示している人、2016年6月からウィジェット仕様変更あるので再作成が必要だよ
はい、ブログのタイトルどおりの内容です。 ブログのサイドバーとかにWEBSTAのサービスを利用してInstagramを表示している人。...

followボタンも作ろう

あわせてfollowボタンも作ってみましょう。

Instagram Follow Button
http://instafollowbutton.com/

Instagramのアカウントで上記サイトにログインすると、すぐにfollowボタンを設置するためのコードが作成されます。
またボタンのサイズ、フォロワー数の表示非表示、ユーザー名の表示非表示の設定が可能となっています。
150501-0002

HTMLとjavascript2種類のコードが生成されます。HTMLコードを、ボタンを表示させたい箇所に貼り付け。javascriptはbodyタグ付近に貼るようにとなっています。

わたしはウィジェット内に2つのコードとも貼り付けました。
followボタン設置のHTMLコード、Instagram画像表示コード、followボタンのjavascriptコードの貼り付けで問題なく動いてます。
150501-0003

2016年6月3日 追記
こちらのボタンも2016年6月1日のInstagramの仕様変更により、動作エラーが出るようになりました。

あれ?Wordpressに貼ったInstagramフォローボタンが使えなくなったぞ。それはInstagramの仕様変更のせいです
あれ よく見ると、ブログ横に設置しているInstagramフォローボタンのフォロワー数吹き出しが、errってエラー吐いてる。 あ...

Instagramでの密かな楽しみは、はじめてのハッシュタグを作成できたとき。でも、そのタグ付けるの自分だけとかw Instagram楽しみまっしょい!

昭和生まれの40代。お仕事はEC系。
嫁、セキセイインコ、魚多数と暮らす。家が大好き。休日はインドア派。
ブログはもっぱら趣味の自転車、写真、カメラ、コーヒー、軽登山について。
最近気になるモノ:盆栽、ジャズ、アナログ・レコード、インテリア
スポンサーリンク

シェアお願いしますヽ(=´▽`=)ノ

フォローお願いしますヽ(=´▽`=)ノ

コメントをどうぞ

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