スポンサーリンク

Twitter ボタンの設定と設置と幅変更など

2014/2 現在の Twitter ボタンの 設置・設定・幅の変更 などに関して纏めたものです。
筆者のお勧め設定も記載しています。

ボタンの作成と設定

公式サイトでボタンをカスタマイズしコードを取得します。
https://about.twitter.com/ja/resources/buttons

Twitter ボタンの作成と設定 Twitter ボタンの作成と設定

  • 作成するボタンを選択
  • ボタンの設定
  • リアルタイムプレビュー
  • 取得コード

リンクを共有する:設定内容

URLを共有
ページのURLを使う:表示中のページURLを共有
入力:トップページなど指定したURLを共有
シェアしてくれる方は大抵はそのページの内容に対してシェアしてくれるものなので「ページのURLを使う」を選択するべきです
ツイート本文
ページのタイトルを使う:表示中のページタイトルを挿入
入力:指定したタイトルを使う
タイトル欄の文字数を削減したいのであれば指定しても良いですが、ページ毎にしっかり設定されているなら「表示中のページタイトル」を選択するべきです
数を表示
ボタンに表示されるカウント数の有無
ユーザー
ツイート本文に指定したアカウント名を追加
設定すると「@●●さんから」と表示される
ツイッターを見ている感じでは入力しないのが一般的かと思います
推奨
ツイート後、指定したアカウントのフォローを促す
フォロワーが増える切っ掛けになるので設定するべきでしょう
ハッシュタグ
ツイート内容にハッシュタグを入れる
シェアしてくれる人にとって、自動でハッシュタグを追記されるのは好ましくないでしょう
ボタン大
ボタンの大きさ変更
Twitterによるカスタマイズのオプトアウト
ツイッターホーム画面の「おすすめユーザー」欄に表示されたくない場合チェックを付ける
言語設定
ボタンの文字の言語を設定
サイトの訪問者に海外の人が多いなら英語を選択しても良いでしょう

フォローする:設定内容

ユーザー
自分のユーザー名を入力
ユーザー名を表示
ボタンにユーザー名を表示する場合はチェックする
ボタン大
ボタンの大きさ変更
Twitterによるカスタマイズのオプトアウト
ツイッターホーム画面の「おすすめユーザー」欄に表示されたくない場合チェックを付ける
言語設定
ボタンの文字の言語を設定

シェア例

以下の内容で設定したボタンでシェアした場合の、入力ウィンドウと投稿された表示はこのようになります。
  • 「ユーザー」にユーザー名を入力
  • 「ハッシュタグ」に「#twitter」と入力
  • 「URLを共有」はページのURL
  • 「ツイート本文」はページのタイトル

Twitter シェア画面 Twitter シェア画面

  • 投稿者の情報
  • ページのタイトル
  • ページのURL
  • ハッシュタグ
  • ユーザー
  • 投稿者が入力した文章

取得したコードを貼り付け、ボタンを設置

リンク部分を HTML の <body>~</body> 間の設置したい場所に貼り付け。

<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja" data-count="none">ツイート</a>

javascript の貼り付け。
HTML に貼り付ける場合は何処でも良いです。
外部 JS に貼り付ける場合は先頭と末尾の <script></script> を削除して貼り付けます。
フォローボタンと共通であるため、両方設置する際は一つ分の JS コードを貼り付けるだけで良いです。

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';
fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

ボタンの幅を変更

ツイッターのボタンはデフォルトでは無駄な余白が大きく、ボタンを並べた際にレイアウトが酷い状態になってしまいます。
そこで css で幅を制御します。
css に以下のコードを追記し、赤文字の部分を好みの幅に変更して下さい。

ツイートボタン
iframe.twitter-share-button {
width:70px !important;
}

フォローボタン
iframe.twitter-follow-button {
width:95px !important;
}

スポンサーリンク
sns1 RSS Feedly はてな Line Tweet FaceBook sns2 Follow Follow none none none none
スポンサーリンク

コメント

_____________________________________________________________________________________________________
net PV