こんにちは、きゃぷてんです。
WordPressを使ってブログを運営していると「YouTubeの動画やTwitterの文章を記事内に埋め込みたい」と感じることがあると思います。
記事内に外部のサービスが埋め込まれていると、なんだかんだ言っても”こなれている感”であったり”Web系の知識あります感”が出てくるので、僕は非常に好きです。
自己満足に近いですが（笑）
とは言いつつ、WordPressの記事にYouTubeやTwitterが埋め込まれていると、動画やツイートの発信者の権利が守られ、訪問者は発信元を確認でき、我々ブログ運営者は”こなれている感を演出”できるので、三方よしと言えるでしょう。
また、YouTubeの動画が記事内に埋め込まれていると、読者が動画を見てくれる可能性が非常に高まり、滞在時間の向上にもつながります。
するとGoogleからの評価も高まるので上位表示にも役に立つでしょう。
<目次>お好きなところからどうぞ
【超簡単】WordPressに各種SNSを埋め込む方法
さてさて、それでは早速、WordPressに各種SNSを埋め込む方法をお伝えしていきますね。
初めに、操作の全体像がイメージできるようにざっくりとした説明をすると、WordPressの記事に各種SNSを埋め込む場合には「埋め込みコード」というものを、記事内に突っ込んであげます。
この「埋め込みコード」というのは、HTMLであったりjavascriptと呼ばれるプログラム言語で記述されているのですが、簡単に言うと「ここにSNSを表示しますよ！」と書かれているわけです。
また、最近のSNSでは上記の「埋め込みコード」がすでに用意されているので、我々ブログ運営者がやることは、非常に簡単で以下の2ステップです。
- 各種SNSから「埋め込みコード」をコピーする
- 記事内に張り付ける
非常に簡単な操作なので、今日から誰でも簡単に実践できるのですが、WordPress初心者がつまずきやすい注意点が1つあります。
WordPressには記事作成画面に「ビジュアル」と「テキスト」の2種類がありますが、各種SNSを記事内に埋め込む場合には、記事作成画面で「テキスト」を選択してください。
前述したように、埋め込みコードはHTML等で記述されているため、それらを編集できるように「テキスト」を使って記事内に突っ込んであげる必要があります。ちなみに、記事内のその他の文章の編集については「ビジュアル」でも「テキスト」でも大丈夫です。
SNSを突っ込むときは「テキスト」を使う
ここだけを注意すれば、今日から誰でも簡単に各種SNSを記事内に埋め込む事ができます。
それでは、注意点も理解できたので各種SNSごとに記事内に埋め込む方法を見ていきましょう。
YouTubeを記事内に埋め込む方法
はじめに、YouTubeを埋め込む方法をご紹介します。
操作の全体像はこんな感じです。
- 埋め込みたいYouTubeのページを開く
- 埋め込みコードをコピーする
- 記事内に埋め込みコードを張り付ける
まずは、埋め込みたいYouTubeのページを開きましょう。YouTubeのページを開くと動画の下の方に「共有」というボタンがあるので、それをクリックします。
SNSの一覧が表示されますが、それは無視して下の方にある「埋め込む」をクリックすると「埋め込みコード」が表示されます。
ここで、開始位置やその他オプションを設定することができますが、特別希望がなければそのまま埋め込みコードをコピーします。（ちなみに、オプションを設定するとそれに応じた埋め込みコードに変換されますので、オプションを設定した場合は変換後の埋め込みコードをコピーしましょう）
埋め込みコードをコピーできたら、WordPressの記事作成画面で「テキスト」を選択し、YouTubeを埋め込みたい部分に埋め込みコードを張り付けましょう。
動画の幅や高さを変更したい！という希望があると思います。
その場合は、埋め込みコード内のwidthとheightの値を変更してあげると、記事内に埋め込む動画の幅や高さを任意のものに設定することができます。
ちなみに、このブログではwidth=”728″ height=”410″ に変更しています。
width=”ここを任意の値にする（単位はpx）”
height=”ここを任意の値にする（単位はpx）”
実際にYouTubeの動画を埋め込むと下のようになります。
（最近注目している、いわきFCの動画を張り付けてみました、笑）
Twitterを記事内に埋め込む方法
続きまして、Twitterを埋め込む方法をご紹介します。
操作の全体像はこんな感じです。
- 埋め込みたいTwitterのツイートを開く
- 埋め込みコードをコピーする
- 記事内に埋め込みコードを張り付ける
まずは、Twitterにログインした状態で埋め込みたいTwitterのツイートを開きましょう。ツイートを開くと画面の上の方に「矢印マーク」があるので、それをクリックします。
すると、利用できる機能が表示されるので「ツイートをサイトに埋め込む」を選択しましょう。
埋め込みコードが表示されるのでコピーします。（ツイート内に画像や動画が含まれる場合は「メディアを含める」にチェックを入れると画像や動画も一緒に埋め込むことができます）
埋め込みコードをコピーできたら、WordPressの記事作成画面で「テキスト」を選択し、Twitterを埋め込みたい部分に埋め込みコードを張り付けましょう。
実際にTwitterを埋め込むと下のようになります。
（例によって、いわきFCのTwitterを張り付けてみました、笑）
ROOM -社長の論説-
『いわきFCの現在地 〜街・人づくりについて考えてみた〜』#iwakifc#いわきFC
https://t.co/y22peaR4pJ— いわきFC Official (@IwakiFcOfficial) 2017年12月7日
Instagramを記事内に埋め込む方法
続きまして、Instagramを埋め込む方法をご紹介します。
操作の全体像はこんな感じです。
- 埋め込みたいInstagramの投稿を開く
- 埋め込みコードをコピーする
- 記事内に埋め込みコードを張り付ける
まずは、Instagramにログインした状態で埋め込みたいInstagramの投稿を開きましょう。投稿を開くと画面の下の方に「・・・」のようなマークがあるので、それをクリックします。
すると、利用できる機能が表示されるので「埋め込み」を選択しましょう。
埋め込みコードが表示されるのでコピーします。
「キャプションを追加」にチェックを入れると、投稿内の文章やハッシュタグ等も含めた埋め込みコードになります。
画像のみを埋め込みたい場合は「キャプションを追加」のチェックを外します。
「埋め込みコードをコピー」というボタンがありますが、僕がやったときは機能していませんでした。
そのため、埋め込みコード自体を選択して「Ctrl + C」等でコピーしましょう。
埋め込みコードをコピーできたら、WordPressの記事作成画面で「テキスト」を選択し、Instagramの投稿を埋め込みたい部分に埋め込みコードを張り付けましょう。
実際にInstagramの投稿を埋め込むと下のようになります。
（例によって、いわきFCのInstagramを張り付けてみました、笑）
Facebookを記事内に埋め込む方法
最後に、Facebookを埋め込む方法をご紹介します。ひと昔前はSNSの王様のような存在でしたが、最近では特に若者のアクティブユーザが減っているのが悲しいですね。
SNS業界の移り変わりの速さに驚きです。
さてさて、操作の全体像はこんな感じです。
- 埋め込みたいFacebookの投稿を開く
- 埋め込みコードをコピーする
- 記事内に埋め込みコードを張り付ける
まずは、Facebookにログインした状態で埋め込みたいFacebookの投稿を開きましょう。投稿を開くと画面の上の方に「・・・」のようなマークがあるので、それをクリックします。
すると、利用できる機能が表示されるので「埋め込み」を選択しましょう。
埋め込みコードが表示されるのでコピーします。
埋め込みコードをコピーできたら、WordPressの記事作成画面で「テキスト」を選択し、Facebookの投稿を埋め込みたい部分に埋め込みコードを張り付けましょう。
実際にFacebookの投稿を埋め込むと下のようになります。
（例によって、いわきFCのFacebookを張り付けてみました、笑）
まとめ
お疲れ様でした。
以上が、各種SNSをWordPressの記事内に埋め込む方法です。
基本的に「埋め込みコードをコピー」「埋め込みコードを張り付け」の2ステップですので、操作は非常に簡単でしたね。慣れてくるとサイズを変更したり、レスポンシブ対応したり、まだまだかっこよく埋め込む方法があります。
ぜひ、あなたのブログ運営に役立ててくださいね。
最近のコメント