こんにちは、ナカムラです。
今回はSNSシェアボタンの設置方法について書こうと思います。
（この記事は2021年1月27日時点での情報になります。2023年9月22日：Twitterの部分に追記しました。）
よく設置するTwitter、Facebook、LINEについてです。
オリジナルのスタイルで設置する方法と、
シェアの際に本文やハッシュタグの追加、改行したい時はどうするかなど、
いろいろ調べながらやったので備忘録として残します。
※シェアボタンが機能するのに必要なHTMLの書き方についてのみです。
ボタンのスタイルは通常通りスタイルシートや画像で自由に作れるので、ここでは説明しません。
target属性などは必要に応じて追加してください。
Facebook：シェアボタン
自分のアカウントにURLを投稿する機能です。
公式サイトのプラグインを使う場合
下記のページでコードを発行し、HTMLへ書き込みます。
手順についてはページ内で説明されています。
シェアボタン - ソーシャルプラグイン - ドキュメンテーション - Meta for Developers
オリジナルスタイルで設置する場合
・テキスト追加：不可
・ハッシュタグ追加：不可
OGPの情報が掲載されます。
OGPの設定内容はシェアデバッカーで確認できます。
※サーバーに上がっていないと確認できません。
シェアデバッガー - Meta for Developers
<a href="http://www.facebook.com/share.php?u={{URL}}">シェアする</a>
{{URL}}のところにシェアさせたいURLを記入します。
※{{}}は読みやすくするために入れたもので実際には不要です。
※テキストの追加は&t=というパラメーターがあったようですが、機能してくれませんでした。
Twitter：ツイートするボタン
自分のアカウントに投稿する機能です。
公式サイトのプラグインを使う場合
下記のページでコードを発行し、HTMLへ書き込みます。
「set customization options.」をクリックするとURLの他にハッシュタグの追加など設定できます。
Twitter Publish
オリジナルスタイルで設置する場合
・テキスト追加、改行：可能
・ハッシュタグ追加：可能
<a href="https://twitter.com/share?url={{URL}}&text={{本文}}&hashtags={{ハッシュタグ}}">ツイートする</a>
https://twitter.com/share?のあとにパラメーターを&で繋げて書きます。
本文中で改行したい場合は%0aを入れます。
ハッシュタグが複数ある場合は、,（カンマ）区切りで書いてください。
※{{}}は読みやすくするために入れたもので実際には不要です。
Twitter公式のガイド Guides | Docs | Twitter Developer Platform
（2023/9/22追記）
Xに変わったので確認したところ現在はこちらになっているようです。
shareの部分がintent/tweetになっています。
その後にパラメーターをつける仕様は変わっていません。
<a href="https://twitter.com/intent/tweet?url={{URL}}&text={{本文}}&hashtags={{ハッシュタグ}}">ツイートする</a>
X（旧Twitter）公式のガイド Guides | Docs | Twitter Developer Platform
LINE：LINEで送るボタン
トークに送信する機能です。
※タイムラインに投稿する「いいね・シェアボタン」は、オリジナルで設置する方法がなかったので「LINEで送るボタン」だけになります。
公式サイトのプラグインを使う場合
下記のページでコードを発行し、HTMLへ書き込みます。
LINE Developers
オリジナルスタイルで設置する場合
・URLの送信：可能
・テキスト・ハッシュタグ：不可
<a href="https://social-plugins.line.me/lineit/share?url={{URL}}">LINEで送る</a>
公式サイトにも「カスタムアイコンを使用」のところに記載されていますが、
urlパラメーターにシェアさせたいURLを記入します。
※{{}}は読みやすくするために入れたもので実際には不要です。
参考
ボタンの設置について
各種SNSのシェアボタン設置用URLまとめ！サンプルコードも | Web Design Trends
改行について
twitterのツイートボタンを作るためのリンクshareとintent/tweet - Qiita
最後に
本文の追加までする機会があまりなかったのでいろんな記事を彷徨ってしまいました・・。
また日が経つと仕様が変わってしまうかもしれませんが、
この記事が誰かの役に立てれば幸いです。
