こんにちは、テンテン(@tentenmaru77)です。
今回はブログやWebサイトにtwitterのツイートやタイムラインを埋め込む方法について解説をします。
ここでは大きく3つに分けて解説をしていきます。
①投稿記事にTwitterのツイートを埋め込む方法
②フッターやサイドバーにTwitterのタイムラインを埋め込む方法
③Twitterのフォローボタンを設置する方法
わかりやすく、はじめに今回解説する3つの事例を以下画像で載せておきます。
①投稿記事にツイートを埋め込む事例
②フッターやサイドバーにtwitterのタイムライン埋め込む事例
③Twitterのフォローボタンを埋め込む事例
①投稿記事にTwitterのツイートを埋め込む作業時間:約1〜3分
②フッターやサイドバーにタイムライン埋め込む作業時間:約5分ほど
③Twitterのフォローボタンを埋め込む作業時間:約3分ほど
では早速、解説に進みます。
ブログの投稿記事にtwitterのツイートを埋め込む方法
まず、投稿記事にツイートを埋め込む方法についてです。
①埋め込みを行いたいツイートを見つけ、赤矢印の箇所をクリックします
②「ツイートを埋め込む」を選択します。
③少しスクロールすると、下記の画面になるので、「Copy Code」をクリックします。
④「×」をクリックします
ツイートのコードはコピー出来たので、後はブログに貼るだけです。
では、早速、投稿記事にツイートを埋め込みます。
⑤WordPressを開き、埋め込みたい記事に対して、「テキスト」をクリックします
※「ビジュアル」にコードを張り付けても表示されません。
⑥コピーしたコードの貼り付けを行います。
これでtwitterのツイートの埋め込みは完了です。念の為、プレビューで確認してみましょう。
フッターやサイドバーにtwitterのタイムラインを埋め込む方法
『俺のブログ運営』では、サイドバーにタイムラインを埋め込んでいるので、その方法で解説をします。
※フッターに入れる場合においても、基本的な作業は同じです。
※テーマはTHE THORを入れておりますので、多少異なる点があるかと思いますが、基本的な作業な同じです。
① https://publish.twitter.com/こちらから設定を行います。
赤枠の箇所に、twitterのタイムラインのURLを入力して、「→」をクリックします。
②赤枠で囲っている場所をクリックし、次に「set customization options」をクリックします。
③タイムラインのサイズ調整を行います。
・Height(px):高さ
・Width(px):幅
入力した際、青枠で囲っている箇所が自動的にサイズが変わります。これが実際のサイズとなりますので、好きなように調整してください。
ちなみに当ブログでは、Height500px、width350pxで設定しておりますのでご参考までに。
④「Update」に進みます。
⑤「Copy Code」をクリックして、コードをコピーします。
これでタイムラインのコードをコピーすることができました。
後は、ウィジェットにタイムラインのコードを埋め込むだけです。もう少しなので頑張りましょう!
⑥WordPressを開き、「外観」→「ウィジェット」に進みます。
※今回は、サイドバーにタイムラインを設置していきます。フッターエリアにおいても基本な作業は同じです。
⑦「利用できるウィジェット」から「テキスト」をドラッグ&ドロップする
※当ブログでは、THE THORのテーマを使用している為、若干表示が違う可能性がありますが、基本的な作業は同じです。
サイドバーエリアやフッターのエリアなど、好きな場所に設置することができますので、お好みな場所に設置しましょう。
⑦「タイトル」を入力して、「テキスト」に進み、さきほどコピーしたタイムラインのコードをペーストします。
タイムラインのプログラミングコードは、必ず「テキスト」にペーストしましょう。
最後に忘れずに「保存」してくださいね。
これで設定完了です。最後に、うまく表示されているか「プレビュー」から確認してみてください。
ブログにTwitterのフォローボタンを埋め込む方法
最後に、Twitterのフォローボタンを埋め込む方法についてです。
① https://publish.twitter.com/にアクセスをして、twitter(自分のアカウント)のURLを入力して、「→」をクリックして、「Twitter Buttons」を選択します。
②好きなフォローボタンを選択します。
③フォローボタンのコードをコピーして貼り付けします。
貼り付けの方法や場所は、先ほどTwitterのタイムラインを埋め込む方法で解説していますので、ここでは省略します。
さいごに
ブログにTwitterを埋め込む3つの方法は理解できましたでしょうか?
下記の記事では、ブログ記事にユーチューブ動画を入れる方法を解説しておりますので、もし良かったらご参考にください。
こんにちは、テンテンです。 今回はブログやWebサイトにユーチューブ動画を埋め込む方法を解説していきます。 ユーチューブ動画埋め込み作業時間:3分ほど 【ブログ記事にユーチュ[…]
最後まで読んでいただき、ありがとうございました。