webアプリケーションにSNSシェアボタンを実装する

SNSシェアボタンが必要になったわけ

自分のwebサービスを認知してもらうためにはネット上では拡散して認知してもらうのが良いと考える。そのためには自分のwebサービスをSNSでシェアしてもらうのが良いだろう。そこでSNSシェアボタンを実装する方法を調べる。

参考URL

https://littlethings.jp/blog/web/sharebutton-html
https://narito.ninja/blog/detail/96/

ボタンの実装方法

twitterやFacebookのSNSシェアボタンを実装する。Facebookのシェアに関しては、developerサイトにドキュメントがある。
https://developers.facebook.com/docs/plugins/share-button?locale=ja_JP

埋め込みのボタンはどうやら重いというデメリットがあるようだ。その他のシェアボタンの実装としてアンカータグ内のhref属性を設定することでも実装できるようだ。今回はこちらの方法を採用する。
またdjangoではSNSシェアボタンの実装に際してサードパーティによるライブラリを確認する事ができた。こちらも使える可能性がある。
https://pypi.org/project/django-social-share/

Facebookのアンカータグ

<a href="http://www.facebook.com/share.php?u=「シェアしたいURL」&t=「タイトル」" target="_blank">
Facebookでシェア</a>

シェアしたいURLを準備する

シェアしたいURLを準備するわけだけど、djangoでシェアするURLは以下のような構成である。

https://projectdomain/items/detail/3

projectdomain部分については、{{ request.get_host }}で取得する事ができる。

https部分については、{{ request.scheme }}で取得する事ができる。

path部分については、{{ request.path }}で取得する事ができるし、また{% url 'items:detail' item_obj.id %}みたいなことでもpathは取得することができる。

{{ request.scheme }}://{{ request.get_host }}{{ request.path }}

上記のようにすればURLは作成でき、以下のように利用すれば良い。

http://www.facebook.com/share.php?u={{ request.scheme }}://{{ request.get_host }}{{ request.path }}

シェアしたいタイトルを準備する

タイトルもdjangoのテンプレートタグシステムを利用すればよいだろう。
{{ item_obj.title }}みたいな感じでやったらどうか?

<a href="http://www.facebook.com/share.php?u={{ request.scheme }}://{{ request.get_host }}{{ request.path }}&t={{ item_obj.title }}" target="_blank">
Facebookでシェア</a>

Facebookっぽいボタンを準備する

BootstrapとFontawesomeを利用したソーシャルボタンが有る。これを利用すれば、見かけは良くなる。
https://github.com/lipis/bootstrap-social

<a class="btn btn-block btn-social btn-facebook" href="FacebookのシェアボタンのURL"><span class="fa fa-facebook"></span>Facebookでシェア</a>

Twitterのアンカータグ

<a href="https://twitter.com/share?url=「シェアしたいURL」" target="_blank" rel="nofollow">
</a>

djangoのテンプレートシステムを使った場合

<a href="https://twitter.com/share?url={{ request.scheme }}://{{ request.get_host }}{{ request.path }}" target="_blank" rel="nofollow">
</a>

bootstrap-socialを使った場合は以下のようになる。

<a class="btn btn-block btn-social btn-twitter mt-1" href="https://twitter.com/share?url={{ request.scheme }}://{{ request.get_host }}{{ request.path }}" target="_blank" rel="nofollow"><span class="fa fa-twitter"></span>Tweet
</a>