BLOG CATEGORY

Monthly Archives

長フチコンテンツ

ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » webコラム» Instagramをホームページやブログに埋め込む方法(本格的バージョン)

このエントリーをはてなブックマークに追加

Instagramをホームページやブログに埋め込む方法(本格的バージョン)

   投稿日: 2016/09/25    投稿者:webコラム

前回は簡単な方法である
「SnapWidget(スナップウィジェット)」を
使った埋め込み方法をご紹介しました。


今回は、Instagram APIを使って
自動的に画像データを取得する方法をご紹介します。


前回の記事
Instagramをホームページやブログに埋め込む方法(簡易バージョン)


では、今回は少々難しいので気合いを入れていってみましょう!

blog2016092501.jpg

APIを使用するにはInstagramのアカウントが必要になります。
スマートフォンからアプリをダウンロードしてアカウント登録を行ってください。


1.PCからInstagramにログイン

https://www.instagram.com/


2.アプリケーションの登録

下記URLにアクセスして「Register Your Application」をクリック
https://instagram.com/developer/


20160919-01.png

 今回は以下のように入力しました。


Your website: http://www.ca-advisors.co.jp/
Phone number: ご自分の電話番号
What do you want to build with the API?: Use the embedded to the Web site(←APIを使いたい理由を定義入力)


  I accept the APIにチェックを入れて「Sige up」をクリック


20160919-02.png

 これで基本情報の登録が完了しました。


3.再度「Register Your Application」をクリック

20160919-01.png

4.「Register a New Client」をクリックして各項目を入力

20160919-03.png
20160919-04.png
今回はテストですので、項目は以下のようにしました。

Application Name: app test
Description: Use the embedded to the Web site
Company Name: Cyber Accel Advisors
Website URL: http://www.ca-advisors.co.jp/
Valid redirect URIs: http://www.ca-advisors.co.jp/
Privacy Policy URL: http://www.ca-advisors.co.jp/
Contact email: ご自分のメールアドレス
画像の数字を入力


blog2016092502.jpg



20160919-05.png

 「Security」タブの「Disable implicit OAuth:」のチェックを外す
「Register」をクリック

これでアプリケーションの登録が完了しました。
ここで表示される情報は次の工程で使います。


20160919-06.png

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

https://instagram.com/oauth/authorize/?client_id=【CLIENT-ID】&redirect_uri=【REDIRECT-URI】&response_type=token

【CLIENT-ID】は、取得したクライアントIDを入力
【REDIRECT-URI】は、先ほど登録したリダイレクトURLを入力
URLにアクセスして、「Authorize」をクリック
20160919-07.png
その後に表示されるURLの#access_token=のコードが必要なので、メモしておきます。
http://www.ca-advisors.co.jp/#access_token=************************

6.ウェブサイトに表示させる

ファイル名[instagram.js]
以下の内容で作成する

$(function() {
  $(".instagram").text("loading...");
    $.ajax({
      url: "https://api.instagram.com/v1/users/【アクセストークンの前半数字部分】/media/recent",
      data: { access_token: "【アクセストークン】" },
      dataType: "jsonp",
      error: function(jqXHR, textStatus, errorThrown) {
        $(".instagram").text(textStatus);
      },
      success: function(data, textStatus, jqXHR) {
        $(".instagram").text("");
        for (var i = 0, length = 10; i < length; i++) {
          var d = data.data[i];
          $(".instagram").append(
          $("

ファイル名[instagram.css]
以下の内容で作成する(適宜変更してください)

.instagram {
    overflow: hidden;
    list-style: none;
    text-align: center;
    margin-left: 2px;
}
.instagram .image {
    float: left;
    width: 19%;
    margin: 0 0 0.5% 1%;
}
.instagram .image a {
    float: left;
    padding: 2%;
    border: 1px solid #ddd;
    -webkit-border-radius: 2%;
    -moz-border-radius: 2%;
    border-radius: 2%;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.075);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.075);
    box-shadow: 0 1px 1px rgba(0,0,0,0.075);
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.instagram .image a:hover {
    border-color: #0069d6;
    -webkit-box-shadow: 0 0.5% 2% rgba(0,105,214,0.25);
    -moz-box-shadow: 0 0.5% 2% rgba(0,105,214,0.25);
    box-shadow: 0 0.5% 2% rgba(0,105,214,0.25);
}
.instagram .image a img {
    width: 100%;
    opacity: 1;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.instagram .image a img:hover {
    width: 99%;
    opacity: 0.7;
}

[htmlソース]

<!-- CSSファイルの読み込み(<head>タグ内) -->
<link rel="stylesheet" href="css/instagram.css" type="text/css">


<!-- Instagram Gallery(<body>タグ内) -->
<div>
  <ul class="instagram"></ul>
  <!-- javascriptファイルの読み込み -->
  <script src="js/instagram.js"></script>
</div>


blog2016092503.jpg

カテゴリ:

TOPへ