ブログの記事下にFacebookのシェアボタンを入れてみました。

slooProImg_20140222161535.jpg


当ブログの記事の最初と最後に「シェアボタン」をこのようにズラッと並べています。
スクリーンショット 2014-02-22 15.05.27
記事が読者にとって役に立ったり、面白かったりしたときには是非ポチッとしていただきたいためです。

ざっくりいうと、ポチッとしていただけますと該当するソーシャルメディアへ連携されて、ブログの記事がそのメディアに紹介される仕組みになっています。

そして注目はFacebookです。

「いいね!」ボタンというのを設置していますが、これはただ単にいいね数が増えるだけのボタンです。

もちろん「いいね」をしていただけるだけでもありがたいことですが、もう1アクション欲しいところですよね。

そこで、記事が読み終わるタイミングの場所に「シェアボタン」を設置してみました。具体的には記事下です。

Facebookシェアボタン

Facebookにシェアする
このようなボタンです。(押してもリンクされていません)

記事下に設置しているこのボタンを押していただくと、Facebookのシェア画面に切り替わります。
Facebookシェア画面
写真はひとつ前の記事です。

記事自体を読者のウォールに掲載してもらえるので、そのお友達などへ伝わる効果が狙えます。逆に言うとウォールに載せたくない方はご注意ください。

設置方法(設置コード)

記事に設置すること事態はすごく簡単です。下記のコードを記事のお好きな場所へ貼るだけで済みます。

Facebookシェアボタンのコード

<a href="http://www.facebook.com/sharer.php?u=記事URL rel="nofollow" target="_blank" class="btn btn-blue ft22px b">Facebookにシェアする</a>

設置する際の注意点

次にこのボタンを実際に機能するように設定する必要があります。

コード内に赤字で記載されている記事URLの部分に、ボタンを設置した記事のURLを差し込まなければなりません。

つまり、一旦記事をUPしてから記事URLをコピーして編集画面を開き、先ほどの記事URL部分にペーストするという手間があります。

ちなみにWordPressだと、編集画面のタイトル下にURLが表示されているので、投稿時に差し込むことができて便利です。
記事URL

参考
ブログにシェアボタンを付けよう!

Facebook Social Plugins

ちなみに上記のコードは有料テーマ「el plano」向けオリジナルコードなので通常は、

<a href="http://www.facebook.com/sharer.php?u=記事のURL rel="nofollow" target="_blank">任意のテキストや画像タグ"</a>

こちらのコードをお使いください。

ちょー参考になるシェアボタン作成事例
Facebookのshare(シェア)ボタンをサイトやブログに設置する方法

記事がお役に立てましたら是非シェアしてください\(^o^)/
Facebookにシェアする

記事が参考になったりおもしろかったら
いいね!してね( ´ ▽ ` )ノ

Twitterでマツオユキを