ツイッターの共有ボタンのカスタム方法
Twitterで共有のボタンをカスタムする方法です。
<a href="https://twiter.com/share?url=https://ranking-up.net/">リンクテキスト</a>
↑
超シンプルなテキストリンクの書き方です。
こちらのカスタムを行ってみましょう。
<a href="https://twitter.com/share?
url={ページのURL}&
via={Twitter ID}&
related={Twitter ID}&
hashtags=hashtag,hashtag2&
text=リンクテキスト"
rel="nofollow"
target="_blank">リンクテキスト</a>
- url：ページのURLです。
- via：＠～さんから という表示を追加したい時に追加します。
- hashtags：ツイートのハッシュタグ、いわゆる#です。複数指定したい場合はカンマ区切りで書きます。
- text：ツイートにデフォルトで入れるテキストです。よくある診断テストなどでPHPやjavascriptで制御して「〇〇さんは▲▲点です」のような表示結果の変更にも使えます。
- related：ツイートした後、フォローを促すアカウントを設定できます。公式アカウントがあるなら指定しておきましょう。
また、ワードプレスなら固有のget_the_title()やget_the_permalink()を使ってテキストやURLを簡単に変更できます。
<a href="https://twitter.com/share?
url=<?php echo get_the_permalink(); ?>&
via={Twitter ID}&
related={Twitter ID}&
hashtags=web,webdesign&
text=<?php echo get_the_title(); ?>"
rel="nofollow"
target="_blank">Tweet</a>
ボタン画像もカスタムして、リンクさせてみましょう。
オリジナルでかっこいい共有ボタンの出来上がりです。