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

Twitter Publish

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

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

TwitterのアカウントURLを入力

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

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

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

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

タイムライン	個別Tweet

オプションを選択

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

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

「set customization options」を押します。

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

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

コードをコピー

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

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

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

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

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

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

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

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

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

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

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

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

高さを調整

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

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

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

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

The post 【Cocoon】サイドバーにTwitterのタイムラインを埋め込む方法 first appeared on shungo blog.