CHANGEUP!(チェンジアップ)

アクセス数アップ!SNSシェアボタンをカスタマイズしよう!

アクセス数アップ!SNSシェアボタンをカスタマイズしよう!

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

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

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

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

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

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

Flat_Vector_Social_Icons

2、各ボタンの設置方法

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

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

【HTML】

【結果】

Twitterでシェアする

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

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でシェアする

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

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

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

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

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

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

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

まとめ

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

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

Twitterでシェアする Facebookでシェアする このエントリーをはてなブックマークに追加

執筆者

せりな

DTPデザイナー、雑貨屋さんのスタッフ、一般事務… 散々やりたいことをやり散らかして、WEBデザイナーに落ち着きました。ものを作っている時間が好き。

うさぎと音楽が好きすぎて、うさぎと音楽を無理やりこじつけたお洋服を作ったり、イベント企画をしたりもしています。

この記事を読んだ人はこんな記事も読んでいます

CHANGEUP!では、エンジニアの転職、
フリーランスの案件紹介を行なっています。

将来の働き方で迷っている方、転職をお考えの方、あなたのエンジニアとしての力を最大限発揮できる場所を提案させていただきます。

CHANGEUP!のサイトを見る

PAGE TOP