及川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 Ξ