一般的なSNSシェアボタンの配置
目次
今回やりたいこと
このサイトにも記事の下に各SNSで記事をシェアできるシェアボタンを配置していますが、これらはデザインをカスタマイズしたりして若干設置がややこしいです。
今回紹介するのは各SNSがデフォルトで提供しているシェアボタンの配置です。とりあえず使用される頻度の高い以下の3つを紹介します。
- LINE
まずTwitterですが、Twitterのシェアボタンのコードは以下からとってくることができます。
シェアボタンのコードは基本的に毎回生成する必要はなく、コピペで使いまわせるので以下のコードをシェアボタンを配置したい箇所にそのままコピペしましょう。
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-via="cure_office" data-lang="ja" data-show-count="false">Tweet</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
するとこのような公式のシェアボタンが配置されます。CSSをあてる必要もないです。
次にFacebookです。Facebookも同様に公式でコードを生成できるサイトがあります。
Facebookは共有したいURLを記述する箇所があるので、以下のように「the_permalink();」を指定します。これはWordPressの場合なので、適宜変更してください。WordPressの場合はこちらのコードをそのままコピペしていただければ問題ないかと思いますが、Facebookの場合、シェアボタンのカスタマイズ（いいね数を表示したり、ボタンのサイズを変更したり）が可能なので、必要に応じてコードをカスタマイズてみてください。
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v4.0"></script>
<div class="fb-like" data-href="<?php echo the_permalink(); ?>" data-width="" data-layout="button_count" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>
上記コードをコピペで使った場合は、このようなシェアボタンが生成されます。
LINE
最後にLINEです。LINEのシェアボタンも同様、以下から生成することができます。
LINEはFacebook同様にリンクの箇所の修正が必要です。今回はWordPressなのでFacebookと同様「the_permalink();」を指定しています。
今回私が生成したシェアボタンは以下になります。
<div class="line-it-button" data-lang="ja" data-type="share-a" data-ver="3" data-url="<?php echo the_permalink(); ?>" data-color="default" data-size="small" data-count="false" style="display: none;"></div>
<script src="https://d.line-scdn.net/r/web/social-plugin/js/thirdparty/loader.min.js" async="async" defer="defer"></script>
まとめ
公式に配布されているシェアボタンなのでちょっと物足りないですが、手軽にシェアボタンを実装できるので記事にとりあえず入れたいななんて時は便利だと思います。
このサイトのようにカスタマイズしたシェアボタンを配置する方法はまた後日紹介しようと思います。
