ブログや企業サイトにSNSのシェアボタンを設置するとき、
各SNSが用意しているボタンを使うと、
大きさがバラバラでなんだか汚い…。

実はSNSシェアボタンは、
自分でカスタマイズすることができるんです！

今回はシェアされやすい
【Twitter】、【Facebook】に絞ってカスタマイズ方法を紹介します。

1、ボタンのデザインを決める

シェアボタンのデザインは自分で作成しても良いのですが、
フリーダウンロードのものを使っても良いでしょう。

CHANGEUP!ではこちらのサイトのボタンを使用させていただいています。
Flat Vector Social Icons (EPS)

2、各ボタンの設置方法

2-1、Twitter：基本のシェアボタン

以下のURLの必要な部分を記述して、
ボタンを設置したい箇所に貼り付けます。

【HTML】

【結果】

これだけの記述で簡単にボタンの設置ができてしまいました！

2-2、Facebook：シェアボタン

FacebookのシェアボタンはTwitterとは少し仕様が違っていて、
シェアボタンを設置したいサイトにOGP設定がされていないと正常に動きません。

ですので、まずはOGP設定の仕方を紹介します。
OGP設定はもうしているよ！という方は、 こちらからお読みくださいね！

2-2-1、Facebook用：OGP設定

OGP設定はサイトのheadタグ内に記述します。

【HTML】

og:title

ここにはシェアされたときに表示されたいタイトルを記述します。
こちらを設定することで通常のtitleタグとは別のタイトルが表示されます。
もし、通常のtitleタグが表示されるので良いなら、設定は不要です。

og:type

ここにはページのタイプを記述します。
トップページなら”website”、ブログなら”blog”など。
詳しくは以下のサイトをご覧ください！

The Open Graph protocol：Object Types

og:url

ここにはページのURLを記述します。
相対パスは使用できないので気をつけましょう。

og:image

ここには、ページや記事がシェアされたときに表示する画像URLを記述します。

サイズは1200px✕630pxが推奨されていますが、
稀にFacebook側で正方形に画像をトリミングされてしまうことがあります。
トリミングされても良いように、重要な情報は正方形内に収まるようにしましょう。

og:site_name

ここにはサイト名を記述します。

og:description

ここにはサイトの説明文（ディスクリプション）を記述します。
どんな内容でも構いませんが、90文字程度の文字数が推奨されています。

fb:app_id

FacebookのApp IDを記載します。
IDを取得することで、Facebookの解析機能が使えるようになるので非常に便利です。

App IDの取得方法は以下のサイトからご確認ください！
Facebook　アプリID取得方法

以上でOGP設定は完了です！
それではシェアボタンの設置をしましょう。

2-3、Facebook：基本のシェアボタン

以下のURLの必要な部分を記述して、
ボタンを設置したい箇所に貼り付けます。

【HTML】

【結果】

Facebookも同様に簡単に設置できますね！

2-4、記事ごとにURLを変更したい場合

WordPressを使用していて、
記事ごとに表示するURLを変えたい場合は、以下のように記述します。

【シェアするページのURL】の部分
【PHP】

2-5、記事ごとにタイトルを変更したい場合

こちらもURLと同様に、
記事ごとに表示するタイトルを変更したい場合の記述方法です。

【シェアするページタイトル】の部分
【PHP】

まとめ

SNSシェアボタンを設置することは、アクセス数の向上、
コンテンツSEO対策の一貫にもなります。

せっかく設置するのであれば、
綺麗でサイトのイメージに合ったもので作って、
より良いサイトにしていきましょう！