URLリンクのSNSシェアをa要素のみで実装する

こんにちは。Gaji-Labo 横田です。
SNS でシェアするボタンの実装については公式プラグインで発行したコードを埋め込むなどいくつか方法がありますが、今回はスマホメインのページに a 要素のみで URL リンクを SNS シェアする実装を紹介します。

Twitter、Facebook、LINE

紹介する SNS シェアは Twitter、Facebook、LINE。前提として、SNS シェアしたい URL は動的に取得できるものとします。
やりたいことは以下です。

  • 自分のアカウントに シェアしたい URL を投稿させたい
  • スマホでの表示がメインのページで HTML の a 要素のみで実装したい

Twitter

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

ハッシュタグはカンマ区切りで複数指定も可能です。

Twitter のシェアイメージ

Facebook

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

OGP のデータが掲載されます。
この設置方法でシェアできるのは URL のみで、テキストやハッシュタグは指定できないようです。

Facebook のシェアイメージ

LINE

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

この設置方法でシェアできるのは URL のみで、テキストやハッシュタグは指定できないようです。

LINE のシェアイメージ

おわりに

URL リンクを SNS でシェアする実装、a 要素のみで設置できる方法を紹介しました。プラグインでのコードの埋め込みに比べ、ページの表示速度に影響が少ないのがいいですね。

参考になれば幸いです。


投稿者 Yokota Tomoko

運用やアクセシビリティに配慮したHTML/CSSの設計やコンポーネント作成、スタイルガイドの構築、コードレビュー、組み込み、要件の整理、社内進行管理、顧客とのコミュニケーションまで、ジョインしたチームを前に進めるためにあれこれ担当しています。子育てと仕事のバランスを楽しめるよう、日々模索しています。