ブログにSNSの投稿を埋め込んでみた!6選

ブログにSNSの投稿を埋め込んでみた!6選

ここでは、SNSの投稿をブログやサイトに載せたいという人向けに、X(旧Twitter)やThreads、Instagram、ImgurやYouTube、Facebook、TikTokの埋め込み方法を解説いたします。

文字で説明するより画像や動画のほうがひと目で理解できますよね。

埋め込みコードは「リンク」とは違って「HTML」です。そのHTMLコードをブログやサイトに貼り付けて表示させます。

スマホでは埋め込みコードが取得できなくても、ウェブ版のほうで取得できる場合もあります。こちらではPCでの操作の解説となります。
※仕様が変更になっている場合があります。

X(旧Twitter)の場合

X(旧Twitter)
名前や投稿に特殊文字が使われている場合、記事表示されないことがあります。そのときはHTMLコードの中の特殊文字を削除してみてください。

こちらの投稿を埋め込んでみます。(ウェブ版)
https://twitter.com/MLB/status/1685068262571114497

右上の「…」をクリックするとメニューがでるので

ブログにSNSの投稿を埋め込んでみた!6選
出典:X(旧Twitter)

「</>ポストを埋め込む」をクリックします。

ブログにSNSの投稿を埋め込んでみた!6選
出典:X(旧Twitter)

「Embedded Video」は投稿の動画だけを埋め込みたいときに選択します。

ブログにSNSの投稿を埋め込んでみた!6選
出典:X(旧Twitter)

「Copy Code」でコードをコピーし、ブログやサイトに貼り付けます。

ブログにSNSの投稿を埋め込んでみた!6選
出典:X(旧Twitter)

動画のみ埋め込んだ投稿はこちら↓


「Embedded Tweet」は投稿を埋め込みます。

ブログにSNSの投稿を埋め込んでみた!6選
出典:X(旧Twitter)

「Copy Code」でコードをコピーし、ブログやサイトに貼り付けます。

https://twitter.com/MichaelFreda17/status/1685101905805021185
この投稿で引用元が不要の場合は、「set customization options」をクリックします。

ブログにSNSの投稿を埋め込んでみた!6選
出典:X(旧Twitter)

「Hide Conversation」にチェックを入れて、「Update」「Copy Code」で引用元の投稿は表示されません。

ブログにSNSの投稿を埋め込んでみた!6選
出典:X(旧Twitter)

埋め込んだ投稿はこちら↓

「Opt-out of tailoring Twitter」にチェックを入れると、ユーザーの行動データが送信されなくなります。(閲覧履歴などの情報を元におすすめのユーザーや広告を表示するかどうか)

Threadsの場合

Threads(スレッズ)

こちらの投稿を埋め込んでみます。
https://www.threads.net/@mlb/post/CvQmpqBuafg
※2023年10月10日時点、投稿は削除されているようです。またスマホでもウェブでも埋め込みコードが表示されなくなっています。

スマホアプリで投稿右上の「…」をみても埋め込みコードはありません。

ブログにSNSの投稿を埋め込んでみた!6選
出典:Threads

しかしウェブでなら「埋め込みコードを取得」することができます。

(仕様変更になる前の)埋め込みコード↓

ブログにSNSの投稿を埋め込んでみた!6選
出典:Threads

投稿の下のマークのなかの「再投稿」をクリックすると、

ブログにSNSの投稿を埋め込んでみた!6選
出典:Threads

QRコードの下に投稿のリンク埋め込みコードがコピーできるボタンがでてきます。

ブログにSNSの投稿を埋め込んでみた!6選
出典:Threads

埋め込んだ投稿はこちら↓

Post by @mlb
View on Threads

Instagramの場合

Instagram(インスタグラム)

こちらの投稿を埋め込んでみます。
https://www.instagram.com/p/CvQmWQxOtuq/?igshid=NTc4MTIwNjQ2YQ==

インスタグラムもスマホアプリのほうでは、「シェア」や「リンク」のみで埋め込みコードが表示されません。

ブログにSNSの投稿を埋め込んでみた!6選
出典:Instagram

「シェア」にもない。

ブログにSNSの投稿を埋め込んでみた!6選
出典:Instagram

しかし、ウェブから閲覧すると「埋め込み」とでるのでクリックすると、

ブログにSNSの投稿を埋め込んでみた!6選
出典:Instagram

「埋め込みコードをコピー」することができます。

ブログにSNSの投稿を埋め込んでみた!6選
出典:Instagram

埋め込んだ投稿はこちら↓

TikTokの場合

TikTok

こちらの投稿を埋め込んでみます。(ウェブ版)
https://www.tiktok.com/@mlb

プロフィールページでは右上の矢印「➦」から、個別の投稿では右のハートマークなどの下にある矢印「➦」から、「</>埋め込む」とでてくるので、クリックしてコードをコピーして埋め込みます。

ブログにSNSの投稿を埋め込んでみた!6選
出典:TikTok
ブログにSNSの投稿を埋め込んでみた!6選
出典:TikTok

埋め込んだ投稿はこちら↓

@mlb chilllllll 😮‍💨 #sports #mlb #shoheiohtani #wow ♬ original sound – MLB

imgurの場合

imgur

こちらの投稿を埋め込んでみます。(ウェブ版)
https://imgur.com/sTaf38F

ウェブからは、画像や動画右上の「…」から「</>Embed」をクリックします。

ブログにSNSの投稿を埋め込んでみた!6選
出典:imgur

「Copy Link」でクリップボードにコピーされるので、ブログやサイトに貼り付けます。

投稿の題名が不要なときは右下の「Hide Title」にチェックを入れてから「Copy Link」をクリックします。

ブログにSNSの投稿を埋め込んでみた!6選
出典:imgur

埋め込んだ投稿はこちら↓

That time Shohei Ohtani hit his first major league home run and his teammates trolled him.

YouTubeの場合

YouTubeユーチューブ

こちらの投稿を埋め込んでみます。(ウェブ版)
https://www.youtube.com/watch?v=MKTJCew7oGQ

「共有」をクリックします。

ブログにSNSの投稿を埋め込んでみた!6選
出典:YouTube

「埋め込む」をクリックすると、

ブログにSNSの投稿を埋め込んでみた!6選
出典:YouTube

コードが表示されるのでコピーしてブログやサイトに貼り付けます。

ブログにSNSの投稿を埋め込んでみた!6選
出典:YouTube

ただしYouTubeの動画などを埋め込むとGoogle Search Consolehでインデックス登録されなくなることがあります。(インデックス登録されていない動画は、Googleの動画検索結果に表示されません)また、INP問題にひっかかることがあります。

なので共有の「埋め込む」ではなく「コピー」でリンクだけ書くようにしている記事もあります。でもなんでダメなんだろう、、YouTubeはGoogleなのに。

Facebookの場合

Facebook(フェイスブック)

こちらの投稿を埋め込んでみます。(ウェブ版)
https://www.facebook.com/mlb/videos/ohtani-you-cannot-be-serious/834435778222163/

投稿の右上「…」「</>埋め込み」があるのでクリックします。

ブログにSNSの投稿を埋め込んでみた!6選
出典:Facebook

「コードをコピー」してブログやサイトに貼り付けます。

このときのコードは画像や動画のみとなるので、投稿記事全部を表示させたいときは「投稿記事全体を含める」にチェックを入れてからコードを取得します。

ブログにSNSの投稿を埋め込んでみた!6選
出典:Facebook

埋め込んだ投稿はこちら↓

さいごに

ベンリな画像UPサイトの「imgur」はなんと読むのでしょうかね、、

スマホアプリからでは埋め込みコードが表示されなくても、ウェブ版から見るとコードを取得できる場合があります。

最近「Twitter」が「X」になってしまったり、こういったサービスはある日突然仕様が変わるので投稿が表示されなくなったり、埋め込み方法が変わるかもしれません。

ただし、埋め込みの記事はブログやサイトの表示に時間がかかるようで、Google Search Consoleから注意されることがあります。


adsアフィリエイトのJANet


ブログやサイトを始めたら、
『App Store』と『Google Play』のバッジをブログに貼ってアプリをダウンロード【簡単】

画像から色を抜きだしてRGBとカラーコードを知りたい【ペイント】


タイトルとURLをコピーしました