Twitterのシェアボタンを設置したい
Twitterのシェアボタンやツイートボタンなどいわゆるソーシャルプラグインを自分のサイトやブログに設置したいという方向けの記事なります。
Twitterへのシェアボタンの作成の仕方やオリジナルの画像は使えるのか、タイトルやURLなどの設定の仕方をご紹介いたします。
ぜひTwitterのシェアボタンについてマスターして、思い通りのシェアボタンを設置しましょう。
Twitterのシェアボタンの設置方法
Twitterのシェアボタンの設置方法をご紹介していきます。公式のシェアボタンのhtmlタグを発行してのやり方と、オリジナルの画像やテキストを使ってのやり方の2種類をご紹介していきます。
公式の機能を使ったシェアボタンの設置方法
TwitterのシェアボタンはTwitter公式の以下のサイトから生成することができます。最終的にはhtmlタグとして、コピペすることができます。
サイトにアクセスすると、画像のような選択肢が登場します。
Twitterのシェアボタンを生成するには「Twitter Buttons」を選択しましょう。
シェアボタンのサイズを選択します。ここでは一番左を選択します。
すると、すぐにTwitterのシェアボタンのhtmlタグが出力されます。
ここでカスタマイズオプションを見てみましょう。
カスタマイズオプションでは、発すタグや、ボタンのサイズの変更、文言など細かい指定が可能となっています。
必要に応じて編集をして、「Update」ボタンで適用しましょう。
最後にhtmlタグが書かれている箇所をクリックすると、自動でクリップボードにコピーされます。
あとはこのタグを設置すれば、Twitterのシェアボタンを設置することができます。
ちなみに形式としては以下のようになります。（コピペできます）
大きくわけて
- scriptタグの部分
- aタグで実際にボタンが表示される部分
上記のTwitterの公式の機能ではツイートボタンやタイムライン、ツイートの埋込みなどにも対応しています。シェアボタンの機能もぜひ使ってみましょう。
オリジナルの画像やテキストを使ってのシェアボタンの設置方法
Twitterは特定のリンク先であれば、シェアをする機能が働きます。
つまりこちらでhtmlタグのaタグでリンク先をそのURLにしておけば、こちらが用意したデザインのシェアボタンでも問題なく動作します。
その特定のURLは下記となります。（他にもオプションがありますが、シンプルな例）
- url: TwitterでシェアするURL
- text: 記事ページのタイトルなど文言部分
http://twitter.com/share?url=シェアするURL&text=文言
こちらのURLを指定して、あとはaタグで独自のpngやjpgなどの画像を使ってシェアボタンをデザインしましょう。aタグのhref属性に上記のURLを指定して、シェアボタンを完成させ設置しましょう。
まとめ
Twitterのシェアボタンの設置方法についてまとめました。公式の機能を使ってもいいですが、オリジナルのデザインにしたいときなどは自分で画像を用意したりデザインをしてシェアボタンを作成しましょう。
またURLをシェアした場合はTwitterカードという仕組みでTwitter上での表示をリッチにできます。Twitterカードについては下記の記事を参考にしてみて下さい。
