【Cocoon】サイドバーにTwitterのタイムラインを埋め込む方法

twitter ブログ
記事内に広告が含まれています。

WordPressのサイドバーにTwitterのタイムライン・個別Tweetを表示する方法をご紹介します。

Twitterのタイムラインのコード取得

Twitter Publish

Twitter Publishにアクセスしましょう。(アカウント作成など不要です!)

ブログにTwitterのタイムラインを表示するためのコードをここから取得します。

TwitterのアカウントURLを入力

Twitter Publishにアクセスしたら検索欄にご自身のTwitterのURLを入力してください。

入力したら右側の矢印を押します。

twitter_publish_1

ちなみにTwitterのアカウントURLはご自身のアカウントの画面を開いたときのURLです。

個別Tweetを埋め込みたいときは該当のTweetを開いたときのURLです。

タイムライン 個別Tweet
twitter_publish_2 twitter_publish_11

オプションを選択

矢印を押すと、オプションを選択する画面になります。

左側の「Embedded Timeline」を押します。

twitter_publish_3

「set customization options」を押します。

twitter_publish_4

高さ(heigths)を「600」にしておきます。こちらは後からでも変更できます。

変更したら「update」を押します。

twitter_publish_5

コードをコピー

埋め込み用のコードが生成されるのでコピーします。

これでTwitterPublish側でやることは終了です。

 

twitter_publish_6

サイドバーにTwitterのタイムラインを埋め込む

サイドバーにカスタムHTMLを追加

「外観」「ウィジェット」を押します。

そして「カスタムHTML」を開き、サイドバーを選択した状態で「ウィジェットを追加」を押します。

twitter_publish_7

カスタムHTMLにTwitterのコードを貼り付け

サイドバーにカスタムHTMLが追加されています。

タイトルに「Twitter」を入力 (実際に表示されるタイトルなので表示したいタイトルを入力してください。)

内容に先ほどTwitterPublishで生成したコードを添付します。

そして「保存」を押します。

これでサイドバーにTwitterのタイムラインが表示されます。

twitter_publish_8

高さを調整

表示されたTwitterのタイムラインを確認しましょう。

もし「高さが足りない」「もう少し小さくしたい」という場合は、先程のカスタムHTMLから高さを調整しましょう。

「data-height」の高さを変更することで高さを調整できます。

私の場合は「400」だと投稿が見切れてしまったので、「600」に設定しました。

twitter_publish_10

コメント