【決定版】WordPressに各SNSの内容を埋め込む方法

「WordPressでTwitterのつぶやきを埋め込むには？」
「WordPressでYoutubeの動画を埋め込むには？」
「インスタグラムの写真をWordPressに埋め込みたい」

これらは慣れれば簡単ですが、WordPressでブログを書き始めた初心者はここでつまずくと思います

そこで、Twitter、Facebook、Youtube、Googleマップ、LINE＠などの内容を、WordPressに埋め込む方法を解説します！

Twitterの内容を埋め込む

Twitterのつぶやきを埋め込む

下矢印を選択して、「ツイートをサイトに埋め込む」を選択します

コードをコピーします
「メディアを含める」にチェックをつけると、画像や動画なども表示されます

WordPressの投稿画面で、「テキスト」モードにしてから、コピーした内容を挿入したい場所に貼り付けます
「ビジュアル」で貼り付けても上手くいかないので、「テキスト」モードにして貼り付けるのを忘れないでください

こういう感じで、Twitterの内容がWordPressの記事に表示されます

特定ユーザーのタイムラインを埋め込む

右上にある自分のアイコンをクリックして、「設定とプライバシー」を選択します

左にあるメニューから「ウィジェット」を選択します

「publish.twitter.com」を選択します

タイムラインに表示させたいユーザー名を入力します

「Embedded Timeline」を選択します

「Copy Code」を選択してコピーします
大きさなどを調整したい場合は、「set customization options」を選択します

「set customization options」では、幅、高さや色などを設定することができます

Twitterのタイムラインは、サイドバーに表示させることが多いので、WordPressのサイドバーに表示させる方法を解説します

WordPress管理画面のメニューから「外観」「ウィジェット」を選択します

「カスタムHTML」を選択して、サイドバーに追加します

適当なタイトルを入力して、内容の部分にコピーした内容を貼り付けます

下のような感じで、サイドバーにTwitterの特定ユーザーのタイムラインが表示されます

Twitterのボタンを埋め込む

Twitterのタイムラインを埋め込むと同じ方法で「publish.twitter.com」にアクセスして、アカウント名を入力したあとに「Twitter Buttons」を選択します

フォローさせるためのボタン、返事(mention)をもらうためのボタン、ハッシュタグでつぶやくためのボタンどれかを、目的に合わせて選択します

「Copy Code」を選択してコピーします
設定をしたい場合は「set customization options」を選択します

オプションでは、ユーザ名を隠すかどうか、大きいボタンにするかを設定できます

WordPressの投稿画面で、「テキスト」モードにしてから、挿入したい箇所に貼り付けます

下のような感じで、WordPressのブログ記事にTwitterのボタンが表示されます

Facebookの内容を埋め込む

Facebookの投稿内容を埋め込む

「…」のボタンを選択し、「埋め込み」を選択します

コードをコピーします

WordPressの投稿画面で、「テキスト」モードを選択して、コピーしたコードを挿入したい部分に貼り付けます

下の図のように、Facebookの投稿が表示されます

Facebookページを埋め込む

以下のページにアクセスします

ページプラグイン – ソーシャルプラットフォーム
https://developers.facebook.com/docs/plugins/page-plugin?locale=ja_JP

FacebookページのURLを入力します
オプション項目は、好みでチェックを入れたり外したりしてください
プレビューが表示され、オプションの状況で見た目が変わります

「コードを取得」を選択します

「IFrame」を選択して、下のコードをコピーします

WordPressの投稿画面で「テキスト」モードを選択して、挿入したい箇所にコピーした内容を貼り付けます

Facebookページが表示されます

「いいね！」ボタンを埋め込む

以下のページにアクセスします

いいね！ボタン – ソーシャルプラグイン
https://developers.facebook.com/docs/plugins/like-button?locale=ja_JP

「いいね！」をするURLを入力して、オプションを自分の好みで設定します
設定したら「コードを取得」を選択します

「IFrame」を選択して、下のコードをコピーします

WordPressの投稿画面で、「テキスト」モードを選択して、挿入したい箇所に貼り付けます

下の図のように「いいね！」ボタンが表示されます

インスタグラムの画像を埋め込む

画像の右下のボタンを押して、「埋め込み」を選択します
もし「埋め込み」が表示されない場合は、ユーザーが埋め込みを禁止しているので別の画像を選びましょう

「キャプションを追加」のチェックを外して、「埋め込みコードをコピー」を選択します
「キャプションを追加」にチェックが入っていると、画像の解説やハッシュタグがゴチャゴチャ表示され見づらくなるので、個人的にはチェックは外したほうがいいと思います

WordPressの投稿画面で、「テキスト」モードを選択してコピーした内容を貼り付けます
下の図のように、たくさんのコードが貼り付けられますが、これは正常ですね

こういうふうに、インスタグラムの画像が表示されます

YouTubeの動画を埋め込む

再生動画の下にある「共有」を選択します

「埋め込む」を選択します

コードをコピーします

WordPressの投稿画面で、「テキスト」モードを選択して、コピーしたコードを貼り付けます

Youtubeの動画が表示されます

Googleマップを埋め込む

Googleマップで埋め込みたい場所を検索してから、「共有」を選択します

「地図を埋め込む」を選び、「HTMLをコピー」でコピーします

地図の大きさを変更することもできます

WordPressの投稿画面で「テキスト」モードにして、コピーしたコードを貼り付けます

Googleマップが表示されます