SNS

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

 

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

 

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

 

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

 

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

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

 

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

 

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

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

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

 

WEBSTA Widgetの使い方

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

 

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

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

 

instagram_widget1

 

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

 

完成品はコチラ。

instagram_widget2

 

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

 

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

 

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

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

Get Free Instagram Widget for Website | InstaWidget

 

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

 

InstaWidgetの使い方

 

instagram_widget3

 

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

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

 

表示のタイプ

 

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

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

 

instagram_widget4

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

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

 

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

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

 

instagram_widget6

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

 

まとめ

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

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

 

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

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

 

ちなみに、記事にInstagramの投稿写真1枚を表示させる方法はこの記事をどうぞ。

ブログにInstagramをサイズ変更して表示させる方法。 - スキニノート
ブログにInstagramをサイズ変更して表示させる方法。 - スキニノート

ブログでInstagramを表示させる方法をまとめました。アメブロやSNSはInstagramを投稿する際、同時にシェアできるのですが、パソコンでInstagramを自分のブログやホームページに載せて

続きを見る

 

 

-SNS
-

Copyright© スキニノート , 2020 All Rights Reserved Powered by AFFINGER5.