Creative works
Smart Slider3
pix524 Channel:smart slider3
Smart Slider3

WordpressのプラグインのひとつSmart Slider3
スライダーやカルーセルだけでは無い機能が豊富です。
Smart Slider3で作成するコンテンツを紹介しています。

photograph
Smart Slider3- DEMO
pix524 Channel:smart slider3
Smart Slider3- DEMO

WordpressのプラグインSmart Slider3
Smart Slider3で作成された
コンテンツやスライダーをデモとして紹介しています。

SmartSlider3で自由なレイアウトのInstagramスライダー作成!レスポンスも最高!

SmartSlider3で自由なレイアウトのInstagramスライダー作成!レスポンスも最高!

ブログ内にカルーセルなどでInstagramの画像を入れたい時がある。

Instagram用のプラグインが存在しますが、使ってみると表示が重い。

Smart Slider3にもSNSのデータを取得する事ができるスライダーがあります。
表示させる数も設定できますが、多ければ多いほど表示も遅くなる可能性があります。

Instagramの画像は正方形で投稿する事が多い為、統一している方が綺麗に表示できます。

Instagram用のプラグインも良いですが、周囲のデザインやカスタマイズが困難です。
カスタマイズしたとしてもかなり面倒な作業かもしれません。

Instagramスライダー

Smart SliderでInstagramなどのSNSのデータを読み込む為には、手間がかかります。

今回のInstagramを例に取ると、Facebookでアプリを作るところから始まります。

手順としては
1)Facebookアプリの登録
2)Instagramへの招待
3)Instagramの承認
4)アプリキーの取得
5)Smart Sliderへ反映

一番面倒なのがFacebookアプリの作成かもしれません。

ただビデオ等を見ながら進めていくと、簡単に設定できます。
実際、私もビデオを見ながら登録してみました。
下記に動画も貼り付けておきます。

元々、他の事でデベロッパーツールへのアプリ登録は経験がありますが、年数が経つと全く忘れているものです。

まずはFacebook開発者として登録する事から始めます。

Facebookアプリの作成

Facebookアプリを作成するのは、検索すればたくさん存在しますが、できれば投稿の日付が新しい方が良い。
METAになった事もあり、サイト内のデザインも若干変更されています。

Facebookのアプリ開発のページから始めます。

Facebookアプリ開発ページ

すでに開発者として登録されていれば、ログインして「登録」へとコマを進めます。

ここでは省略しますが、Facebookのアプリ登録をしないとSmart Slider3ではInstagramのデータを取得できません。

SmartSlider3で自由なレイアウトのInstagramスライダー作成!レスポンスも最高!

Facebookにアカウントがあるか?という事から始まります。
ログインしてアプリ登録から開始します。

SmartSlider3で自由なレイアウトのInstagramスライダー作成!レスポンスも最高!

詳細は省きますが、アプリの名前を付けて使用するドメイン・プライバシポリシーのURLを記入します。
設定前にご自身のサイトを開いておくと良いでしょう。
ユーザーデーターの削除の項目は、空白にしても問題ありませんでした。

この作業中にSmart Sliderの設定画面・Instagramの設定等、
Facebook内だけでなく各項目に行ったり来たりします。
下記画像内の「有効なOAutherリダイレクトURL」などはSmart Sliderの設定画面からコピーして貼り付けます。

※詳細は下記チュートリアル動画を見れば全て紹介されています。

SmartSlider3で自由なレイアウトのInstagramスライダー作成!レスポンスも最高!

全ての記入が完了するとInstagramアプリIDとInstagram APP Seacretが取得できます。

この間、Instagramとアプリを紐付ける承認作業があります。
ご自身のInstagramアカウントにPCでログインしておくと作業が早いです。

Smart Slider3の設定

Smart Slider3の設定は至って簡単です。

通常のスライダーの作成とは異なりDynamic Slidesを使用します。
Dynamic Slides内にはFacebookやInstagram・Youtube等の動的スライドのメニューがあります。

Instagramスライダーの作成

手順は通常のスライダーと同じですが、異なるのは「Dynamic Slides」を選択する事。
Dynamic Slidesを選択すると様々なSNSの動的スライドの項目が並びます。

SmartSlider3で自由なレイアウトのInstagramスライダー作成!レスポンスも最高!

実際に編集する前に、スライダーに何枚の画像を表示させるかを設定します。
今回は10枚にしてみました。
新しく投稿されれば、古い方から表示されなくなるようです。

フィルターの項目にビデオの項目があります。
動画も表示させるか?という選択ですが、今回は非表示に設定しています。

SmartSlider3で自由なレイアウトのInstagramスライダー作成!レスポンスも最高!

表示させるサイズ等は、他のスライダーの作り方と同じです。
もちろん後から変更できますので、最初は適当に設定しても良いでしょう。

通常通り画像を挿入しますが、その時に画像を挿入するボタンの上に「DATA」というボタンがあります。
このDATAボタンでInstagramの画像を呼び込みます。
画像を入れる時は「image」を選択し挿入します。

Captionやusernameも同様に挿入できます。
テキストを入れる時も同様に「DATA」のボタンが表示されますので、挿入するデータを選択します。

SmartSlider3で自由なレイアウトのInstagramスライダー作成!レスポンスも最高!

好みによって画像だけを表示したり、デザインを加えてInstagramaスライダーを完成させます。

SmartSlider3で自由なレイアウトのInstagramスライダー作成!レスポンスも最高!

Instagramスライダーチュートリアル

Smart Slider3の各使用方法はビデオで確認するのが手っ取り早い。

Youtubeの字幕設定で日本語にすれば理解できます。
手順通りに進めればスムーズに設定できます。

InstagramスライダーDEMO

実際に作成してみたDEMOを表示しておきます。
ここで取得しているデータは4つになります。

1)画像
2)アカウント名
3)画像のURL
4)キャプション

作成して感じたのは、画像によって極端に異なるデータは入れない方が良いかもしれません。
特にキャプション等はハッシュタグで埋もれる可能性もあります。

画像のURLは、そのままだと表示されるだけですが、リンクをつける事でInstagramへと誘導できます。

Instagram Photograph

pix524

https://www.instagram.com/p/CmBgG_SPRyx/

東海道五十三次十六番由比宿:広重が見た風景に東名道は無い… #landscape #風景写真 #igtrip #igtravel #landscape_japan #japantravel #trip #mt_fuji #fujisan #travel #iglandscape #japan #nightview #night

Instagram Photograph

pix524

https://www.instagram.com/p/Cl8i7NsvhKi/

写真整理中。やっぱ海は良いなぁ〜九十九里浜にて。#landscape #ocean #sunrise #seaside #beach #風景写真 #千葉県の風景 #igtrip #landscape_japan #japantravel #igersjp #trip #igtravel #oceanview #九十九里浜 #igjapan

Instagram Photograph

pix524

https://www.instagram.com/p/CldBymuvK6p/

銀杏の水鏡手水
#秋 #紅葉 #紅葉スポット #秋景色 #新居浜 #新居浜市 #瑞応寺 #愛媛県の風景 #四国の秋 #黄葉 #銀杏 #落ち葉 #手水 #リフレクション #landscape #autumn #color #yello #igtravel #instagram #igtrip #landscape_japan #japantravel #japanstyle #wabisabi #igglobal #reflection #reflections #temple #寺院

Instagram Photograph

pix524

https://www.instagram.com/p/ClYNbVUPtgX/

美しい透明度の高い池で優雅に泳ぐ鯉。白龍湖でのひとコマです。白龍湖は高知県津野市の国道439号線沿いに位置する隠れた観光スポットと言われ高知県のモネの池とも例えられています。睡蓮や水草などが無いが、なるほど素敵な池の風景が楽しめます。こんな場所に?という感じですが、行ってみると非現実的とも言える美しい景色が広がります。さほど広くはありませんが、暫くの時間まったりとできる良い空間です。

#naturephotography #1x_japan #special_spot_  #art_of_japan_ #photo_jpn #instagramjapan #iloves_nippon #japan_insta #japan_daytime_view #landscape #beautiful_photo_Jpn #japan_great_view #japan_travel #japan_trip #travel #trip #景勝地 #絶景地 #風景写真 #インスタ映え #観光地 #高知県 #国道439号線 #写真を楽しむブログ #ファインダー越しの私の世界

Instagram Photograph

pix524

https://www.instagram.com/p/ClQuCYEvWPA/

#山形市 #山寺 の銀杏。以前訪れた時のもの。 #instagramjapan #iloves_nippon #japan_insta #japan_daytime_view #landscape #igtravel #igtrip #ig_landscape #beautiful_photo_Jpn #立石寺 #山形県 #黄葉 #銀杏 #写真好きな人と繋がりたい #写真を撮るのが好き #秋の風景 #秋の彩り #秋色

Instagram Photograph

pix524

https://www.instagram.com/p/ClN0wV9Pr8_/

あとで気付いた事ですが…高知県への撮影旅で休憩した駐車場で空撮したら #笑うセールスマン ?が居た!
#高知県 #須崎市 #drone #空撮 #四国 #写真を楽しむブログ #撮影旅 #絶景を求めて #写真を撮るのが好き #笑うせぇるすまん

Instagram Photograph

pix524

https://www.instagram.com/p/ClI0ynQPtGM/

#五色沼 は絶景の水辺散策が楽しめます。
場所の関係上、東北地方にはあまり足を運べませんが、数年に一度の頻度で訪れる事があります。
時期的に少しズレていたのか?目を見張る紅葉は見られませんでしたが、五色沼の各池はとても美しく陽の当たり具合で水面の色にも変化があります。
人生の中で一度は訪れて欲しい場所のひとつです。
五色沼のエリアには大小様々の池や沼が点在しており、紅葉も楽しめる秋に訪れるのがお勧めです。

#instagramjapan #iloves_nippon #landscape #beautiful_photo_Jpn #japan_great_view #color #blue #autumn #igtravel #igtrip #japan_landscape #japan_photo #秋 #紅葉スポット #秋景色 #写真大好き #写真を見るのが好き #写真を撮るのが好き #絶景スポット #撮影スポット

Instagram Photograph

pix524

https://www.instagram.com/p/ClGbybbvmtr/

#五色沼 にある小川の緑に萌えた。
#instagramjapan #iloves_nippon #landscape #beautiful_photo_Jpn #color #green #instagood #japan_insta #japan_daytime_view #beautiful_photo_Jpn #japan_great_view #秋 #紅葉スポット #秋景色 #autumn #igtravel #igtrip #写真大好き #写真を見るのが好き #写真を撮るのが好き #写真で伝えたい私の世界

Instagram Photograph

pix524

https://www.instagram.com/p/ClFNBlIvpT1/

華やいで散りまた息吹く…ぞ
#instagramjapan #iloves_nippon #japan_insta #japan_daytime_view #landscape #beautiful_photo_jpn #igtravel #igtrip #japantravel #japan_landscape #秋 #秋景色 #紅葉 #彩り #落ち葉 #写真が奏でる私の世界 #autumn #autumnleaves #color #fullcolor #photo

Instagram Photograph

pix524

https://www.instagram.com/p/ClDr5EuPLjh/

美しい紅葉、福島県にて。
#instagramjapan #iloves_nippon #japan_insta #japan_daytime_view #landscape #beautiful_photo_jpn #写真を撮るのが好き #紅葉 #秋色 #秋景色 #igtravel #igtrip #love_landscape #japan_landscape #福島県

previous arrow
next arrow

背景には画像を配置していますが、背景は他ブロック同様に好きなように変更できます。

Instagramスライダーまとめ

FacebookとInstagramの連動やSmart Slider3との紐付けの作業があり、面倒と感じるかもしれません。
実際、めんどくさい作業ではありますが、手順通り進めれば問題ありません。

一番面倒な作業はFacebook内になります。
Facebookアプリは他のプラグインなどでも同様の作業がある場合があります。

投稿後にこのページの表示スピードを計測してみて、どの程度軽量なのかも検証してみたいと思います。

Instagramスライダーの表示箇所によってサイズやデザインを変えてみるのが良いでしょう。
Smart Slider3のスライダーやカルーセルは軽量なので、他のスライダーと同様かと思われますが、今回はInstagramuとの連動の為、外部のデータを取得します。

若干の遅延があるかもしれませんが、検証してみて評価したいと思います。

Smart Slider3SNS,写真・画像

Posted by pix-524