AddThisを使ってSNS共有ボタンを作る方法

thumb_sns_share

コンテンツの拡散するためにFacebook、Twitter、PinterestなどSNSの共有が重要かと思います。本来なら各ソーシャルサービスのAPIを使ってボタンを設置して見た目を調整すると思いますが、世界で200も超えるソーシャル・チャネルを一つずつ作成するのは効率が悪いです。
AddThisを使えばあらゆるソーシャルの共有ボタンが簡単に作れます。また、カラーや形など見た目の調整や設置場所のカスタマイズもとても簡単なのでぜひ使ってみましょう。

AddThisの使い方

まずは、AddThisのアカウントを作成します。
AddThis公式:https://www.addthis.com/
アカウントを作成しログインしたらToolを追加するページが表示されます。

AddThisログイン
画面の右側にある「ADD NEW TOOL」か一覧の「+」ボタンをクリックして次に進めます。
AddThis新規作成
AddThisは共有ボタンだけではなくフォローボタンや関連記事を表示するなどよく使われるツールも簡単に作成できますので他のツールも使ってみたいと思います。
今回は共有ボタンを作成するので「Share Buttons」をクリックします。
AddThisツール選択
すると、共有ボタンをカスタムできる画面が表示されます。
まずは設置タイプを選んで「Continue」をクリックしたらソーシャルの選択、ボタンの色や表示数などをカスタマイズする画面に進めます。プレビューがリアルタイムで反映されるので確認しながら自分の好みに合わせて作って行きます。今回はデフォルトのボタンセットに「Line」の共有ボタンを追加してボタンはテキストをなくし丸いボタンにしてみました。カスタマイズが終わったら「Activate Tool」をクリックして次に進みます。
AddThisプレビュー
AddThis設定
サイトの作り方に合わせてコードが用意されますので、マニュアル通りに進めば設置が完了します。
今回はテストのため、簡単なHTMLで確認するので「An HTML Website」のコードを使います。
基本コピペだけで簡単に設置が完了します!の直前に用意されたスクリプトを追加して表示したい場所にボタンのタグを追加するだけです。
AddThisタグ設置
ちなみにテストする際には、HTTPSでアクセスできるURLが必要です。ローカル環境ではテストができないので、サーバーに載せて確認してください。

まとめ

ローカルで確認できないのは、少し不便ですがこんなに簡単にしかも無料でSNSのボタンが作れるのでとても良いサービスだと思います。もし、ワードプレスで作成しているサイトならワードプレスのプラグインもあるのでもっと簡単に使えると思います。また、AddThisのサイトからアナリティクスを提供しているのでツールの使用状況が確認できるのも嬉しいです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です