*

instagramのアカウントページをブログパーツとしてサイトに貼る方法「InstaWidget」

公開日: : Webサービス

instagramのブログパーツ

ブログやウェブサイトに Twitter や Facebook のウィジェット(ブログパーツ)が設置されているのはよく見かけますが、instagram はあまり見かけないんですよね。ブログと instagram を連携して活用する為に何か方法はないのかと調べてみました。

しかし instagram 公式機能として写真の1枚1枚をブログなどに埋め込むことは可能ですが、個人アカウントページを埋め込む事は不可能でした。あっても良い機能だと思いましたが、意外にもありませんでした。

instagramのブログパーツを作れる「InstaWidget」

それじゃあ、instagram のアカウントページをブログパーツとして埋め込む方法はもうないのか?いえ、方法はありました。それが「InstaWidget」です。

無料インスタグラムブログパーツ作成 | InstaWidget

InstaWidget は、あなたのブログやウェブサイトにインスタグラムの写真アルバムを追加するブログパーツ(ウィジット)です。ユーザー名またはハッシュタグを指定することで簡単に埋め込み用のコードを生成でき、コピー&ペーストするだけで設置は完了です。ログインやユーザー登録は一切不要で、無料で使えます。早速作ってみましょう!

instawidget.net

InstaWidget は instagram 公式のサービスではなく instagram API を使用して第三者が開発したサービスです。例えれば Twitter と連携して動くウェブアプリのようなものです。InstaWidget は無料で instagram のアカウントページのブログパーツを生成できます。

InstaWidget を利用して実際にブログパーツ化して表示したら以下のようになりました。

だいぶん小奇麗に表示してくれます。写真も何枚か表示されますし、各写真にはマウスのロールオーバーでシェアボタンも表示されます。更にフォローボタンまで表示されて何も不満はないものでした。しかし利用するにあたって留意しなくてはいけない事は、プロフィール写真や各写真をクリックした時に飛ぶページは instagram 公式ではなく InstaWidget のページであるという事です。フォローボタンや各写真のページの写真をクリック(タップ)する事で初めて instagram 公式のページへ飛びます。写真を見る分には特に問題はないのではと思います。

InstaWidgetの使い方

まずは InstaWidget の作成ページへアクセスしましょう。

基本的にはあなたの instagram ユーザー名を入力するだけで OK ですが、あなたのブログやサイトデザインに合わせて幅や色を変更してカスタマイズする事が可能です。他にもアイコンを表示するか、紹介文を表示するか、フォロワーを表示するかなど細かなカスタマイズ要素もあります。

必要な部分を入力したら画面下部のプレビューをクリックしてみましょう。どのように表示されるのかプレビューされます。

最後に「埋め込みコードを取得」ボタンを押して埋め込みコードを取得しましょう。表示されるコードをコピーしてあなたのブログのお好みの場所に貼り付ける事で、instagram のブログパーツが表示されます。

おわりに

ユーザー登録なしで、無料で利用する事ができるのでとても簡単です。あなたのブログと instagram を連携したいのであれば、この InstaWidget をお試しください。

  • Pocket

おすすめトピックス

関連記事

観光で行きたい場所を探すならinstagramが便利という話

観光で行きたい場所を探すには実は instagram が凄く便利なのです。例えば、長期休暇に長野県へ観光に行くとしましょう。長野県と言っても凄く広いです。松本城など有名所の観光スポットなら県外にも名が通っていると思います […]

画像を使わずCSS3でグラデーションを超簡単に作れるウェブアプリ「Grad2」

一昔前までは Web 制作において背景や見出しなどにグラデーションを使おうと思ったら画像を使うしかありませんでした。グラデーション用だけの画像を作って背景に設定するというやり方です。しかし、それも CSS3 の登場で不要 […]

タブレットとスマホ
電車や飛行機内での時間つぶしに映画を観るのはどう?Google Playムービーの使い方

Freepikによるデザイン 電車通勤や電車通学中、または電車や新幹線、飛行機を使った旅行でかなりまとまった時間を移動に使う方も多くいらっしゃると思います。その間の時間、何をしますか? 寝る 読書をする 音楽を聴く 携帯 […]

Tumblr
Tumblrで独自ドメインを使う方法を解説(Value Domainの場合)

Tumblrとはブログ型 SNS で Facebook や Twitter とは違い、見た目はブログそのものです。WordPress のようにテーマにも対応しデザインを自由に作り込めるなどカスタマイズに富むのが特長。更に […]

画像のフォントを調べる事ができるサイト「What the Font」

パソコンで使えるフォント(書体)はとんでもない量があります。それはもう星の数ほどあるのではないでしょうか。有料フォントからフリーフォントまで、日々新しいフォントが作られています。 ところで、このフォントは何という名前のフ […]

TumblrのサイトをSearch Consoleに登録する方法(旧ウェブマスターツール)

ウェブサイトを運営されている方なら Google Search Console(旧ウェブマスターツール)はご存知かと思います。ざっくり言うと、ウェブサイトへの過去3ヶ月間の検索キーワード、検索結果への表示回数、Googl […]

著者について

名前:Azell
作曲したり風景写真撮ったりWeb制作したりする人です。 好きな事を楽しくブログに綴れていけたらと思います。

フォローはこちら

       

       
近江牛バーガー
近江牛バーガーを彦根城キャッスルロードのLU・PANで食べたら濃厚で格別な味だった

彦根と言ったら近江牛バーガーでしょ。そんな事も言われる近江牛バ

300円カレー
カレーが300円!?長浜駅前にある激安カレー屋「SUNカリー部」えきまちテラス長浜内

滋賀県の長浜駅東口の前、一等地とも言える場所に激安なカレー屋が

divタグ
div要素のクラス名をnth-childの擬似クラスで何番目を指定しても効かない

CSS3 が登場して擬似クラス nth-child が使えるよ

PhotoshopなどAdobeソフトのシリアル番号を忘れたり紛失した場合

Photoshop など Adobe ソフトのシリアル番号はイ

メルカリのうるさすぎる不要なプッシュ通知を止める

CM でも放送されている誰でもかんたんフリマアプリとして代表的

→もっと見る