ブログでは、参考資料やSNSを引用することがあります。
Twitterを載せたい、そんなときがあるよね。
ここでは、WordPressブログの記事内とウィジェットにTwitterのツイートとタイムラインを埋めこむ方法を紹介します。
だれでも簡単にできる方法です。
WordPressブログにTwitterを埋め込む方法【記事内とウィジェット】
WordPress（ワードプレス）にTwitter（ツイッター）を埋めこんでみましょう。
- 記事内にツイートを埋めこむ
- ブログ内にタイムラインを埋めこむ
それぞれ分けて方法を紹介するよ。
ブログの記事内にTwitterのツイートを埋め込む2つの方法
さっそくツイートを埋めこみましょう。
WordPressでツイートを埋めこむ方法は2つです。
- WordPress限定の方法：URLのコピペ
- 一般的な方法：コードのコピペ
WordPress限定の方法：URLのコピペで埋め込み
WordPressでしか利用できない方法が、ツイートURLのコピペです。
まずは、Twitterをひらきましょう。
次に、埋めこみたいツイートをひらいてください。
記事のURLが下の画像にある赤枠部分で示された箇所に表示されています。
ツイートのURL
このツイートのURLをWordPressの記事に貼り付けてください。
ビジュアルモードで貼り付けてO.K.だよ。
リライトはツールを正しく活用しましょう。
・GRC
・GSC
・キーワードプランナー
あるビッグワードの検索順位の変動を見てください。
GRCを導入し徹底的にリライトを実践した2019年12月13日からの変化です。
・88位⇒12位
集中リライトした1週間で大きく変化し、その後安定しました。#ブログ初心者 pic.twitter.com/muD3tLe9Sc— ひーちゃん@認定ランサー (@hichanblogger) January 24, 2020
WordPress限定の方法を使って、Twitterのツイートを埋めこめました。
WordPressなら、この方法がかんたんだよね。
一般的な方法：コードのコピペで埋め込み
一般的な方法として、Twitterコードのコピペをして埋めこみましょう。
まずは、Twitterをひらいてください。
</>ツイートを埋め込む
埋めこみたいツイートの右上から［</>ツイートを埋め込む］を選びます。
新しいタブにツイートが表示されるので、ページ内の Copy Code をクリックしてください。
それからWordPressの記事に貼り付けましょう。
この方法は、ビジュアルモードではなくテキストモードに切り替えないとだめだよ。
こちらは、リライトによる順位上昇が弱いですが、リライト後に順位そのものは安定してきました。
狙っているKWと記事の内容が近づいたからと思われます。これまで検索ユーザーの意図とズレていたものを正しくリライトしていくことで安定させられました。
さらにリライトすればもう1段階上がるはず。 pic.twitter.com/kGngPIkBDC— ひーちゃん@認定ランサー (@hichanblogger) January 24, 2020
一般的な方法を使って、ツイートを埋め込みました。
ひと手間かかるよね。
応用編：ツイートのダークモード化
ツイートを貼り付けるときにダークモードを選べます。
ダークモードはカッコいいね。
ツイートを選んだら、 set customization options とあるので、クリックしてください。
LightとDark
LightとDarkを選べるので、Darkを選択し、コードをコピーしましょう。
貼り付けは、テキストモードじゃなきゃだめだよ。
GRC/GSC/キーワードプランナー等を使えばより効果の高いリライトができます。
とはいえツールは使わなければ無意味です。そして使い方で効果に差がでます。
おなじ道具を使っても職人と素人で、品質や美しさがまったく違うのと同じです。
…と #ブログ初心者 だった2年前の自分に伝えられたらな（笑）— ひーちゃん@認定ランサー (@hichanblogger) January 24, 2020
貼り付けてみるとダークモードのツイートは目立ちますね。
ブログのウィジェットにTwitterのタイムラインを埋め込む
ブログのウィジェットにTwitterのタイムラインを埋めこみましょう。
このブログでもサイドバーに埋めこんでいるよ。
Twitter Publishにアクセスしてください。
Twitter Publish
表示された画面の枠内に、TwitterアカウントのURLを入力します。
TwitterアカウントのURLを入力後に、右側の→をクリックしましょう。
左がタイムライン
表示された画面の左側がタイムラインです。［Embedded Timeline］をクリックします。
タイムラインのプレビューが表示されました。
この状態だとかなり縦長のタイムラインになるから、調整してもいいよ。方法は次の見出しで紹介するね。
ここで、 Copy Code をクリックしてコピーしましょう。
タイムラインのコードをコピーしたら、WordPressにうつり［外観］の［ウィジェット］にすすんでください。
WordPressのウィジェット
ウィジェットの［テキスト］を選び、［サイドバー］など任意の場所において、コードをペーストしましょう。
最後に、 保存 します。
これで、Twitterのタイムラインが表示されました。
おつかれさま～
タイムラインの高さを調整する
タイムラインの高さを調整しましょう。
タイムラインのプレビューにある、 set customization options をクリックしてください。
タイムラインの高さ調整
画像で示した赤枠内はheightsの設定ができます。
任意の高さを入力してください。
スマホのピクセルよりも小さい数値、300～400pxでいいと思うよ。
高さの調整をスマホで確認しながらするとよいでしょう。
設定が完了したら、 Update をクリックしてください。
これで高さ調整はできましたので、さきほど説明した手順でコードをコピーしWordPresからウィジェットを挿入しましょう。
まとめ：WordPressにTwitterを埋め込んでブログをもっと楽しく
Twitterの埋め込み
WordPressにTwitterを埋め込むとブログの幅がひろがり、もっと楽しくなるはずです。
Twitterのツイートとタイムラインの埋め込みができます。
あなたのブログにもタイムラインを入れて、Twitterと連携させてみてね。