【コピペでOK】Facebookシェアボタン（画像付き）を超簡単にブログに設置する方法

いまやブログとFacebookって切っても切れないモノあると思っててですね。

両者ともいいとこ悪いとこがあって、なんかそれをお互いで補完し合いあっているというかなんというか。

例えばブログの更新通知をFacebookにアップしてブログに来てもらうとか、逆にブログの読者をFacebookやFBページに誘導するとか、いろいろな面で使い勝手がいいと感じてます。

今回ブログを新しくしたついでに、記事の一番下に「Facebookシェアボタン」を設置してみました。

設置したといっても個別記事に直貼りしてるだけなんですけどね。

※記事の一番下に貼ってみました。

このボタンはタグをそのまま記事ページに貼ってるだけなので、テーマいじってゴニョゴニョとかすることもなくソースコードをコピペするだけで設置可能です。

ご自分で用意するのは「記事URL」と「ボタンに使う画像」だけなんでとっても楽チンですよ。

【コピペでOK】Facebookシェアボタン（画像付き）を超簡単にブログに設置する方法

今回作ったFacebookシェアボタンのコード

記事に貼ってるソースコードはこんな感じ。

<center><a href="http://www.facebook.com/sharer.php?u=https://matsuoyuki.jp/2016/01/29/wordpress-facebook-share-button/" rel="nofollow" target="_blank"><img src="https://matsuoyuki.jp/wp-content/uploads/2016/01/4a86d309e15eef1858604c392be1750c.png" alt="Facebookシェアボタン" /></a></center>

上のコードをそのままコピペすると下のようなシェアボタンになります。

ボタンのデザインはMacのKeynoteで作ってみましたよ。

ベースとなるソースコード

ベースとなるソースコードをコピーして編集

<center><a href="http://www.facebook.com/sharer.php?u=【記事のURL】" rel="nofollow" target="_blank"><img src="【画像のURL】" alt="Facebookシェアボタン" /></a></center>

ベースとなるソースコードはこちら。

二箇所ある「【〇〇のURL】」を任意のURLに変更してくださいな。

「画像のURL」ってなんなん？

http://〇〇.com/wp-content/uploads/2016/01/4a86d309e15eef1858604c392be1750c.png

写真を記事内に入れ込むと自動的に付与されるURLがあるんですけど、Wordpressだと上のがそれ。

▼「画像のURL」は、メディアライブラリーから任意の画像を開いてここの場所にあります。

URLをコピーしてソースコードに貼ってください。

まとめ

毎回記事に貼る手間はかかるけど、コードをコピペさえしておけばシェアボタンを簡単に設置することができます。

注意することは、【記事URL】だけは毎回変更しなくちゃダメですよ。

WordPressであれば記事の編集画面の一番上、その他のブログサービスではどうなんだろう？

やはり一度記事を公開してから生成されたURLをコピペすればいいのかしら。