どうも、kuroro0319です。

シェアしてますか？

そんな言葉が口癖になるくらいに今はまさにもう空前のSNSブームです。
シェアボタンのないブログやWebマガジンなんて存在する意味がありません。
いい記事だからシェアをするんじゃない、
シェアをしたいから記事が存在しているんだ!
という気分にすらなってきます。

シェアをいっぱいもらってるサイトがエライだとか、
シェアをくださいとおねだりしてみたりとか、
シェアを集めるために悪魔に魂を売ったりとか

けしからんですよ。

ほんと醜い争いです。

というか、ひたすら拡散し続けたその先には何があるのでしょうか？

悲しい人間のサガというものでしょうか…

とか言いつつ、めちゃくちゃシェアして欲しいですけどね。
人生で一回くらいはバズってみたいと思っています。
芸能人に憧れるようなもんですかね。

まぁ、そんなことはどうでもいいのです。

今回は各SNSの公式のシェアボタンをオリジナルのボタンに変えてしまおうという試みです。
このページもわかりにくいですが、記事の下の方に設置しています。

オリジナルのボタンに変えるとデザインに統一感も出ますし、
やたらと重いSNS側のjsを読み込まなくてもいいので、サイト軽量化にも繋がるはずです。

それによって、Googleの検索順位も上がって、PVも増えてウハウハな未来が待っている…


…かもしれません。（きっと待ってないでしょうが…）


ただ、デザインを変更できるので、より目立ったデザインにできるので、
シェア欲求も満たされるのではないでしょうか？
そこはデザイン次第ですが…

SNSの公式シェアボタンって何？

まずは各SNSの公式シェアボタンを見てみましょう。
それぞれの公式サイトは以下になります。

Facebookの公式「シェア」ボタン
Twitterの公式「ツイート」ボタン
Google+の公式「共有」ボタン
LINEの公式「LINEで送る」ボタン

こちらについての設置方法はそれぞれの公式サイトをご覧ください。
このままでも特に問題はないんですが、
今回はオリジナルボタンの作成なので、上記ではなく別の方法でやっていきます。
このページではこれ以外のSNSのボタンは特に扱っていません。

Facebookのオリジナル「シェア」ボタンを作ろう

それでは、まずはFacebookのオリジナル「シェア」ボタンを作っていきましょう。
非常に簡単ですが、以下コードを入れるだけです。

<a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fs-k-works.com%2Fweb%2Fmake_sharebutton%2F" target="_blank"><span class="icon-icon_facebook"></span>この記事をシェアする</a>

この記事をシェアする

URLの構造としては「https://www.facebook.com/sharer/sharer.php?u=シェアするURL」となっています。
「シェアしたいテキスト」はhaedタグ内の「og:description」になります。
ただのaタグですので、中に自由に画像やテキストを入れて使ってください。
コードの下のサンプルはわかりやすく大きくしてみました。
すごいシェアして欲しいみたいですが、気にしないでください。
もしシェアしてくれたらすごい嬉しいですけどね。

Twitterのオリジナル「ツイート」ボタンを作ろう

次にTwitterのオリジナル「シェア」ボタンを作っていきましょう。
こちらも以下を入れるだけです。

<a href="https://twitter.com/share?url=https%3A%2F%2Fs-k-works.com%2Fweb%2Fmake_sharebutton%2F&text=%E3%82%AA%E3%83%AA%E3%82%B8%E3%83%8A%E3%83%AB%E7%94%BB%E5%83%8F%E3%81%A7SNS%E3%81%AE%E3%82%B7%E3%82%A7%E3%82%A2%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E4%BD%9C%E3%82%8D%E3%81%86%20%7C%20S.K%20Works" target="_blank"><span class="icon-icon_twitter"></span>この記事をツイートする</a>

この記事をツイートする

URLの構造は「https://twitter.com/share?url=シェアするURL&text=シェアしたいテキスト」という形になります。
コードだと「シェアしたいテキスト」もエンコードされているのでわかりにくいですが…
最近はエンコードしなくてもいけるのかな？？
試してないのでわからないです。

Google+のオリジナル「共有」ボタンを作ろう

次にGoogle+のオリジナル「共有」ボタンを作っていきましょう。
最近はそんなに盛り上がっている印象がないので、あまり入れることはないかもしれませんが、
こちらも以下を入れるだけです。

<a href="https://plus.google.com/share?url=https%3A%2F%2Fs-k-works.com%2Fweb%2Fmake_sharebutton%2F" target="_blank"><span class="icon-icon_google"></span>Google+でこの記事を共有する</a>

Google+でこの記事を共有する

URLの構造は「https://plus.google.com/share?url=シェアするURL」という形になります。
「シェアしたいテキスト」はFacebook同様にhaedタグ内の「og:description」になります。

LINEのオリジナル「LINEで送る」ボタンを作ろう

次にLINEのオリジナル「シェア」ボタンを作っていきましょう。
これも定番ですね。
こちらも以下を入れるだけです。

<a href="https://social-plugins.line.me/lineit/share?url=https%3A%2F%2Fs-k-works.com%2Fweb%2Fuse_chrome_devtool%2F" target="_blank"><span class="icon-icon_line"></span>LINEでこの記事を送る</a>

LINEでこの記事を送る

「https://social-plugins.line.me/lineit/share?url=シェアしたいURL」という形になります。
「シェアしたいテキスト」はFacebook同様にhaedタグ内の「og:description」になります。

SNSのオリジナルシェアボタンを作ってみての感想

公式ボタンは公式ボタンでいいのですが、
デザインが変えられないという不便さがあります。
それを解決できるのでとてもいいと思います。

ちなみに私は公式ボタンをほとんど設置したことがないですね。
ということは、作ってみての感想もクソもありません。
そもそも公式ボタンそのものをほとんど設置してないのですから…

ネット上で見かけるブログもほとんどがオリジナルボタンです。

そうなってくると公式ボタンの意味ってあるのか？？
とか思ったりもしてきます。

いっそのこと公式でオリジナルボタンを作れるようにしたらいいのにな。
それが平和だと思います。（なんのこっちゃ…）

ただ、公式ボタンではないので、サポートが打ち切られた瞬間に
一巻の終わりになる危険性は孕んでいます。
そこらへんの対策はしておく必要はありますね。