みんな大好きInstagram(インスタ)
そのインスタの画像データをホームページに読み込ませて、なおかつ有名スライダーのslick.jsを利用して、表示する数やスワイプで操作できるようにしたいと思います。
この辺りはいろんなサイトに情報が掲載されているのでそちらを参照ください。こちら参考にされてください。
Instagram APIを使ってインスタグラムの画像をウェブサイト上に表示する
次にインスタグラムのuser idを取得します。これはいわゆるユーザーネームとは違います。
下のurlをコピーして、ASCCESS-TOKENの部分を先ほど取得したアクセストークンに置き換えてください。
[html]
https://api.instagram.com/v1/users/self/?access_token=ACCESS-TOKEN
[/html]
するとユーザーID(11桁?の数字)を取得できますので、メモにとっておいてください。
こちらからプラグインをダウンロードします。
その後、このように書くことでインスタの画像をホームページ上に表示させることができます。
[javascript]
<script type="text/javascript" src="path/to/instafeed.min.js"></script>
<script type="text/javascript">
var feed = new Instafeed({
clientId: ‘CLIENT ID’,//クライアントID
get: ‘user’,
userId: ‘USER ID’,//ユーザーIDを入れる
accessToken:’ACCESS TOKEN’,//アクセストークン
links: true ,
limit: 8,// 取得件数
resolution:’standard_resolution’, // thumbnail (default) – 150×150 | low_resolution – 306×306 | standard_resolution – 612×612
template: ”, // 画像URL:{{image}} リンク:{{link}} キャプションテキスト{{caption}} いいね数:{{likes}} コメント数:{{comments}}
success: function(){
//取得完了時のコールバック
}
});
feed.run();
</script>
[/javascript]
ただ、このままではただ表示されるだけですので、スライダーを導入します。
slick.jsは有名なjqueryプラグインです。
slickの導入に関してはこちらをご覧ください。
jQueryカルーセルスライダー『slick.js』設置方法と設定オプション一覧
そこでオプションを決めてください。
さて、いよいよ本番です。instafeed.jsで読み込んだデータをslick.jsでスライダーに変えます。
[javascript]
<script type="text/javascript" src="path/to/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="path/to/slick.min.js"></script>
<script type="text/javascript" src="path/to/instafeed.min.js"></script>
<script type="text/javascript">
var feed = new Instafeed({
clientId: ‘CLIENT ID’,//クライアントID
get: ‘user’,
userId: ‘USER ID’,//ユーザーIDを入れる
accessToken:’ACCESS TOKEN’,//アクセストークン
links: true ,
limit: 8,// 取得件数
resolution:’standard_resolution’, // thumbnail (default) – 150×150 | low_resolution – 306×306 | standard_resolution – 612×612
template: ”, // 画像URL:{{image}} リンク:{{link}} キャプションテキスト{{caption}} いいね数:{{likes}} コメント数:{{comments}}
success: function(){
//取得完了時のコールバック
}
after: function () {
$(”).slick({
//ここにオプションを入れる
});
}
});
feed.run();
</script>
[/javascript]
これでスライダーができます。
ぜひ一度お試しください。
懸念材料としては、javascriptで書いているためアクセストークンが丸見えになっちゃうことです。
できればphpでajaxで取得した方が安全でしょうね。
コーポレートサイトは企業の看板となるウェブサイトです。顧客とのファーストコンタクトになる場合が多いので、ブランディング視点で企業を魅力的に伝えるホームページを構築いたします。
ブランドサイトや集客サイトはお問い合わせなど、コンバージョンの獲得を強く意識したホームページになります。クライアントの事業内容によって、コーポレートサイトをそのまま集客の核とする場合と、別途ブランドサイトや集客サイトを作ってブランディングを行う場合があります。
採用サイトは、コーポレートサイトと同様、求職者の心に響くためのブランディング視点が必要になります。求職者の琴線に触れる非金銭的ポイントと貴社の強みや特徴をきちんと整理し、伝わるサイトを制作いたします。
検索ユーザーだけでなく、潜在ユーザーにも適切にアプローチできるFacebookやInstagramなどのSNS広告を運用します。
エリアや年齢性別など、細かくターゲットをセグメントし、適切なユーザーへアプローチします。
近年重要視されているMEO(Map Engine Optimization)
Googleマップでの検索結果において上位表示させる対策です。アルラボではGoogleマイビジネスの最適化のほか、サイテーション施策など、上位表示に必要なノウハウをご提供可能。
私たちは、お客様のビジネスを成長させ、
より前に進ませるためにともに考え、創るWeb制作会社です。
ホームページの新規・リニューアル制作から
ブランディング・広告運用・SEO対策などWeb集客導線を作ります。
ホームページ制作・広告運用・SEOなど
ご相談はお気軽にご相談ください。
お電話でのご相談も随時受け付けております。
お気軽にご連絡ください。
0952-20-1501(佐賀)
092-717-3446(福岡)
営業時間:9:00~17:00(休業日:土日祝)