» 超簡単!インスタ投稿した写真をホームページに連動表示させる方法!|ホームページ制作・運営からWEBデザイン、ウェブサイト企画作成を行っている名古屋市のホームページ制作会社「ABABAI」

超簡単!インスタ投稿した写真をホームページに連動表示させる方法!

スタッフブログ

  • 2017.10.30

    超簡単!インスタ投稿した写真をホームページに連動表示させる方法!

    顔アイコン

    img

     

     

    お久しぶりです。

    デザイナーのもっくんです(/・ω・)/

     

     

    本日はみなさんがお持ちのインスタグラムを、

    自分のホームページに連動して載せる方法をサクッと紹介したいと思います。

    自動でインスタとホームページを連動表示させてくれるサンドボックスは最大20件まで最新の写真が出るようになるのでお勧めです^^

     

     

     

    1.まずはお持ちのインスタにログインする

     

     

    01

     

     

     

    日ごろお客様のアカウントをお借りして、設置を行うことが多いのですが、

    僕自身インスタアカウントは持っていなかったので、

    早速登録を行ってログインを行いました。

     

     

    初登録なので、当然写真は一切投稿されておりません。

    ですので早速適当な写真を9枚ほど登録いたしました。

    ※既に何件か写真が投稿されている方は割愛

     

     

     

    02

     

     

     

     

     

     

    2.インスタグラムAPIにアクセスしクライアント登録する

     

     

    インスタグラムの下部にある、APIへアクセス。

     

     

    03

     

     

    ②「Manage Clients」をクリック

     

     

    04

     

     

     

    始めに、クライアント登録を行うため全項目記入ください。

     

     

     

    05

     

     

     

    ③ホームページURL

    ④連絡先

    ⑤使用理由(例えばbusinessとか)

    ⑥チェックを入れる

    ⑦クリック

     

     

     

    06

     

     

    ⑧クリック

     

     

    07

     

     

    ⑨クリック

     

     

    08

     

     

    ⑩任意

    ⑪任意

    ⑫ホームページURL

    ⑬ホームページURL ※ここに登録したURLを控えておいてください。

    ⑭タブを「Security」に切り替える

     

     

    09

     

     

    ⑮チェックを外す

    ⑯画像文字を入力

    ⑰クリック

     

     

    10

     

     

    このCLIENT IDを控えておいてください

     

     

     

     

     

     

    3.アクセストークンの取得

     

     

    ここからは、2で控えた「CLIENT ID」と「URI」を使って、

    使用の許可のための「アクセストークン」を取得します。

     

    https://api.instagram.com/oauth/authorize/?client_id={CLIENT_ID}&redirect_uri={REDIRECT_URI}&response_type=token&scope=public_content

    赤字の部分を、控えに置き換えてアクセスします。

     

     

    11

     

     

    ⑲クリック

    先ほどURLに設定した、REDIRECT_URIに飛び、

    URL内にアクセストークンが表示されます。

     

    12

     

    こちらを控えてください。

     

     

     

     

     

    4.実際にHPに設置してみる

     

     

    赤字の部分に、先ほど控えたアクセストークンを入れ、

    jsを読み込み

    $(function(){
    var photoViewNum = 20
    $(“.instagram”).html(‘<p class=”txt01″>ロード中…</p>’);
    $.ajax({
    url: “https://api.instagram.com/v1/users/self/media/recent/”,
    data: {
    access_token: “6276636180.4ccb002.596dd829e58e4679b805bc2dc5533aad“,
    count: photoViewNum
    },
    cache: false,
    dataType: “jsonp”,
    error: function() {
    $(“.instagram”).html(‘<p class=”txt01″>情報の取得に失敗しました。リロードするか時間を開けてアクセスして下さい。</p>’);
    },
    success: function(data) {
    $(“.txt01”).remove();
    $(“.instagram”).append(‘<ul class=”img”>’)
    for (var i = 0, length = photoViewNum; i < length; i++) {
    $(“.instagram .img”).append($(“<li>”).append($(“<a>”).attr(“href”, data.data[i].link).attr(“target”, “_blank”).append($(“<img>”).attr(“src”, data.data[i].images.standard_resolution.url))));
    }
    }
    });
    });

     

     

    あとは、下記htmlコードを呼び出したい位置に記述すれば

    <ul class=”instagram”>
    </ul>

    13

     

    確認してみると

    最新のインスタ写真が吐き出されていますね♪

     

     

     

    あとはCSSでちょちょいと調整すれば・・・

    14

     

     

     

    5.終わりに

     

    小難しい事は置いておいて、簡単にさくっと手順を流しましたが、

    意外とお手軽にインスタグラムの写真の吐き出しを設置が可能です^^

    サンドボックスを使えばより更新性も高まり、訪れた人がアクセスする機会を増やすことも可能ですし、見栄え的にもかなり融通が利くので、調整次第でオシャレに設置することも可能なのです^^

     

    興味のある方は自分のホームページや、ブログなどに設置してみて、

    より多くの方に見てもらえるように工夫をしてみても良いかもしれません(/・ω・)/

     

    フェイスブックシェアボタン

名古屋で1番真面目なウェブ会社!! ABABAI お電話でのお問い合わせはこちら

メールでのお問い合わせ リンクボタン

カレンダー

2018年4月
« 3月    
 1
2345678
9101112131415
16171819202122
23242526272829
30  

MENU

求人情報本社・広島オフィス

お問い合わせ

ページの先頭へ

お問い合わせ

閉じる

アババイめちゃ凄いこと

建築会社に選ばれる5.5の理由

制作実績

お客様の声

スタッフ紹介

代表挨拶

新着情報

会社概要&アクセス