ツイッターボタンの設置

Twitterボタンの設置方法についてのまとめ 主要SNSサイトのソーシャルボタン-その2

ツイッターボタンの設置方法とボタンのカスタマイズ方法についてご紹介しています。
投稿日: 2012/02/24
最終更新日: 2015/12/29
 

Google+1ボタンの設置方法の記事を書き終えたので
次は、ツイッターのソーシャルボタンの設置について書いていこうと思います!

Google+1のソーシャルボタンの設置については下記からご覧頂けます。
http://www.promeshi.com/archives/352

作成ページがあるので行ってみよう!

Google+にもあったように、ツイッターにもソーシャルボタン作成ページがあります。

Twitterボタン:
https://twitter.com/about/resources/buttons#tweet

ツイッターボタン

まず、ボタンを選択して下さい。
今回のボタンはリンクの共有になるので左上のラジオボタンにチェックして下さい。

ツイッターボタンオプション

続いてボタンのオプション設定です。基本的には触る必要はありませんが、「ユーザー」が自分のアカウントになっていることを確認して下さい。

画面に従って設定して、左側にあるソースコードを表示したいページに埋め込めば終了です。

例:

<a href="https://twitter.com/share" class="twitter-share-button" 
data-via="moreiic" 
data-lang="ja
">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

上のソースコードが出来上がりです。

簡単でしょ?でも終わりじゃないんです

ボタンのデザインが1つだけしかない。

ツイッターのボタンはいくつか種類があるのをご存知でしょうか?



上から、ボタンのみ・ボタン&数字・バルーン型。
でもツイッターボタン作成ページでは「ボタンのみ or ボタン&数字」しか選べません。

バルーン型がいい!バルーン!バルーン!(゚Д゚)となる人もいると思いますので
ついでに設定方法もご紹介します!

ソースいじっちゃうぞ!

設定が終わったソースコードを見てみると何やらaタグに要素を追加すると
どうにかできそうな雰囲気が漂っています。

探してみると、下記の要素をいじって色々出来るようです!
いじれる要素は下記です。

<a href="https://twitter.com/share" class="twitter-share-button"
data-url=""
data-via=""
data-text=""
data-related=""
data-count=""
data-lang=""
data-counturl=""
data-hashtags=""
data-size=""
>ツイート</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

このdataで始まる部分の記述方法で修正&設定が可能です。
各要素の解説です。

data-url → ツイートして欲しいURL
data-via → あなたのアカウント@なしで
data-text → デフォルトのつぶやき文
data-related →
関連アカウント。例:moreiic:デブデザイナー
[ カンマ区切りで2つまで設定可能 ]
data-count → ボタンのデザイン(none/horizonatal/vertical)
(noneはボタンのみ。horizonatalはボタンと数字。verticalはバルーン)
data-lang → 言語。日本語なら(ja)
data-counturl → 短縮する前のURL。
(短縮すると正常にカウントできない可能性があるため)
data-hashtags → ハッシュタグ
data-size → サイズ。デカイのが良ければlarge

必要ないものは省いてしまって大丈夫です!

ツイートして欲しいURLについては、ページごとに設定する必要があるので下記の記事を参考にして下さい!

現在表示中のページURLを取得する方法!PHPで取得する方法とWordPressで取得する方法!http://www.promeshi.com/archives/376

もし、英語のページでもよければ解説ページがあります。
https://dev.twitter.com/docs/tweet-button

ご参考まで~( ´∀`)つ ミ

 
最新情報をお届けします
筆者のご紹介
角政典@moreiic
真性のお家大好きフリーランスです。プログラムよりご飯の方が断然好き!博多出身のデブデザイナー。インドアだけど遊んでくれる人募集中!
Twitter / google+
よく検索されてる記事