今回は、WordPressへTwitterのツイートを埋め込む方法から、サイドバーやフッターなどのウィジェット内にタイムライン・フォローボタンを表示する方法まで、まとめて解説します。
このページで紹介している内容
TwitterのツイートをWordPressの記事内に埋め込む方法
まずは記事内へのツイート埋め込み方法からです。
今日は一日雨で引きこもり。 #ひきこもり #寒い #眠いいね
— YUU (@webjo_yuu) November 23, 2018
↑これですね。(雨と寒いの苦手)
1.Twitterで埋め込みたいツイートのURLを取得
まずは埋め込みたいツイートのURLを取得します。
ホームでもマイページでもどこでもいいので、埋め込みたいツイートをクリック。
するとポップアップ(ツイートが浮き上がる)表示になり、アドレスバーにツイートのURLが表示されますので、コピーします。
これで、ツイートのURL取得は完了です。
2.記事内にツイートを埋め込む
つづいて、記事内に埋め込む方法です。
記事編集画面で、先ほどのコピーしたURLを貼り付けるだけです。
ビジュアルエディタになっていれば、貼り付けてすぐに表示されます。テキストエディタの場合は、プレビュー又はビジュアルエディタに戻って確認してくださいね。
これで記事内にツイートが埋め込まれましたね！とっても簡単です。
WordPressにTwitterのタイムラインを表示する方法
つづいて、Twitterのタイムラインを表示する方法です。
こちらは記事内にツイートを埋め込む方法に比べるとやや手間ですが、それでも親切な設計になっていますので是非挑戦しましょう。
1.Twitterで自分のURLを取得
今度は記事ではなく自分のURL(マイページ)を取得します。
URLを確認するために、マイページを開きます。
ホーム画面にいたら、自分の名前をクリックすればマイページにいくので、クリックしてください。
マイページで表示されているURLが自分のURLです。
↑マイページのURLをコピーします。
2.Twitterタイムラインの設定
次に埋め込みタイムラインの設定ですが、publish.twitter.com というサイトで設定をします。
上記はTwitter内で表示されるメッセージです。Twitterのサブドメインですので怪しいサイトではないです。
設定とプライバシー → ウィジェット から確認できます。
publish.twitter.com を開きます。
開くと、↑の画面がでますので、先ほどコピーしたマイページのURLを貼り付けて、Enterキーもしくは画面上の「→」を押します。
すると、
↑の表示オプションを選択する画面がでてきますので、「埋め込みタイムライン」をクリックします。
↑これで、タイムライン埋め込み用のURLが発行されました。簡単ですね！
ちなみに「カスタマイズオプションを設定する」を押すと、表示の詳細設定ができます。
細かく設定しなくて良いですが、Height(高さ)は設定した方が良いと思います。何も設定しないと、無駄に長くなりますので。
ちなみに当サイトでは500(px)に設定しています！
埋め込みタイムラインの高さを後から変更したい場合
埋め込んでみてから、やっぱり高さを変えたい！となった時に、再度コードを発行しなおすのは手間ですよね。
1 | <a class="twitter-timeline" data-height="500" href="https://twitter.com/･･･ |
その場合は上記のように、すでに貼り付けてあるコードに「data-height="500"」(500の個所は任意の数字)を足してあげれば簡単に変更できますよ。(前後に半角スペースを忘れずに)
3.WordPressにコードを貼り付ける
埋め込み用のコードを発行し終わったら、あとはWordPressの好きな場所に貼り付けるだけです。
ウィジェットでサイドバーやフッターに貼り付ければ、タイムラインが表示されるようになります。
「テキスト」で貼り付ける際は、ビジュアルエディタではなくテキストエディタにタブ切り替えをしてから貼り付けてくださいね。
Twitterのフォローボタンを設置する
次に、Twitterのフォローボタンの設置方法です。
1.Twitterで自分のURLを取得し、フォローボタンの設定をする
WordPressにTwitterのタイムラインを表示する方法(ページが少し戻ります)
の「1.Twitterで自分のURLを取得」の手順を踏み、
「2.」の設定画面でURLを入力したあと、「Twitterボタン」を選択します。
クリックすると、次のような画面がでますので、お好きなボタンを選択してください。
今回は「フォローボタン」を選択しました。
あとは、必要に応じてカスタマイズを行えばコードの発行完了です。
2.WordPress内の任意の場所にコードを貼り付け
タイムラインを表示する場合と同じく、WordPress内のお好きな場所にコードを貼り付ければ完了です！
このように表示されたでしょうか？
まとめ
今回はWordPressにTwitterのツイートを埋め込む方法から、タイムライン・フォローボタンを表示する方法までご紹介しましたが、無事に設定できたでしょうか？
まだ設置していない方も、とても簡単に設置できるので是非やってみてくださいね！