公式サイトhttps://dev.twitter.com/web/tweet-buttonから基本のタグを確認

公式サイトhttps://dev.twitter.com/web/tweet-buttonから基本のタグを確認します。下記が基本のタグです。

<a class="twitter-share-button" href="https://twitter.com/intent/tweet">Tweet</a>

今回は見た目を調整して行くのでaタグのclass=”twitter-share-button”必要ないので消去して、自分の好きなclass名をaタグに指定します。twitterでもbtnでもbuttonでもなんでもOKです。

今回はtwitterと指定class名を指定したと仮定して進めていきます。

<a class="twitter" href="https://twitter.com/intent/tweet">Tweet</a>

CSS（スタイルシート）で見た目を調整

classのtwitterに見た目を調整するスタイルを指定していきます。

.twitter {
  background-color: #55acee;
  border: 2px solid #55acee;
  border-radius: 0;
  color: #fff;
  padding:4px 32px;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.twitter:hover {
  background-color: #fff;
  color: #55acee;
}

下記のようなボタンが作成されます。

丸ボタンがよければborder-radius: 0;のところに好きな数値を入れると丸まります。20pxを指定すると下記のようになります。

これでCSSで見た目が作成できました。

href属性を指定

href属性にhttps://twitter.com/intent/tweetを追加。その際にいくつかクエリパラメータを指定して、シェアする内容を指定できます。

今回は、下記の4個を指定します。

<a class="twitter" href="https://twitter.com/intent/tweet?text=TwitterのシェアボタンをCSS利用してオリジナルのデザインにする方法&url=https://level-up-notebook.com/css/1214/&via=fe2_lt&hashtags=css,twitter" target="_blank">twitter</a>

これでスクリプトのhttps://platform.twitter.com/widgets.jsを読み込むと小さい別ウインドウでtwitterが開かれるようになります。（最新のchromeで動作を確認）