シェアボタンとは？

シェアボタンはFacebookや TwitterなどのSNSで提供されているソーシャルボタンのことを指します。
WEBページに訪れたユーザーにSNSでシェアしてもらう有効な方法でユーザーと繋がっている知人にWEBサイトについて認識してもらうことができます。

実装するために

シェアボタンを設定してもらうためにはOGPを設定する必要があります。
OGPは「Open Graph Protcol」の略でSNS上でWEBページの内容について正しく伝えることができるHTML要素のことです。
OGPを設定していない場合、SNS側が自動で画像や説明文を作成してしまうため、ページ内容が意図しない伝わり方をしてしまう可能性が出てきます。

OGPの基本的な設定

OGPタグはhead内に設定します。
また、OGPを使用することを宣言するためにはprefix属性を追加する必要があります。
prefix属性を追加することは、「OGPを使用します。」と宣言した意味合いになります。

ページのURL

設定するWEBページのURLを指定し、URLは絶対パスでの記述をします。

サイト名

ページのサイト名を記述します。サイト名やブランド情報は「og:site_neme」で設定します。

ページのタイトル

ページのtitleを指定し、20文字以内で設定することが好ましいとされています。

ページの種類

ページの種類を指定することでSNS上での表示形式が変化します。
TOPページの場合は「website」、TOPページ以外には「article」を指定します。

ページのディスクリプション

ページの説明文を指定し、文字数は80~90文字が好ましいとされています。
表示される文字数は120文字程度なので、内容をそのままを設定してしまうと表示された際に文字が切れてしまう可能性があるため、簡略させた文章のほうがシェアされた際にユーザーに伝わりやすくなります。

サムネイル画像のURL

SNS上で表示させたい画像を絶対パスで指定します。
Facebookでは画像比率で「1.91：1」を推奨しています。

対応している言語

サポートしている言語を設定することで適切な翻訳が行えます。
日本語のみサポートしていない場合はcontentに「ja_JP」を記述します。
複数の言語を設定する場合は下記の示すように「alternate」を追加記述することでcontent属性をさらに増やすことができます。

シェアボタンの設置

bodyにシェアボタンを設置します。
SNSごとに記述するコードが異なるので注意が必要になってきます。
下記に主なSNSのシェアボタンの例を記述します。

facebookのシェアボタン

Twitterのシェアボタン

LINEのシェアボタン

また、LINEの場合は投稿するコメントも追加することができます。
コメントとURLの間には半角スペースが開いていますので注意してください。

以上がシェアボタンの概要になります。
シェアボタンはサイトを宣伝していく上で強力な武器になりますのでお使いのサイトがある方はぜひ、導入されてみてはいかがでしょうか？