Pongstagr.am

JavaScript

自分のインスタグラムの画像を表示できるjQueryプラグイン「Pongstagr.am」

Pongstagr.amは自分のインスタグラムの画像をWebサイトに表示させることができるjQueryプラグインです。インスタグラムのユーザーIDとアクセストークンが必要になります。スタイルにはBootstrapが使われています。

Pongstagr.am

Pongstagr.am

こんな感じでIDやアクセストークンを指定します。

$('#selector').pongstgrm({
    accessId:     'YOUR-ACCESS-ID',
    accessToken:  'YOUR-ACCESS-TOKEN'
});

そして、例えば最新の画像を表示させたい場合は、showという項目にrecentを指定してあげます。

$('#selector').pongstgrm({ show: 'recent' });

プロフィールを表示したい時はprofileと記述すればOKです。サイズや画像パス、背景カラーも同時に設定することが可能です。

他にもlikedやfeed、もしくは自分の好きなタグを指定できたりもします。出力できる画像条件の選択肢がいろいろあるのが便利ですね。

自分のサイトにインスタグラムの写真を載せたいという方は是非チェックしてみてください。

デベロッパーツールの表示方法MacのSafariでデベロッパーツール(Webインスペクタなど)を表示する方法前のページ

レスポンシブで横幅フルサイズのスライダーを実装できる「Hero slider」次のページHero slider

関連記事

  1. jQuery cForm

    JavaScript

    フォームのスタイルをカスタマイズできる「jQuery cForm」

    jQuery cFormはフォームのスタイルを簡単にカスタマイズするこ…

  2. no-image

    JavaScript

    jQueryとCSS3を使った縦型アコーディオン「Accordion-menu」

    Accordion-menuは、jQueryとCSS3を使ったシンプル…

  3. no-image

    JavaScript

    さまざまなSVGパターンによるCSSプログレスバー「Bars」

    Barsはさまざまな種類のSVGパターンによるCSSプログレスバーを実…

  4. Glide.js

    JavaScript

    軽量・フレキシブル・高速なスライダー&カルーセル実装「Glide.js」

    Glide.jsは軽量・フレキシブル・高速なJavaScript ES…

  5. JavaScript

    フルスクリーンで画像などの要素を表示させることができるJSライブラリ「screenfull.js」

    screenfull.jsは画像などの要素をフルスクリーンで表示させる…

  6. jQuery Slideshow

    JavaScript

    シンプル・軽量・レスポンシブなスライダー実装「jQuery Slideshow」

    jQuery Slideshowはシンプルで軽量、そしてレスポンシブに…

最近の記事

  1. ペットボトルホルスター
  2. SRS-XB43
  3. Nu:kin

アーカイブ

PAGE TOP