Facebook、TwitterなどのSNSに記事をシェアしてもらうのに必要なのが「シェアボタン」です。サービスごとにURLやパラメータが異なるため、オリジナルでシェアボタンを作成する場合はそれぞれ設定しなければなりません。

今回は、SNSごとにシェアボタンに設定するためのURLや設定の方法などをまとめました。

スポンサーリンク

オリジナルでシェアボタンを設置するメリット


公式サイトのジェネレータやプラグインを使ってシェアボタンを作成することができますが、わざわざオリジナルのシェアボタンを作成することによるメリットをまとめました。

思い通りのデザインで作れる

WordPressのプラグインにシェアボタンを設置できるものは色々と公開されていますが、意外とデザインのバリエーションが少なく、思い通りのものが見つかりません。HTMLとCSSがある程度理解できていれば、特に難しい技術は必要ないので自分でシェアボタンを作成してしまえば、デザインも自分の思い通りのボタンを作成することができます。

ページの読み込み速度が速くなる

公式のシェアボタンや外部サービスを利用するとJavaScriptの読み込みが必要な場合が多く、ページの表示速度が遅くなる原因となってしまいます。オリジナルでボタンを作成すればhtmlだけで完結させることができるので、少しでも気になる場合はぜひ試してみてください。

細かいカスタマイズが可能

TwitterのSNSシェアボタンは下記でご説明していますが、細かいパラメータを設定することでカスタマイズが可能です。外部サービスやプラグインを使用しているとそういったカスタマイズができない場合がありますが、自分でボタンを作成すれば様々なカスタマイズが可能になります。また、外国のプラグインなどははてブに対応していない場合も多いなど、外部サービスを利用すると設置したいSNSのボタンがすべて用意されているとは限りません。その点オリジナルで作成する場合は自分でボタンを作れば簡単に表示できてしまうので、拡張性に優れていますね。

サービスごとの設定方法

では、それぞれのサービスごとにシェアボタンのURLや設定する内容をご紹介してきます。

Facebook

Facebookのシェアボタンに設定するURLは下記の通りです。テキストが入っている所にFont Awesomeなどのアイコンを設定すればボタン化することができます。

ボタンを押した時の挙動はこちらで確認できます。

Twitter

Twitterのシェアボタンに設定するURLの基本形は下記の通りです。

また、Twitterはシェアする際のURLにパラメータを設定しておくことで、投稿に色々な情報を追加することができます。下記に設定できるパラメータの一覧をまとめました。

パラメータ説明
textツイートする際にデフォルトで入れておくテキストを設定します。ページのタイトルが入るようにしておくといいでしょう。
urlツイートにページ情報を載せたい場合にURLを設定しておきます。それぞれのページのURLを入れておきましょう。
hashtagsツイートにハッシュタグを付けたい場合に設定する項目です。カンマ区切りで複数設定しておくことができます。
viaツイートに「@◯◯さんから」という表示を追加したい場合に設定する項目です。公式アカウントがあれば、そのidを設定しておきましょう。
relatedツイートした後に、フォローを促したいアカウントがある場合に設定する項目です。こちらも公式アカウントがあれば設定しておくといいでしょう。

上記のパラメータをすべて設定すると、下記のようになります。

WordPressを使っている場合は、get_the_title()get_the_permalink()などを使って動的にテキストやURLを変えることができます。

ボタンを押した時の挙動はこちらで確認できます。

はてなブックマーク

通称「はてブ」と呼ばれるソーシャルブックマークサービスのはてなブックマークです。はてブはURLとページのタイトルを設定することができます。URLの設定は下記のとおりです。

ボタンを押した時の挙動はこちらで確認できます。

Pocket

Pocketは後で読みたいページをまとめておけるサービスです。利用ユーザーも多いので、ぜひボタンを設置しておきましょう。URLの設定は下記の通りです。

ボタンを押した時の挙動はこちらで確認できます。

Feedly

Feedlyは有名なRSSリーダーサービスですね。正確にはシェアボタンではありませんが、多くのサイトで設置されているため、追加しておいた方がいいでしょう。URLの設定は下記のとおりです。Feedlyの場合、{URL}はフィードのURLを指定するようにしなければならないので注意してください。

ボタンを押した時の挙動はこちらで確認できます。

まとめ

SNSによる拡散の効果は非常に大きいため、SNSシェアボタンを設置していないブログ、メディアは必ず設置しておいた方がいいでしょう。Feedlyとはてブは用意されていませんが、その他の主要なSNSのアイコンはFont Awesomeを利用すると簡単に表示することができます。

ボタンのデザインさえ作成できてしまえば、あとはリンク先を設定するだけで簡単にボタンを設置することができます。ぜひオリジナルのシェアボタンを作ってみてください。

おすすめの記事