WordPress

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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
自撮りのイラスト

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

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

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

Twitterの内容を埋め込む

Twitterのつぶやきを埋め込む

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

Twitterの内容を埋め込む

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

Twitterの内容を埋め込む

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

Twitterの内容を埋め込む

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

Twitterの内容を貼り付ける

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

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

Twitterのタイムラインを埋め込む

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

Twitterのタイムラインを表示する

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

Twitterのタイムラインを埋め込む

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

Twitterのタイムラインを埋め込む

「Embedded Timeline」を選択します

Twitterのタイムラインを埋め込む

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

Twitterのタイムラインを埋め込む

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

Twitterのタイムラインを埋め込む

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

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

Twitterのタイムラインを埋め込む

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

Twitterのタイムラインを埋め込む

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

Twitterのタイムラインを埋め込む

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

Twitterのタイムラインを埋め込む

Twitterのボタンを埋め込む

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

Twitterのボタンを埋め込む

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

Twitterのボタンを埋め込む

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

Twitterのボタンを埋め込む

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

Twitterのボタンを埋め込む

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

Twitterのボタンを埋め込む

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

Twitterのボタンを埋め込む

Facebookの内容を埋め込む

Facebookの投稿内容を埋め込む

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

Facebookの投稿を埋め込む

コードをコピーします

Facebookの投稿を埋め込む

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

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

Facebookページを埋め込む

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

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

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

Facebookページを埋め込む

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

Facebookページを埋め込む

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

Facebookページを埋め込む

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

Facebookページを埋め込む

Facebookページが表示されます

Facebookページを埋め込む

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

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

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

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

いいね!ボタンを埋め込む

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

いいね!ボタンを埋め込む

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

いいね!ボタンを埋め込む

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

いいね!ボタンを埋め込む

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

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

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

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

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

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

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

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

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

YouTubeの動画を埋め込む

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

Youtubeの動画を埋め込む

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

Youtubeの動画を埋め込む

コードをコピーします

Youtubeの動画を埋め込む

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

Youtubeの動画を埋め込む

Youtubeの動画が表示されます

Youtubeの動画を埋め込む

Googleマップを埋め込む

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

Googleマップを埋め込む

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

Googleマップを埋め込む

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

Googleマップを埋め込む

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

Googleマップを埋め込む

Googleマップが表示されます

Googleマップを埋め込む
  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

集客に困っている中小企業で経営者、個人事業主の方へ、たった1年で劇的に集客できるホームページを作成いたします

「デザインの良いホームページを作ったが、いつまでたっても集客できない」


「何十万の費用をかけて、ホームページを作ったのに、1年間に数回しかお問い合わせが来ない」


と嘆いているあなたへ


月額9,800円で集客できるホームページ+ブログを構築いたします


ホームページ制作でドメイン取得費用、レンタルサーバー代、ホームページ・ブログ作成費、集客(SEO)対策など全て含みます


また、集客できるブログ、キャッチコピーの書き方も指導いたします


お気軽にお問い合わせください


丁寧、わかりやすさを心がけて、対応いたします


詳細はこちら