オリジナルのSNSシェアボタンを設置する
-
-
Momoko Honda
Design / Coding
サイト制作をするとき、「シェアボタン設置してね」と言われること、それなりにあると思います。
例えばFacebookの場合は、こちらにアクセスして手順に沿って設定を進めると
こんな感じで設置するボタンを選びつつ、コピペで使えるコードを生成できます。
しかし、サイトのデザインによってはトンマナに合ったオリジナルのボタンを設置したいことも多いですよね。
今回はそんなときに使えるaタグで設置するSNSボタンのコードを紹介します。
目次
まずは王道のFacebookから。
<a href="http://www.facebook.com/share.php?u={URL}" rel="noopener noreferrer" target="_blank">リンクテキスト</a>実際の動きは下記で確認できます。
Twitterの基本のシェアボタンはこちらです。
<a href="https://twiter.com/share?url={URL}">リンクテキスト</a>さらに、Twitterにはパラメーターを付与することで、様々な要素を追記することができます。
Twitterシェアボタンのパラメーター
| url | シェアするURLを入れます。日本語URLの場合はURLエンコードしたり、短縮URLを使った方がいいかも。 |
|---|---|
| text | 自由なテキストが設定できます。タイトルを入れておく場合が多い。 |
| hashtags | ツイートにハッシュタグを付与できます。カンマ区切りで複数のハッシュタグを設定することも可能。 |
| via | ツイートに「@◯◯さんから」という表示を追加できます。公式アカウントなどを設定しておくと、ツイートされた時に見つけやすいので良い。 |
| related | フォローを促したいアカウントがある場合に設定する項目です。設定しておくと、ツイート後に設定したアカウントをレコメンドしてくれます。 |
パラメーターを全て入れると、このようなコードになります。
<a href="https://twitter.com/share?url={URL}&text={テキスト}&hashtags={ハッシュタグ},{ハッシュタグ2}&via={Twitter ID}&related={Twitter ID}" rel="noopener noreferrer" target="_blank">リンクテキスト</a>そして実際の動きはこちら。
はてなブックマーク
TwitterやFacebookに比べるとかなりターゲット層が狭いですが、作成しているページがIT系や経済系の内容の場合は設置しておくといいでしょう。
<a href="http://b.hatena.ne.jp/add?mode=confirm&url={URL}&title={ページのタイトル}" rel="noopener noreferrer" target="_blank" >リンクテキスト</a>実際の動きはこちら。
Pocketは「あとで読む」を気軽にできるサービスです。こちらもターゲットは狭いので優先順位は低いですが、余裕がある場合は設置すると他のSNSとサービスのカラーが異なるため、少し華やかな印象になるのでお勧めです。
<a href="http://getpocket.com/edit?url={URL}&title={ページのタイトル}" rel="nofollow" rel="noopener noreferrer" target="_blank">リンクテキスト</a>実際の動きはこちら。
LINE
今や日本人のほとんどが使っているLINE。飲食店や観光地などBtoCのサービスの場合は友人間で共有をする可能性が高いため、設置の優先順位は高くなります。
<a href="https://social-plugins.line.me/lineit/share?url={URL}; ?>" rel="noopener noreferrer" target="_blank">リンクテキスト</a>実際の動きはこちら。
むすび
今回は現時点(2020/06/19)での各種SNSシェアボタンをオリジナルで設定する方法をお伝えしました！
とはいえ公式が随時仕様を変更してくるので、このソースが未来永劫つかえるわけではありません。
なので、オリジナルのボタンを設置する際はSNS自体にアップデートなどがないか、必ずチェックをしてから実装を進めていただければ幸いです。
