twitterのタイムラインとフォローボタンを自分のブログのサイドバーに設置する方法

今回は、上記のような感じで、自分のブログのサイドバーに、Twitterのタイムラインと、「フォーローしてね」のボタンを設置する手順をご紹介します。

最近、Twitterでの作成の仕方が少し変わっていて、戸惑ったので、備忘的に。

設置用のコード生成のためのTwitter公式サービス

しばらく前から、ブログ埋め込み用のコード生成には、WebベースのTwitter公式サービスを利用するようになっています。

行き方はいくつかありますが、ここから直接行く方法と、Twitterにログインした状態で、下記のように「①設定⇒②ウィジェット⇒③新規作成」とたどる方法があります。どちらも違いはありません。

なお、③「新規作成」ボタンを押すと、プロフィール、リストなど、形式を選ぶようなプルダウンが表示されますが、どれを選んでも同じURLに遷移しますので、実質同じです。

↓

上記のようなサイトに移動しましたでしょうか。では、早速、行きますよー。

タイムラインの設置

では最初にタイムラインの設置の仕方をご説明します。

Twitter公式サービスでは、URLまたはユーザ名を指定し、それをブログや様々なところに貼り付けるためのコードを生成するようになっています。そのため、貼り付けたい内容によって、指定する内容が異なりますので、最初にそれを決めましょう。

自分、または特定のユーザのつぶやきをタイムライン形式で表示する場合

多くの場合、この形式で自分のブログに貼ることが多いと思います。こんな感じですね。

その場合は、自分のTweetを表示させた状態のURL「https://twitter.com/<ユーザ名>」か「@<ユーザ名>」を使います。

私であれば、「https://twitter.com/pakun_koji」か「@pakun_koji」です。

それでは、上記のどちらかの値をコピーして、以下の①の部分に貼り付け、右側の矢印ボタンを押します。(②)

すると、表示形式を選択するオプションが表示されますので、左側の「Embedded Timeline」を選択しましょう。(③)

すると、貼り付けた場合のイメージが以下のように表示されます。少し大きく見えて戸惑うかもしれませんが、貼り付けると自動で大きさが調整されるはずですので、ご心配なく。

基本的には、上記の図の①のコードをWordpressのウィジェットや、ブログのデザインにHTMLソースとして貼り付ければOKです。

ただし、もう少し、見た目をカスタマイズしたい場合には、上記の図の②の部分、「set customization options」をクリックすれば、もう少し詳細に、デザインの指定ができます。

たとえば、「Dark」を選ぶと、少し、暗い感じのデザインになりますし、縦横の大きさを指定することも可能です。

リストをタイムライン形式で表示する場合

特定のリストをタイムライン形式で表示したい場合は、そのリストを表示させて、そのURLを使います。以下のような感じになります。

「https://twitter.com/pakun_koji/lists/<リスト名>」ですので、私のカナダ関連のリストだったら「https://twitter.com/pakun_koji/lists/canada」ですね。

フォローミー・ボタンの設置

では次に「フォーローしてね」のボタン(フォローミー・ボタン)の設置の仕方をご説明します。

指定するURLは「https://twitter.com/<ユーザ名>」か「@<ユーザ名>」を使います。

その後、形式の選択で、右側の「Twitter Buttons」を選択します。すると、「Follow」か「Meantion」どちらかを選択する画面になりますので、「Follow」を選択しましょう。

↓