注目キーワード
  1. the thor
  2. WordPress
  3. Google
  4. プラグイン
ブログにtwitterを埋め込む方法〜画像付きで解説をします〜

ブログにtwitterを埋め込む方法〜画像付きで解説をします〜

こんにちは、テンテン(@tentenmaru77)です。

 

今回はブログやWebサイトにtwitterのツイートやタイムラインを埋め込む方法について解説をします。

 

ここでは大きく3つに分けて解説をしていきます。

 

①投稿記事にTwitterのツイートを埋め込む方法

②フッターやサイドバーにTwitterのタイムラインを埋め込む方法

③Twitterのフォローボタンを設置する方法

 

Tenten

わかりやすく、はじめに今回解説する3つの事例を以下画像で載せておきます。

 

①投稿記事にツイートを埋め込む事例

投稿記事にツイートを埋め込んだスクショ

 

 

②フッターやサイドバーにtwitterのタイムライン埋め込む事例

Twitterのタイムラインをサイドバーに埋め込んだスクショ

 

③Twitterのフォローボタンを埋め込む事例

Twitterフォローボタン設置例のスクショ

 

 

投稿記事にTwitterのツイートを埋め込む作業時間:約1〜3分

フッターやサイドバーにタイムライン埋め込む作業時間:約5分ほど

③Twitterのフォローボタンを埋め込む作業時間:約3分ほど

 

では早速、解説に進みます。

 

ブログの投稿記事にtwitterのツイートを埋め込む方法

 

まず、投稿記事にツイートを埋め込む方法についてです。

 

①埋め込みを行いたいツイートを見つけ、赤矢印の箇所をクリックします

Twitterの特定ツイート設定のスクショ

 

 

②「ツイートを埋め込む」を選択します。

ツイートを埋め込みのスクショ

 

③少しスクロールすると、下記の画面になるので、「Copy Code」をクリックします。

TwitterのCopy Codeのスクショ

 

④「×」をクリックします

ツイートコピー完了のスクショ

 

ツイートのコードはコピー出来たので、後はブログに貼るだけです。

 

では、早速、投稿記事にツイートを埋め込みます。

 

⑤WordPressを開き、埋め込みたい記事に対して、「テキスト」をクリックします
※「ビジュアル」にコードを張り付けても表示されません。

WordPressテキストモードのスクショ

 

 

⑥コピーしたコードの貼り付けを行います。

テキストモードにツイートのコード貼り付けのスクショ

 

これでtwitterのツイートの埋め込みは完了です。念の為、プレビューで確認してみましょう。

 

フッターやサイドバーにtwitterのタイムラインを埋め込む方法

 

『俺のブログ運営』では、サイドバーにタイムラインを埋め込んでいるので、その方法で解説をします。

※フッターに入れる場合においても、基本的な作業は同じです。
テーマはTHE THORを入れておりますので、多少異なる点があるかと思いますが、基本的な作業な同じです。

 

① https://publish.twitter.com/こちらから設定を行います。

赤枠の箇所に、twitterのタイムラインのURLを入力して、「→」をクリックします。

TwitterのタイムラインURLを貼り付けるスクショ

 

②赤枠で囲っている場所をクリックし、次に「set customization options」をクリックします。

タイムラインオプション設定のスクショ

 

③タイムラインのサイズ調整を行います。

Twitterタイムラインサイズ調整のスクショ

 

・Height(px):高さ

・Width(px):幅

 

入力した際、青枠で囲っている箇所が自動的にサイズが変わります。これが実際のサイズとなりますので、好きなように調整してください。

 

ちなみに当ブログでは、Height500px、width350pxで設定しておりますのでご参考までに。

 

④「Update」に進みます。

タイムラインUpdateのスクショ

 

⑤「Copy  Code」をクリックして、コードをコピーします。

タイムラインCopy Codeのスクショ

 

 

これでタイムラインのコードをコピーすることができました。

 

Tenten

後は、ウィジェットにタイムラインのコードを埋め込むだけです。もう少しなので頑張りましょう!

 

⑥WordPressを開き、「外観」→「ウィジェット」に進みます。

今回は、サイドバーにタイムラインを設置していきます。フッターエリアにおいても基本な作業は同じです。

WordPress外観からウィジェットのスクショ

 

 

⑦「利用できるウィジェット」から「テキスト」をドラッグ&ドロップする

WordPressテキストをドラッグ&ドロップするスクショ

※当ブログでは、THE THORのテーマを使用している為、若干表示が違う可能性がありますが、基本的な作業は同じです。

 

サイドバーエリアやフッターのエリアなど、好きな場所に設置することができますので、お好みな場所に設置しましょう。

 

 

⑦「タイトル」を入力して、「テキスト」に進み、さきほどコピーしたタイムラインのコードをペーストします。

テキスト情報変更のスクショ

 

タイムラインのプログラミングコードは、必ず「テキスト」にペーストしましょう。

 

最後に忘れずに「保存」してくださいね。

 

これで設定完了です。最後に、うまく表示されているか「プレビュー」から確認してみてください。

 

ブログにTwitterのフォローボタンを埋め込む方法

 

最後に、Twitterのフォローボタンを埋め込む方法についてです。

 

Tenten
基本的には、先ほどのTwitterのタイムラインを埋め込む方法と同じなので簡単に説明をしていきます。

 

① https://publish.twitter.com/にアクセスをして、twitter(自分のアカウント)のURLを入力して、「→」をクリックして、「Twitter Buttons」を選択します。

Twitter Buttons選択のスクショ

 

②好きなフォローボタンを選択します。

Twitterフォローボタンデザインの種類のスクショ

 

③フォローボタンのコードをコピーして貼り付けします。

Twitterフォローボタンのコードをコピーするスクショ

 

貼り付けの方法や場所は、先ほどTwitterのタイムラインを埋め込む方法で解説していますので、ここでは省略します。

 

さいごに

 

ブログにTwitterを埋め込む3つの方法は理解できましたでしょうか?

 

下記の記事では、ブログ記事にユーチューブ動画を入れる方法を解説しておりますので、もし良かったらご参考にください。

あわせて読みたい記事

こんにちは、テンテンです。   今回はブログやWebサイトにユーチューブ動画を埋め込む方法を解説していきます。   ユーチューブ動画埋め込み作業時間:3分ほど   【ブログ記事にユーチュ[…]

 

最後まで読んでいただき、ありがとうございました。

ブログにtwitterを埋め込む方法〜画像付きで解説をします〜
最新情報をチェックしよう!