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>

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

Facebook

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

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

LINE

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

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

おわりに

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

参考になれば幸いです。