ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » webコラム» Instagramをホームページやブログに埋め込む方法(本格的バージョン)
投稿日: 2016/09/25 投稿者:webコラム
前回は簡単な方法である
「SnapWidget(スナップウィジェット)」を
使った埋め込み方法をご紹介しました。
今回は、Instagram APIを使って
自動的に画像データを取得する方法をご紹介します。
前回の記事
Instagramをホームページやブログに埋め込む方法(簡易バージョン)
では、今回は少々難しいので気合いを入れていってみましょう!
APIを使用するにはInstagramのアカウントが必要になります。
スマートフォンからアプリをダウンロードしてアカウント登録を行ってください。
下記URLにアクセスして「Register Your Application」をクリック
https://instagram.com/developer/
今回は以下のように入力しました。
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」をクリック
これで基本情報の登録が完了しました。
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: ご自分のメールアドレス
画像の数字を入力
「Security」タブの「Disable implicit OAuth:」のチェックを外す
「Register」をクリック
これでアプリケーションの登録が完了しました。
ここで表示される情報は次の工程で使います。
https://instagram.com/oauth/authorize/?client_id=【CLIENT-ID】&redirect_uri=【REDIRECT-URI】&response_type=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>