WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

SNSシェアボタン-Twitter

Twitter

Twitterボタン | About

Twitterで用意されているボタンを使用する場合

HTML

<a class="twitter-share-button" href="https://twitter.com/share" data-dnt="true">Tweet</a>

「Tweet」という文字がJavaScriptによってシェアボタンに変わる

JS

body内に記入する

<script>
window.twttr=(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);t._e=[];t.ready=function(f){t._e.push(f);};return t;}(document,"script","twitter-wjs"));
</script>

パラメーター

パラメーターを使用するにはaタグにdata属性値で指定する。
data-パラメータ="値"
という形になる。
順不同

パラメーター 内容 デフォルト
url URL 投稿フォームに入力されているアドレスを設定。 -
via Twitterアカウント名 投稿フォームに入力されているTwitterアカウント名を設定。(@不要) -
text 文字 投稿フォームに入力されている文字を設定。 -
related Twitterアカウント名 ユーザーがシェアした後に、そのアカウントのフォローを勧める。(@不要) -
count horizontal、vertical、none ボタンの形 -
lang 2文字の国コード Twitterボタンの表記言語 -
counturl URL urlよりも優先して設定。短縮系をurlで正規のURLをこちらに設定など -
hashtags 文字 ハッシュタグを設定しておくとフォームにあらかじめ入力されている(#不要) -
size mediumまたはlarge ボタンの大きさ medium
dnt trueまたはfalse シェアボタンを通じて送信されたデータをもとにオススメの情報を表示するのに活用することを許可するか否かfalseは許可している状態 false

オリジナルの画像を使用する場合

<a href="https://twitter.com/share?url=シェアするサイトのURL&text=シェア文言&hashtags=ハッシュタグ1,ハッシュタグ2,ハッシュタグ3">画像やテキスト</a>

URLとテキストはエンコードしておく。
ハッシュタグを複数指定する場合はカンマで区切る