Begin! TwitterTwitterをはじめよう！

ブログにツイートボタンを設置しよう

ここでは Twitter で配布されている ブログパーツを使ってツイートボタンを設置したり、ツイートを流すことができるウィジェットを利用する方法をご紹介します。

Twitterで配布されているブログパーツ

Twitterの「関連情報」ページには、ブログなどで使えるパーツが公開されています。 これらを使うことで自分のページにツイートを流したり、URL をツイートするボタンを設置したりすることができます。

Twitter のロゴや名称を利用する際のガイドライン

Twitter ではロゴや画像を利用したり、Twitter に関連するサービスや Web サイト、出版物を作成する場合のガイドラインが設けられています。

Twitter登録商標の利用ガイドライン

このページの内容を踏まえた上で、利用するようにしましょう。

↑目次へ

ツイートボタン

ツイートボタンはブログ上からその URL を含んだツイートを投稿できるボタンです。ツイートされた数も表示させることができます。

ログインした状態でツイートボタンを開くと、いくつかの設定を行ってボタンを作成できます。

配置例

このようなボタンが作成できます。

Tweet

オリジナルのボタン

こちらのドキュメント(英語)を参考しながら HTML を直接記述すれば、オリジナルのボタンを作成する事が可能です。 具体的には、https://twitter.com/share へのリンクに以下のパラメータを追加してリンクを作成します。

パラメータ名	値	スクリプトのパラメータ名
url	ツイートする URL	data-url
via	URL と関連する Twitter ユーザー名(via @[ユーザー名]が追加されます)	data-via
text	デフォルトのツイート	data-text
related	関連のあるアカウント(ツイート後にオススメユーザーとして表示されます)	data-related

(url パラメータ以外は省略可能です。)

オリジナルリンクの例

たとえば

https://twitter.com/share?url=https://www.greenspace.info/twitter/&text=%E3%83%84%E3%82%A4%E3%83%83%E3%82%BF%E3%83%BC%E3%82%92%E3%81%AF%E3%81%98%E3%82%81%E3%82%88%E3%81%86%EF%BC%81&via=begin_tw

という URL でリンクを作成すると、以下のように表示されます。

このページをツイートする

↑目次へ

フォローボタン

フォローボタンを利用すると、ブログ上から特定のユーザーへのリンクを配置してフォローを促す事ができます。

Twitter にログインした状態でTwitter ボタンのページを開くと、いくつかのデザインの中から配置用の HTML を取得できます。

配置例

このようなボタンが作成できます。

↑目次へ

ウィジェット

ウィジェットは、特定のアカウントやキーワードが含まれるツイートを表示させるブログパーツです。ウィジェットページからいくつかの設定を行うだけで簡単に作成する事がで来ます。

選択できるのは以下の 4タイプです。

• 特定のユーザーのプロフィール(ツイート)
• 検索結果
• お気に入り
• リスト

ウィザード形式でタイトルの文字列や配色を設定してウィジェットを作る事ができます。

設置例

@begin_twアカウントのタイムラインを流すウィジェットの例です。このようなパーツが簡単に作成できます。

カスタマイズ

ページごとに異なるツイートを表示させる

たとえばブログの各ページのツイートを知りたい、ネットショップなどを運営していて各商品の結果を表示させたい、といった場合には、 ウィジェットのコードの一部を動的に(ページごとに異なる値を)指定することで、ページにあったツイートを表示させることができます。

まずは検索ウィジェットのコードを取得して、コードの中にある search の値をページごとに異なる値 (URLなど) で出力させるようにします。

<script src="https://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'search',
  search: '[キーワード]', // ←ここの値をページごとに変える。
  interval: 6000,
  title: 'It\'s a double rainbow',
  subject: 'Across the sky',
  width: 250,
  height: 300,
  theme: {
    shell: {
      background: '#8ec1da',
      color: '#ffffff'
    },
    tweets: {
      background: '#ffffff',
      color: '#444444',
      links: '#1985b5'
    }
  },
  features: {
    scrollbar: false,
    loop: true,
    live: true,
    hashtags: true,
    timestamp: true,
    avatars: true,
    toptweets: true,
    behavior: 'default'
  }
}).render().start();
</script>

動的なコンテンツにブログパーツを表示させる

少し技術的な話になりますが、ウィジェットの HTML は script タグのロード時に生成(document.write) されるため、 このままだとページがロードされた後に JavaScript などを使って読み込まれたコンテンツ (DOM) 上に表示させる事が困難です。 ですが、ウィジェットには動的に HTML を生成する機能が備わっており、それを使うことでページのロードが完了した後でもウィジェットを任意のタイミングで動的に生成することができます。

具体的には

1. widget.js だけをあらかじめ読み込んでおく。 ( は先に読み込まれるようにする)
2. TWTR.Widget を new するコードを任意のタイミングで実行する。このとき、 TWTR.widget()の引数に埋め込み先となる id を文字列で指定する。

function loadWidget(){
  new TWTR.Widget({
    version: 2,
    id: 'widget', // ← id を追加
    type: 'profile',
    rpp: 4,
    interval: 6000,
    width: 250,
    height: 300,
    theme: {
      shell: {
        background: '#333333',
        color: '#ffffff'
      },
      tweets: {
        background: '#000000',
        color: '#ffffff',
        links: '#4aed05'
      }
    },
    features: {
      scrollbar: false,
      loop: false,
      live: false,
      hashtags: true,
      timestamp: true,
      avatars: false,
      behavior: 'all'
    }
  }).render().setUser('begin_tw').start();
}

これで動的なコンテンツにも ウィジェットを表示させる事ができるようになります。

ホームへ

GreenSpace

© Hajime Kobayashi