オカンTECH

全国のオカンのITリテラシーを底上げだ!

f:id:beaber:20211122011912p:plain
 2021ブラックフライデー会場はこちら

【2021年現役】はてなブログにインスタの投稿を埋め込む方法

 


f:id:beaber:20210628164354p:plain













はてなブログにインスタの投稿を埋め込むのはどうやるのかしら?

f:id:beaber:20210628164402p:plain







HTMLコードを取得して貼り付けるだけで簡単に埋め込みができるよ

 

このページでは「はてなブログにインスタの投稿を埋め込む方法」を中心に紹介。

記事中、サイドメニューそれぞれへの埋め込み方を説明していきます。

 

 

教えるのはこんな人
 

f:id:beaber:20211115091234p:plain

おかぺー(@DemoOkan)

 

この記事をおすすめしたい人
  • ブログからインスタに集客したい
  • インスタのお気に入りの投稿をネット上に公開したい
  • インスタ投稿の埋め込み方がわからない

 

f:id:beaber:20211117154746p:plain

 

はじめに

このブログのコンセプトはオカンに伝わるITブログです。

 

そのため、専門用語など難しい言葉は最大限排除して紹介していきます。それでも分からない表現があれば、問合せフォームかTwitterよりご質問ください。

 

f:id:beaber:20210628164407p:plain







Twitter、コメント欄で感想などいただけると泣いて喜びます!

完成イメージ(スマホ/パソコン)

 

「はてなブログにインスタ投稿を埋め込む」

 

今回は以下のような投稿を表示させていきます。

 

f:id:beaber:20211114070420j:plain

インスタ投稿埋め込みイメージ(パソコン表示)

 

f:id:beaber:20211114060254j:plain

インスタ投稿埋め込みイメージ(スマホ表示)

 

インスタ投稿の埋め込み手順

※この先の手順はパソコンで操作してください。

 

STEP
インスタにログイン

Instagramにアクセスする。
https://www.instagram.com/

STEP
自分のプロフィールページを表示
右上のアイコン>プロフィール を押す。

f:id:beaber:20211114064149p:plain



STEP
投稿を選択
埋め込みたい投稿を選択する。

f:id:beaber:20211114064451p:plain



STEP
埋め込みメニューの表示①
右上の「・・・」を押す。

f:id:beaber:20211114064606p:plain



STEP
埋め込みメニューの表示②
埋め込みを押す。

f:id:beaber:20211114064712p:plain



STEP
HTMLコードのコピー
埋め込みコードをコピーを押す。

f:id:beaber:20211114064910p:plain



STEP
HTML編集ページを表示
はてなブログの記事編集を開き「HTML編集」を押す。

f:id:beaber:20211114065050p:plain



STEP
HTMLコードの張り付け
先ほどコピーしたHTMLコードを張り付ける。

f:id:beaber:20211114065257p:plain



STEP
表示確認
プレビューを押し、投稿が表示されていることを確認する。
手順終了です。お疲れさまでした。

f:id:beaber:20211114065358p:plain



 

インスタ誘導にもおすすめ

f:id:beaber:20211116010210p:plain

インスタの投稿をシェアする目的で使われることが多い埋め込み機能ですが、実は外部からインスタに誘導するための手段としても有効です。

 

「投稿一覧」を表示するサービスはおすすめできない

インスタの「投稿一覧」をwebページに表示するサービスはいくつもありますが、どれも有料のサービスだったり、公式側の使用が変更になると使用できなくなるリスクがあります。

 

また、公式以外のサービスをブログに埋め込むことで ページの表示速度が遅くなることが多く、Googleの評価も気になります。

 

じゃあどうするか?

投稿一覧は、さまざまなデメリットがあることをお伝えしました。

 

そこで、ブログからインスタ誘導におすすめなのはフィード投稿をサイドバーに埋め込むことです。

 

フィード投稿を埋め込むとアカウント名とプロフィールページへのリンクがあります。

 

そのため、投稿一覧サービスを利用せずにインスタ公式の投稿埋め込みを使ってあげるのがシンプルかつ実はコスパが高いです。

 

f:id:beaber:20211115064731j:plain

 

このようにサイドバーのメニューにフィードを埋め込むのがオススメです。

 

 

サイドバーへの埋め込み手順

※この先の手順はパソコンで操作してください。

 

STEP
埋め込みたい投稿からHTMLコードをコピー

インスタ投稿の埋め込み手順「STEP1~6」を行う。

STEP
はてなブログのデザイン画面を表示
はてなブログにログインしてデザインを押す。

f:id:beaber:20211117155614p:plain



STEP
カスタマイズを選択
左上にあるカスタマイズを選択する。

f:id:beaber:20211117155639p:plain



STEP
サイドバーを選択
メニューにあるサイドバーを選択する。

f:id:beaber:20211117155741p:plain



STEP
モジュールに追加を選択
メニューにあるモジュールに追加を選択する。

f:id:beaber:20211117155813p:plain

 

STEP
モジュールに追加画面の各項目を入力
①HTMLを選択
②メニューの名称を入力
③先ほどコピーしたHTMLコードを貼り付け
④適用を押す

f:id:beaber:20211117160759p:plain



STEP
表示確認
プレビューが表示されるので問題がないことを確認する。

f:id:beaber:20211114065358p:plain



STEP
変更を保存
問題なければ左上の変更を保存するを押す。
手順終了です。お疲れさまでした。

f:id:beaber:20211117161132p:plain





まとめ

はてなブログの記事にインスタの投稿を埋め込むには、公式のHTMLコードを利用します。

インスタ投稿は記事に埋め込むだけでなく、サイドバーに入れる事でブログからインスタへの誘導も可能です。

 

せっかくSNS運営をしているなら、ブログとSNSで相互にリンクを張って相乗効果を狙いましょう。

 

インスタで画像編集スキルが身についた方には以下の記事もおすすめしています。

特にブログ一本でなかなか稼げていない初心者にはおすすめの方法です。

 

www.okan-tech.com

 

 

最後までありがとうございました。

 

 

オカンTECH

全国のオカンのITリテラシーを向上だ!

プライバシーポリシー
広告関係のお問合せはこちら

©️ 2021 オカンTECH Powered by Hatena Blog