【初心者必見】ウィジェットと記事内にTwitterのタイムラインを埋め込む方法

こんにちは、かりーむです。

 

みなさん一度は、Twitterのツイートが埋め込まれている記事を見たことがあるのではないでしょうか。

 

⬆︎こういうやつ。

 

ツイートを記事内に埋め込むことには、以下のようなメリットがあります。

  • 自分がどんなツイートをしているか読者に伝えられる
  • Twitter上での評判や反響をアピールすることができる
  • 記事の内容と関連するツイートを載せることでユーザビリティが上がる
  • ブログ経由でツイッターをフォローしてもらえる

記事を見た読者も、どんな人がこの記事を書いたのかがより鮮明になり、記事の内容に関するツイートが埋め込まれていれば、より説得力を持たせられます

またブログのヘッダーやサイドバーに自分のアカウントのタイムラインを載せることで、日ごろ自分がどういう発信をしているのか、読者に伝えることもできます。

 

そこで今回は

  1. ツイッターのタイムラインをウィジェットに埋め込む方法
  2. 特定のツイートを記事内に埋め込む方法

の二つを解説していきます。

 

ウィジェットに埋め込む

埋め込みコードを取得する

まずはこちらのページ(https://publish.twitter.com/#)に飛び、

埋め込みたいツイートTLのアカウントURLを入力します。

TwitterのアカウントURLは以下をコピペして使ってください。

https://twitter.com/アカウント名

ぼくなら、<https://twitter.com/kareem_riah96>となります。

 

アカウントURLを入力すると、タイムラインの表示スタイルを選択する画面が出てくるので、「Embedded Timeline」をクリックします。

ちなみに「Embed」は「埋め込む」という意味の英単語です。

 

「Embedded Timeline」をクリックすると、次のような画面が表示されるので、表示された埋め込みコードをコピーします。

この時点でブログのウィジェットにコピペしてもいいのですが、デフォルトのままだとタイムラインが長くなりすぎて、サイトデザインが崩れる可能性があります

なので次に詳細設定をして、適切な表示になるように設定していきましょう。

 

詳細カスタマイズをする

「set customization options」をクリックすると詳細設定の項目が表示されます。

①②表示するタイムラインの高さ・幅

タイムラインをフッターやサイドバーに表示させるなら、「高さ400px」×「幅320px」がちょうどいいサイズ感に収まります。

ぼくのブログも同じ設定にしています。

 

③テーマカラーの選択

「Light」と「Dark」の二択です。

「Light」なら背景が白のまま、「Dark」にすると背景が黒色になります。

背景が黒色というのもなかなか悪くないですね笑

そこはお好みで選びましょう。

 

④リンクの色の選択

リンク色は6種類用意されていますが、自分で好きな色をカラーコードを指定しても大丈夫です。

カラーコード一覧サイトはこちらを参照してください。

 

⑤言語設定

デフォルトのまま「Automatic」にしておけば大丈夫です。

 

 

 

ここまで設定できたら「Update」をクリックすれば自動で埋め込みコードがコピーされます

コピーされたら、WordPressの管理画面から「外観」→「ウィジェット」に行き、「カスタムHTML」にコピーした埋め込みコードを貼りつけてください。

 

ぼくの場合は、ヘッダーにタイムラインを表示させたかったので、このように埋め込んで完成形となりました。

 

記事内に埋め込む

次にタイムラインではなく、特定のツイートを記事内に埋め込む方法を解説します。

 

⬇︎こういうやつですね。

 

ツイートのURLをコピー

埋め込みたいツイートの左上にあるメニューバーをクリックしてください。

 

以下のようなメニュー項目が表示されるので、「ツイートを埋め込む」をクリック。

すると別リンクが開き、先ほどと同じように埋め込みコードが表示されるので、あとはそれをコピーして記事内に貼り付ければ完成です。

ツイートの埋め込みコードはビジュアルエディタではなく、必ずテキストエディタに貼り付けてください。

 

 

 

Twitterとブログの連携をうまく取れれば、記事はよりバラエティあるものになり、ユーザビリティ向上にもつながります。

ブログ運営とSNS運用の紐付けはマネタイズとしても非常に重要なので、今回ご紹介したツイートの埋め込み方法はぜひ覚えておきましょう。

 

 

それではまた。