BLOG CATEGORY

Monthly Archives

長フチコンテンツ

サイバーアクセル？何者や

サイバーアクセル？<br />何者や
サイバーアクセル？
何者や

ホームページ制作？だからどうした①

ホームページ制作？<br />だからどうした①
ホームページ制作？
だからどうした①

ホームページ制作？だからどうした②

ホームページ制作？<br />だからどうした②
ホームページ制作？
だからどうした②

SEO対策？怪しい話しか聞かないぞ

SEO対策？<span>怪しい話<br />しか聞かないぞ</span>
SEO対策？怪しい話
しか聞かないぞ

集客アドバイザー？よう分からん

集客アドバイザー？<br />よう分からん
集客アドバイザー？
よう分からん

俺なりのまとめを伝える！

俺なりのまとめを伝える！
俺なりのまとめを伝える！

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

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

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

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

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


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


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


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

blog2016092501.jpg

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


１．PCからInstagramにログイン

https://www.instagram.com/


２．アプリケーションの登録

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


20160919-01.png

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


Your website: https://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

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


３．再度「Register Your Application」をクリック

20160919-01.png

４．「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: https://www.ca-advisors.co.jp/
Valid redirect URIs: https://www.ca-advisors.co.jp/
Privacy Policy URL: https://www.ca-advisors.co.jp/
Contact email: ご自分のメールアドレス
画像の数字を入力


blog2016092502.jpg



20160919-05.png

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

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


20160919-06.png

５．アクセストークンの取得

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=のコードが必要なので、メモしておきます。
https://www.ca-advisors.co.jp/#access_token=************************

６．ウェブサイトに表示させる

ファイル名[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へ