WordPressの記事に、InstagramやTwitter(現X)、YouTubeを載せたい。そう思って手が止まった夜、前オーナーのRinaさんが2023年当時に残してくれた手順を、ちょっぴーとろっぐで実際になぞりながら記録しました。
ねえろっぐ、他の人のインスタの写真ってブログに貼っていいの？勝手に載せたら怒られない？
それがね、SNSには公式の「埋め込みタグ」ってのが用意されてるんだ。それを使う分には引用として貼れる。プラグインなしでもいけるよ。
プラグイン増やすとブログ重くなるって聞いたから助かる！やり方おしえて。
前オーナーは「【簡単】初心者でもGoogleアドセンスに合格する7つのポイント」でInstagramの埋め込みに少し触れていました。そこで今回はInstagram・Twitter(現X)・YouTubeの3大SNSの埋め込み手順をまとめて記録します。
プラグインを使うともっと色々な表示ができますが、入れすぎるとブログが重たくなります。「プラグインは使いたくない」「シンプルで十分」という場合は、この記事の手順だけで足ります。
ブログやネットが初心者でも迷わないよう、画像を全ステップぶん載せながら記録しました。
SNSの埋め込みは、ブログを運営していくうえで知っていると何かと有利になる技です。ここで手順ごと覚えてしまいましょう。
-->SNSの埋め込みとは？
SNSには、ツイートや写真、動画など、ありとあらゆる情報が詰まっています。
そのSNSのリンクをブログの記事に貼ることができ、それを「埋め込む」と言います。
他人のSNSのリンクを貼って平気なの？と思うかもしれませんが、SNSの投稿画面には〈埋め込みタグ〉があります。
この機能を利用して引用することは著作権の侵害にはなりません。
※ただし、投稿者が”引用禁止”などの注意書きをしている場合は引用しないようにしましょう。
「写真や動画を挿入して記事をわかりやすくしたい」「色々な人のつぶやきを挿入して世間の評判を説明したい」。ブログを書いているとこんな状況になりますよね。
とある風景、人、イラストなど、記事を見やすくするだけの目的ならフリー素材を使うといいでしょう。
おすすめのフリー素材はこちら↓
何か紹介したい特定の場所や物の写真が必要な場合は、フリー素材だとほとんど見つかりません。かと言ってその全てを自分で撮るのもなかなか難しいですよね。
そんな時に便利なのが「Instagramの埋め込み」です。ここから、埋め込みの詳しいやり方を手順ごとに記録していきます。
Instagramの埋め込み
まずはInstagramからいこう。投稿の右上のボタンから進めていくよ。※これは2023年当時のPC版の画面での手順だから、今のアプリ版やUIとは配置が違うことがあるよ。
①記事に埋め込みたいInstagramの写真を選び、その投稿の右上の「…」をクリック（2023年当時の手順）
②「埋め込み」をクリック
③「キャプションを追加」のチェックをはずし、「埋め込みコードをコピー」をクリック
（キャプションを追加にすると、その投稿のコメントやハッシュタグ部分も一緒に表示されます。）
④自分の記事の投稿画面に戻ります。
WordPressの場合だとビジュアルエディタとテキストエディタがありますが、一番右上の「テキスト」の方を選び、貼り付けます（ctrl+v）。（2023年当時のクラシックエディタでの手順。現行のブロックエディタではカスタムHTMLブロックに貼る形になっている可能性があります）
ちなみに、「Instagramでもっと見る」「いいね！～件」などの部分が文字数に含まれてしまいます。
①～④の手順でやっていくとこのように表示されます。
※「テキスト」で張り付けて「ビジュアル」で確認すると、写真が表示されなくてあれ？と思いますが、「プレビュー」で見れば写真まで全て表示されます。
「キャプションを追加」にするとこのようになります。
ここから少し応用編です。
⑤<center></center>でコードを挟むとページの中央に表示されるようになります。
「メディアを追加」で画像を挿入するときは大抵の場合配置を「中央」にすると思いますが、埋め込みしたものも中央に表示されると見た目がきれいになります。
⑥大きさを変える
デフォルトだと「max-width: 540px; 」になっていますが、この部分の数字を変えると表示される大きさが変わります。
下で表示されているものは「max-width: 300px; 」で、<center></center>で中央に表示されるようにしています。
Twitterの埋め込み
次はTwitter…って今はXって名前だよね？手順も変わっちゃってない？
そう、Twitterは今はXに名前が変わってるね。下の手順は2023年当時のもので、ボタン名やメニューの位置は現行の仕様と違う可能性があるよ。流れ自体はだいたい同じだけど。
ここまでできたら他のSNSも手順はだいたい同じですが、一つずつ確認していきましょう。
①記事に埋め込みたいツイート（現在のポスト）を選び、右上の「∨」をクリック（2023年当時の手順）
②「ツイートを埋め込む」をクリック（現在は「埋め込み」等の表記に変わっている可能性があります）
③別のページに移動するので、真ん中あたりにある「Copy Code」をクリック
ブログ初心者です！
📝https://t.co/s6yeLXRkmGのコンテンツ#宮古島観光#宮古島グルメ#宮古島移住
私と同じブログ初心者の方、宮古島の旅行や移住を考えていて情報を知りたい方、フォローお待ちしてます。
また、もっとこんな情報を教えてほしい！というのがあればお気軽にコメントください🥳
— Rina@初心者ブロガー (@Rina_wooooo) December 19, 2019
④Instagramのときと同じように「テキスト」から貼り付ける（<center></center>でコードを挟んで中央に表示）とこのように表示されます。
YouTubeの埋め込み
最後はYouTube。ここだけ「…」じゃなくて「共有」から入るのがポイントだよ。
①埋め込みたい動画を選び、右下の「共有」をクリック（「…」じゃないので注意！）
②「埋め込む」をクリック
③右下の「コピー」をクリック
（このときに「開始位置」にチェックを入れると好きな時間から開始するように設定できます）
④Instagramのときと同じように「テキスト」から貼り付ける（<center></center>でコードを挟んで中央に表示）とこのように表示されます。
-->まとめ
SNSを埋め込むときの手順まとめ
- 埋め込みたい投稿の右端でそれっぽいものをクリック
- 「埋め込む」をクリック
- コードをコピー
- 「テキスト」の方に貼り付け
- 貼り付けるときは<center></center>でコードを挟んで中央に表示
一度やり方を知ってしまえば簡単にできます。3つのSNSとも、大きな流れは同じでした。
SNSの埋め込みをして、より豊かなブログライフを送りましょう。ろっぐたちも、この手順でひと通りなぞってみて記録に残しました。
ボタンの名前や画面は2023年当時から変わってるところもあるけど、「投稿メニュー→埋め込み→コードをコピー→テキストに貼る」の流れを覚えておけば応用がきくよ。
なるほど！これで写真も動画もつぶやきも貼り放題だ…って、ぼく肉球でコピペできるのかな？
最後まで読んでいただきありがとうございました。
