SNS

Instagramのブログパーツをサイトに設置する方法。

投稿日:2016-11-04 更新日:

 

るしる(@aromusica)です。

 

今回は、ブログやホームページのサイドバー(もしくはフッター)にInstaglamを表示する方法について。

 

投稿写真1枚をサイトに埋め込むコードは、Instagram公式でもできるのですが、

 

「アルバムのように表示させたい!」

 

という時は、他のサービスを使わなくてはなりません。

「ブログパーツ」というものですが、コードも生成してくれるので、まるっとコピーするだけの簡単作業。

 

私はホームページに設置するために作ってみました。

 

スポンサーリンク

Instagramの写真だけ表示させたい

有名どころだとコチラのサイト。

WEBSTA Widgets for Instagram
メールアドレスの登録が必要ですが、無料でInstagramと連携することで作れます。

 

WEBSTA Widgetの使い方

メニューの「ウィジェットを作る」をクリックし、設定していきます。

 

「ウィジェット作成」ボタンを押すと、コードが表示されるので、

WordPressの場合、「ウィジェット」にテキストを挿入し、「内容」にコードを貼り付けるだけ。タイトルはお好みでどうぞ。

 

instaglam2

 

最後に「保存」ボタンを押します。

 

完成品はコチラ。

instaglam3

 

写真にカーソルを当てると、シェアボタンがを表示することも可能です。

 

写真だけでなく、フォローボタンも、ハッシュタグでも載せたい。

 

WEBSTA Widgetだと、写真しか表示できないので、フォローボタンは別途設置になります。

これをまとめて表示させたい。そういう時には、InstaWidgetを使います。

Get Free Instagram Widget for Website | InstaWidget

 

ユーザー登録も、ログインも不要なので、気軽に使えますな。

 

InstaWidgetの使い方

 

instaglam4

 

枠の色や、写真効果も設定できたり、プレビューを見ながら作ります。

完成したら、コードをコピーして、WEBSTAと同じくウィジェットに貼り付けるだけです。

 

表示のタイプ

 

ホームページのサイドバーが狭いので(汗)

レイアウトを「1×3」にしてみました。

 

instaglam5

フィルムのネガっぽくてかわいい。

サイトのレイアウトを3カラムにしている方は、この使い方もあり。

 

ブログの記事、固定ページにコピーしたコードをまるっと貼りつけてみました。

ウィジット幅を「700」、レイアウトは「5×2」

 

instaglam6

記事にそのまま貼りつけてもいいですし、記事下などに常備固定で設置したい時に使えそう。

 

まとめ

ブログはシンプルに載せるぐらいで良いとおもうのですが、写真や絵を投稿している方は、

サイトでポートレートとして表示もできるのでオススメしたい。

 

音楽もジャケで並べられたらいいのに。

Soundcloudとかもこういう表示できたらいいのになぁー。

 

ちなみに、記事にInstagramの投稿写真1枚を表示させる方法はこの記事をどうぞ。
 
 
ブログの記事にInstagramをサイズを変更して表示させる方法。

 

 

この記事が気に入ったら
いいね ! しよう

Twitter で

    関連記事    


-SNS
-

Copyright© るしるし , 2017 All Rights Reserved Powered by AFFINGER4.