Facebook、TwitterなどのSNSに記事をシェアしてもらうのに必要なのが「シェアボタン」です。サービスごとにURLやパラメータが異なるため、オリジナルでシェアボタンを作成する場合はそれぞれ設定しなければなりません。
今回は、SNSごとにシェアボタンに設定するためのURLや設定の方法などをご紹介します。
INDEX
オリジナルでシェアボタンを設置するメリット
公式サイトのジェネレータやプラグインを使ってシェアボタンを作成することができますが、オリジナルでシェアボタンを作成するメリットにはどのようなものがあるのでしょうか？
思い通りのデザインで作れる
WordPressのプラグインにシェアボタンを設置できるものは色々と公開されていますが、意外とデザインのバリエーションが少なく、思い通りのものが見つかりません。
HTMLとCSSがある程度理解できていれば特に難しい技術は必要ないので、自分でシェアボタンを作成してしまえば、デザインも自分の思い通りのボタンを作成することができます。
ページの読み込み速度が速くなる
公式のシェアボタンや外部サービスを利用するとJavaScriptの読み込みが必要な場合が多く、ページの表示速度が遅くなる原因となってしまいます。
オリジナルでボタンを作成すればhtmlだけで完結させることができるので、余計なスクリプトを読み込む必要がなく、読み込み速度に影響しないというメリットがあります。
細かいカスタマイズが可能
Twitterなどはパラメータを設定することでシェアする内容のカスタマイズが可能ですが、外部サービスやプラグインを使用している場合、そのようなカスタマイズができない場合があります。
また、海外のプラグインなどは、はてなブックマークに対応していない場合も多いなど、外部サービスを利用すると設置したいSNSのボタンがすべて用意されていない可能性があります。
その点、オリジナルで作成する場合はシェアする内容のカスタマイズが自由にでき、ボタンを設置するSNSの種類も自分で決められるというメリットがあります。
サービスごとの設定方法
では、それぞれのサービスごとにシェアボタンのURLや設定する内容をご紹介していきましょう。
Facebookのシェアボタンに設定するURLは下記の通りです。テキストが入っている所にFont Awesomeなどのアイコンを設定すればボタン化することができます。
<a href="http://www.facebook.com/share.php?u={URL}" rel="nofollow noopener" target="_blank">リンクテキスト</a>
ボタンを押した時の挙動はこちらで確認できます。
Twitterのシェアボタンに設定するURLの基本形は下記の通りです。
<a href="https://twiter.com/share?url={URL}" rel="nofollow noopener" target="_blank">リンクテキスト</a>
また、Twitterはシェアする際のURLにパラメータを設定しておくことで、投稿に色々な情報を追加することができます。下記に設定できるパラメータの一覧をまとめました。
| パラメータ | 説明 |
|---|---|
| text | ツイートする際にデフォルトで入れておくテキストを設定します。ページのタイトルが入るようにしておくといいでしょう。 |
| url | ツイートにページ情報を載せたい場合にURLを設定しておきます。それぞれのページのURLを入れておきましょう。 |
| hashtags | ツイートにハッシュタグを付けたい場合に設定する項目です。カンマ区切りで複数設定しておくことができます。 |
| via | ツイートに「@◯◯さんから」という表示を追加したい場合に設定する項目です。公式アカウントがあれば、そのidを設定しておきましょう。 |
| related | ツイートした後に、フォローを促したいアカウントがある場合に設定する項目です。こちらも公式アカウントがあれば設定しておくといいでしょう。 |
上記のパラメータをすべて設定すると、下記のようになります。
<a href="https://twitter.com/share?
url={ページのURL}&
via={Twitter ID}&
related={Twitter ID}&
hashtags=hashtag,hashtag2&
text=リンクテキスト"
rel="nofollow"
target="_blank"
>リンクテキスト
</a>WordPressを使っている場合は、get_the_title()やget_the_permalink()などを使って動的にテキストやURLを変えることができます。
<a href="https://twitter.com/share?
url=<?php echo get_the_permalink(); ?>&
via={Twitter ID}&
related={Twitter ID}&
text=<?php echo get_the_title(); ?>"
rel="nofollow noopener"
target="_blank"
>Tweet
</a>ボタンを押した時の挙動はこちらで確認できます。
はてなブックマーク
通称「はてブ」と呼ばれるソーシャルブックマークサービスのはてなブックマークです。はてブはURLとページのタイトルを設定することができます。URLの設定は下記のとおりです。
<a href="http://b.hatena.ne.jp/add?mode=confirm&url={URL}&title={ページのタイトル}" rel="nofollow noopener" target="_blank">リンクテキスト</a>
ボタンを押した時の挙動はこちらで確認できます。
LINE
LINEのメッセージで友人にURLやタイトルをシェアしてもらいたい場合は、下記のようなコードで実現することができます。
<a href="http://line.me/R/msg/text/?{URL}%0a{ページのタイトルなど表示したいテキスト}" target="_blank" rel="nofollow noopener">リンクテキスト</a>ボタンを押した時の挙動はこちらで確認できます。
Pocketは後で読みたいページをまとめておけるサービスです。利用ユーザーも多いので、ぜひボタンを設置しておきましょう。URLの設定は下記の通りです。
<a href="http://getpocket.com/edit?url={URL}&title={ページのタイトル}" rel="nofollow" rel="nofollow" target="_blank">リンクテキスト</a>
Feedly
Feedlyは有名なRSSリーダーサービスですね。正確にはシェアボタンではありませんが、多くのサイトで設置されているため、追加しておいた方がいいでしょう。URLの設定は下記のとおりです。Feedlyの場合、{URL}はフィードのURLを指定するようにしなければならないので注意してください。
<a href="https://feedly.com/i/subscription/feed/{URL}" target="blank" rel="nofollow noopener">リンクテキスト</a>
OGPを設定しておこう
OGPとは、HTMLのheadタグの中に記述する設定のことです。OGPを正しく設定しておくと、シェアされた時に画像を表示できたり、Twitterであれば表示方法を指定することができます。
OGPを正しく設定しておくと、シェアされた時のクリック率が向上し、より多くの人がサイトを訪れてくれる要因となります。Webサイトを作ったら、OGPの設定を忘れないようにしましょう。
まとめ
SNSによる拡散の効果は非常に大きいため、SNSシェアボタンを設置していないブログ、メディアは必ず設置しておいた方がいいでしょう。Feedlyとはてブは用意されていませんが、その他の主要なSNSのアイコンはFont Awesomeを利用すると簡単に表示することができます。
ボタンのデザインさえ作成できてしまえば、あとはリンク先を設定するだけで簡単にボタンを設置することができます。ぜひオリジナルのシェアボタンを作ってみてください。
