Tips

【ブログ】インスタのタイムラインを埋め込む

2022年3月28日

突然ですが、インスタをブログに埋め込みたい!と思ったことはありませんか?

インスタ、自分の好きなことを気軽に発信できて楽しいですよね!

僕も、ごはんや旅行の記録などを定期的にアップしています。

それらの投稿と自分のブログをリンクできたらと、ずっと思っていました。

いとう
そこで、今回はブログにインスタを埋め込む方法を紹介します

ブログ作りの参考になれば嬉しいです◎

 

 

完成イメージ

今回は個別の投稿ではなく、タイムラインを埋め込む方法をご紹介します。

いとう
タイムラインとは、投稿の一覧のことです!

ご紹介するのは、記事欄でもサイドバーでも、好きな場所に埋め込める方法です🔥

 

 

STEP1: SnapWidgetでコードを生成する

いとう
サイトにコードを貼り付けることで、

タイムラインを埋め込んでいきます。

 

コードは、SnapWidgetというサイトで生成できます。

Instagram Widgets by SnapWidget | Free widgets for your website

いとう
有料版もありますが、無料版で充分だと感じてます!

 

はじめに、SnapWidgetのサイトを開きます。

新規アカウントを作成するか、FaceBookのアカウントでログインしてください。

 

ログインすると、埋め込みフォーマットを選択する画面に遷移します。

完成イメージのように埋め込みたい場合は、[Instagram Grid]を選んでください。

 

詳細設定画面にジャンプしまう。まずは[Username]をクリックしてください。

 

インスタグラムアカウントを読み込むためのポップアップが表示されます。

[SIGN IN WITH INSTAGRAM]をクリックして、アカウントを読み込んでください。

 

連携したアカウントのユーザーネームが[Username]に表示されていたら、

正常に読み込みができている証拠です。

 

必要に応じて、Username以下の項目を変更していきます。

各項目の説明は、下記の通りです👇

項目 説明
1 Description 管理用の説明文で、サイトには表示されません。
2 Thumbnail Size 各投稿のサイズを変更できます。
3 Layout 縦と横に並べる投稿の数を変更できます。
4 Photo Border 枠線の表示/非表示を選べます。
5 Background Color 背景色を変更できます。
6 Photo Padding 投稿と投稿の隙間を調整できます。
7 Hover Effect 投稿にカーソルを合わせた際のエフェクトを選べます。
8 Sharing Buttons シェアボタンの表示/非表示を選べます。
9 Responsive 横幅を調整できます。Yesだと横幅100%です!

変更が完了したら、[GET WIDGET]ボタンを押してください。

 

すると、コードが生成されます。

[COPY TO CLIPBOARD]をクリックして、コードをコピーしておいてください!

 

 

STEP2: コードを任意の場所に貼り付ける

あとはカンタン!

STEP1でコピーしたコードを、埋め込みたい任意の位置に貼り付けてください。

いとう
投稿の記事欄にも、

サイドバーやヘッダー等のウィジェットにも貼り付けできます!

 

 

おわりに

以上が、インスタのタイムラインをブログに埋め込む方法でした。

いかがでしたでしょうか?

いとう
あなたが思い描くブログ作りの手助けになれば幸いです。

読んでくれてありがとうございました!

-Tips