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」を選択しましょう。
↓