コードジェネレータを使用してWEBサイトにSNSシェアボタンを実装してみた

はじめに

WEBサイトにSNSシェアボタンを実装する方法について調査する機会がありましたので記事にまとめました。
・調査対象はLINE、X、Facebook
・公式サイトのコードジェネレータを使用
・実行結果のスナップショットはiPhone13mini(iOS17.3.1)で取得
・2024年3月時点の情報をもとに作成

LINE

■コードジェネレータ
https://developers.line.biz/ja/docs/line-social-plugins/install-guide/using-line-share-buttons/#using-official-line-icons

■生成されたサンプルコード

<div class="line-it-button" data-lang="ja" data-type="share-b" data-env="REAL" data-url="https://www.generosity.co.jp/" data-color="default" data-size="large" data-count="false" data-ver="3" style="display: none;"></div>
<script src="https://www.line-website.com/social-plugins/js/thirdparty/loader.min.js" async="async" defer="defer"></script>

■実行結果

X

■コードジェネレータ
https://publish.twitter.com/?buttonType=TweetButton&widget=Button
下記画面が表示されるので、「set customization options」でパラメータを入力します。

■生成されたサンプルコード

<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-text="ここが本文" data-url="https://www.generosity.co.jp/" data-hashtags="tag1" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

■実行結果

Facebook

■コードジェネレータ
https://developers.facebook.com/docs/plugins/share-button/?locale=ja_JP

■生成されたサンプルコード

<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v19.0" nonce="XYnRGtqe"></script>
<div class="fb-share-button" data-href="https://generosity.co.jp/" data-layout="" data-size=""><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fgenerosity.co.jp%2F&amp;src=sdkpreparse" class="fb-xfbml-parse-ignore">シェアする</a></div>

■実行結果

Facebookアプリは起動されなかったです。

最後に

コードジェネレータに必要なパラメータを入力するだけで、簡単にシェアボタンを生成することができます。
そのため、開発者は煩雑なコーディング作業から解放され、代わりにより多くの時間を他の重要な開発タスクに費やすことができます。

また、コードジェネレータは、SNSプラットフォームの最新の仕様や機能に常にアップデートされています。これにより、常に最新のシェアボタンを利用することができます。

総括すると、コードジェネレータは開発プロセスをスムーズにし、開発者がより効率的に作業できるよう支援します。そのため、SNSシェアボタンの実装を検討する際には、コードジェネレータの活用を検討することをお勧めします。