とっても簡単!twitterシェアボタンをカスタマイズしてみる

とっても簡単!twitterシェアボタンをカスタマイズしてみる

こんにちは、ちゃんけいです。

今回は簡単にできるtweetボタンの設定をしていきたいと思います。

それではいってみましょう!

tweetボタンを表示する

こちらのように記述するだけで問題なく表示できます!

え?これだけ?と思った方、本当にこれだけです。

See the Pen twitterボタンカスタマイズ by Chankei (@Chankei) on CodePen.0

簡単にソースを説明しますと、

  • text= ツイートに表示される文言
  • hashtags= ツイートに表示されるハッシュタグ
  • url= ツイートに表示されるurl

今回使用しているのはこれだけになります。

さらに詳しい内容に関しては公式のTwitter Devlopper Documentをごらんください。

https://dev.twitter.com/web/tweet-button

ちなみに、今回紹介した状態だと別ウィンドウをポップアップしてツイートする形になります。

別タブで!という方は<script></script>を外してみてください。

まとめ

とっても簡単でしたね!でも、Web製作者なら知っておきたい項目の一つです。

他にもFacebookやLINEなどSNSシェアはとても重要なボタンなのでオリジナルカスタマイズできるととても便利です。

今回は短いですが、この辺で。ちゃんけいでした。