及川WEB室｜ホームページ制作

HTML、CSS、JavaScript、スマートフォンサイト、Facebookなど、サイト制作に関する事をメモしています。
個人的な備忘録です。
及川WEB室 ホームページ制作HOME
及川WEB室 > Twitter > Twitter[ツイート]ボタン設置・カスタマイズ

Twitter[ツイート]ボタン設置・カスタマイズ

Twitter[ツイート]ボタンを自分のサイトに設置する方法と、ボタンのカスタマイズについてメモしておきます。

特に、ボタンの吹き出し（バルーン、ボックスカウント）の位置を横から上に変更して表示したかった。その方法をメモ。

Twitter[ツイート]ボタン設置・カスタマイズ方法

コードを取得・自分のホームページに設置

  1. ↓こちらでコードを取得できる。
    Twitter / Twitterボタン
    [ボタンのオプション]で、ある程度表示内容をカスタマイズ。
  2. [コードのプレビューを見る]の項目に表示されたHTMLコードをコピーする。
  3. コピーしたコードを、ご自分のホームページのWEBページ内で、ツイートボタンを設置したい個所にペースト。

コードをカスタマイズ

吹き出しをボタンの上部に表示するには、アンカータグ（<a>）のアトリビュートに「data-count="vertical"」を設定する。

ツイートボタン用HTMLコード内のアンカータグ(<a>)にアトリビュート（属性）を設定することによって、色々なカスタマイズが出来る。

こちらのページ Tweet Button | Twitter Developers に、アトリビュート（属性）の説明の表が有る（英語）。

ボックスカウント（吹き出し）については、上記の説明ページの「Positioning the count box」の項目にある。
data-countアトリビュートの値は3つ（「none」「horizontal」「vertical」）ある。
デフォルトは「horizonal」（data-count="horizonal"）。
値を「vertical」（data-count="vertical"）にすると、吹き出しがボタンの上部に表示される。

●アトリビュートに「data-count="vertical"」が設定されている例。 
<a href="https://twitter.com/share" class="twitter-share-button" data-via="hp_design_web" data-lang="ja" data-hashtags="及川WEB室" data-count="vertical">ツイート</a>

Facebook[いいね！]ボタン設置・カスタマイズ方法

Facebook[いいね！]ボタンの設置・カスタマイズ方法についてはこちらを参照してください。
Facebook[いいね！]ボタン設置・カスタマイズ：吹き出し（バルーン,ボックスカウント）の位置を変更
MENU Ξ