ワードプレスの悩み副業の悩み

プラグインを使わないでWordPress(ワードプレス)にTwitter(ツイッター)を貼り付ける方法

プラグインを使わないでWordPress(ワードプレス)にTwitter(ツイッター)を貼り付ける方法ワードプレスの悩み
クオモ
クオモ

前職はECサイトの管理者をやっていました、クオモです。
副業を行うにあたり独学で得た知識だけでは足りず、イチから勉強し直しています。
自分もそうですが副業でブログを続けていく中、わからない事や悩むことも日多々あります。
そんな時のひとつの判断材料になればと思い、当ブログを開設しました。

今回の悩み
今回の悩み
  • ワードプレスにツイッターのツイートを自動で表示させるにはどうしたらいいんだろう?

情報収集は検索よりSNSの時代

例えば、電車の事故・運行停止の情報が出ていたとします。
みなさん、どこで現在の運行や駅の状況を調べますか?

大手情報サイトの調査結果では5割以上の人が検索エンジンではなく、SNSで情報を収集しているという回答があったそうです。

LIDDELL株式会社は、若者100人を対象にアンケート調査を行った。最近、よく使っている検索についてたずねたところ、1位「Google」(33%)、2位「Twitter」(31% )、3位「Instagram」(24%)、4位「Yahoo!」(12%)となり、TwitterやInstagramといったソーシャルメディアが検索エンジンと並んで利用されていることがわかった。

https://eczine.jp/news/detail/2779

googleやYahoo!などの検索エンジンの検索結果に表示されている情報は、ニュース等の記事を除けば、最新の情報が上位に表示されているわけではありません

その為、直近の新しい情報が欲しい方は、検索エンジンで調べるより、リアルタイムの声が集まるSNSで検索をするんですね。

さらに今後SNSの情報の重要性が大きくなっていくと予想しています。

WordPress(ワードプレス)とTwitterなどのSNSをうまく連動させ活用することが出来れば、より多くの集客に繋がると思います。

SNSは今後集客ツールとして必須になってくるでしょう。

今回はSNSの中から、Twitterの情報をWordPress(ワードプレス)で表示させる為の方法について説明します。

Twitter(ツイッター)の表示方法は2通りある

WordPress(ワードプレス)へのTwitter(ツイッター)の表示方法は、ツイート単体で読み込む方法と、タイムラインを読み込む方法の2通りあります。

  • Twitterの投稿をブログの記事内に表示させる方法
  • Twitterのタイムラインをブログの枠の位置に表示させる方法

それぞれわかりやすく説明していきますね!

Twitterの投稿をブログの記事内に表示させる方法

上記が記事内にTwitterの投稿を単体で読み込み、表示させたものになります。
こちらの設定方法を簡単に説明します。

表示させたいTwitterの単体の投稿を選ぶ

ブログに表示させたいツイッターの投稿を選び、右上の矢印ボタンをクリックします。

出てきたメニューから「ツイートを埋め込む」を選択します。

投稿を選んだら右上の矢印ボタンをクリックし、「ツイートを埋め込む」を選択します。

埋め込み用のコードをコピーする

次のようなページに飛ぶので「copy code」をクリックして埋め込み用のコードをコピーします。

次のようなページに飛ぶので「copy code」をクリックして埋め込み用のコードをコピーします。

カスタムHTMLからコードを貼り付けする

WordPress(ワードプレス)のツイートを表示させたい記事の投稿ページに進みます。
ブロック追加から「フォーマット」>「カスタムHTML」の順でクリックしブロックを挿入します。

WordPress(ワードプレス)の記事投稿ページに戻り、「フォーマット」>「カスタムHTML」の順でクリックしブロックを挿入します。

HTMLの下部のスペースに先ほどコピーしたコードを(Ctrl+C)か右クリックの「貼り付け」から挿入します。

HTMLの下部スペースに先ほどコピーしたコードを貼り付けします。

ブログ記事内にツイートを表示させる方法は以上になります。

また、自分のアカウントだけではなく他の人のツイートもブログに表示させることが出来ます。
ただ、第三者のツイートを自分のブログに使用する際に、お借りするツイッターの方へ一言断りを入れておくことをお勧め致します。

Twitterのタイムラインをブログの枠の位置に表示させる方法

ブログなどによく設置してありるのを見かけますが、Twitterのタイムラインをブログの外枠などに表示させる方法についてご説明します。

ブログなどによく設置してありますが、Twitterのタイムラインをブログの外枠などに表示させる方法についてご説明します。

ユーザー名を確認し、URLを入力する

自分のTwitterのユーザー名はわかりますか?
もし自分のIDがわからない場合は以下の方法で確認が出来ます。

Twitterの「設定とプライバシー」をクリック、上記の2ヵ所に表示されているのがTwitterのIDになります。私のTwitterのIDは「markup0608」となります。

続いて下記のURLから「Twitter Publish」のページを開いてください。

Twitter Publish[外部リンク]

「Enter a Twitter URL」の白い枠の部分に「 https://twitter.com/」と入力し、.comの後に自分のTwitterIDを入力してください。私の場合だと下記のようになります。

「Enter a Twitter URL」の白い枠の部分に「 https://twitter.com/」と入力し、.comの後に自分のTwitterIDを入力してください。私の場合だと下記のようになります。

「 Here are your display options 」という選択肢が出てきますが、左側の「Embedded Timeline」を選んでください。

「 Here are your display options 」という選択肢が出てきますが、左側の「Embedded Timeline」を選んでください。

「Embedded Timeline」 をクリックすると次のような画面が表示されます。
表示方法などに特にこだわりがなければ、「Copy Code」をクリックすると、コードがコピーされます。

細かいレイアウトや色などを設定したい!という方は「set customization options」をクリックしてください。次の項目では設定方法の説明をします。

カスタムしないでデフォルトの設定のまま使いたい方はコチラのリンクから先の記事へ読み飛ばしてください。

タイムライン表示の詳細設定

詳細設定で設定できることについて、項目ごとに説明します。

What size would you like your timeline to be?

タイムラインを表示する、幅と高さを調整することが出来ます。
「Height=高さ」「Width=幅」

How would you like this to look?

タイムラインの色を設定することが出来ます。

What language would you like to display this in?

タイムラインが表示される言語を選択することができます。

ブログの枠にタイムラインを表示させる方法について

ブログの枠にタイムラインを表示させる為にはウィジェットを活用します。

「外観」>「ウィジェット」の順でクリックして進めてください。

twitterのタイムラインを表示したい個所に「カスタムHTML」のウィジェットを挿入し、内容に先ほどコピーしたタグを貼り付けしてください。
保存して設定は完了です。プレビューで表示を確かめてみてください。

以上となります。思ったより簡単だったのではないでしょうか?

今回紹介したTwitterの表示方法を参考に、ブログ集客に生かしたり、ブログの記事のタネにしたりと、自分なりの方法でTwitterをうまく活用してみてください。