【HTML】SNSシェアボタンの設置(Twitter、Facebook、LINE、note)

SNSシェアボタンの設置方法です。
Twitter、Facebook、LINE、noteのシェア方法の紹介になります。

SNSシェアボタンは、URLのコピーボタンも一緒に並べると利便性が高くなるのでこちらのページも併せて確認しておくと良いでしょう。

Twitterシェアボタン

Twitterシェアボタンを設置する方法は
以下のコードを設置してください。

<a href="https://twitter.com/share?url=【シェアするURL】" target="_blank">Twitterでシェアする</a>

【シェアするURL】をシェアしたいサイトのURLにしてください。

TwitterにはURL以外にも、以下のようなパラメータもあります。

パラメータ 説明
text デフォルトで入れておくテキストの設定です。
ページのタイトルを入れるのが良いでしょう。
via 「@◯◯さんから」という表示を追加できる項目です。
公式アカウントがあれば、そのidを設定しましょう。
related ツイート後に、フォローを促したいアカウントがある場合に設定する項目です。
公式アカウントがあれば、そのidを設定しましょう。
hashtags ハッシュタグを付けられる項目です。カンマ区切りで複数設定できます。

パラメータを追加すると以下のようになります。
全部のパラメータを追加しても良いですし、一部の追加でも良いです。

<a href="https://twitter.com/share?url=【シェアするURL】&text=【ツイートしたいテキスト】&via=【ツイート内に含むユーザ名】&related=【ツイート後に表示されるユーザー】&hashtags=【ハッシュタグ】" target="_blank">Twitterでシェアする</a>

Facebookシェアボタン

Facebookシェアボタンを設置する方法は
以下のコードを設置してください。

<a href="https://www.facebook.com/share.php?u=【シェアするURL】" target="_blank">Facebookでシェアする</a>

【シェアするURL】をシェアしたいサイトのURLにしてください。

LINEシェアボタン

LINEシェアボタンを設置する方法は
以下のコードを設置してください。

<a href="https://social-plugins.line.me/lineit/share?url=【シェアするURL】" target="_blank">LINEでシェアする</a>

【シェアするURL】をシェアしたいサイトのURLにしてください。

「noteで書く」ボタン

「noteで書く」ボタンを設置する方法は
以下のコードを設置してください。

<a href="https://note.com/intent/post?url=【シェアするURL】" target="_blank">noteで書く</a>

【シェアするURL】をシェアしたいサイトのURLにしてください。

参考:https://www.help-note.com/hc/ja/articles/360000272622–noteで書く-ボタン
https://www.gaji.jp/blog/2022/06/10/10057/
https://webdesign-trends.net/entry/3632

関連記事

コメントを残す

*