Facebookのshareボタンを複数配置する

Facebookのシェアボタンを同一ページ内に複数配置する機会があったのですが、実装する時に少し手間取ったのでメモしておきます。

サンプルコード

今回やりたかったことは、サイト自体のシェアボタンが全ページに配置されていて、特定のページ内だけ商品画像に対してのシェアボタンを別途配置するというものです。

商品画像のOGPを別途設定するため、商品画像ごとにダミーページを作成し、商品画像のシェアボタンはダミーページのURLを指定する形にしました。

OGPの設定(サイト全体用)

<meta property="og:title" content="「Facebookのshareボタンを複数配置する」のデモページ" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://cly7796.net/blog/sample/arranging-a-plurality-of-facebook-share-button/" />
<meta property="og:image" content="https://cly7796.net/blog/sample/arranging-a-plurality-of-facebook-share-button/ogp.png" />
<meta property="og:description" content="ボタン複数設置ページ" />

OGPの設定(商品画像用)

<meta property="og:title" content="「Facebookのshareボタンを複数配置する」のデモページ" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://cly7796.net/blog/sample/arranging-a-plurality-of-facebook-share-button/" />
<meta property="og:image" content="https://cly7796.net/blog/sample/arranging-a-plurality-of-facebook-share-button/dog.jpg" />
<meta property="og:description" content="犬の写真" />

ボタンの設置(サイト全体用)

<a href="http://www.facebook.com/share.php?u=https://cly7796.net/blog/sample/arranging-a-plurality-of-facebook-share-button/">share</a>

ボタンの設置(商品画像用)

<a href="http://www.facebook.com/share.php?u=https://cly7796.net/blog/sample/arranging-a-plurality-of-facebook-share-button/dummy01.html">share</a>

ダミーページの設定

ダミーページは検索結果にかからないようにして、アクセスがあった場合は実際のページにリダイレクトされるようにしています。

<meta name="robots" content="noindex,follow">
<meta http-equiv="refresh" content="0;URL=./">

Facebookのshareボタンを複数配置するデモページ(1番目の犬の画像)

これで問題ないかと思っていたのですが、サイト全体用のシェアボタンを押しても、商品画像用のシェアボタンを押しても同じ内容が表示されていました。
　

■シェアボタンクリック後の内容

■投稿された内容

対応方法

調べてみたところ、ダミーページのog:urlに対して、シェアボタンを設置しているページのURLを指定していたのが原因のようでした。
投稿時に実際に表示させたいURLを指定するものと思っていたのですが、実際はog:urlで指定したURL先から投稿時の内容を参照するようで、今回の場合はダミーページのURLを指定しないといけなかったようです。

OGPの設定(商品画像用)

<meta property="og:title" content="「Facebookのshareボタンを複数配置する」のデモページ" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://cly7796.net/blog/sample/arranging-a-plurality-of-facebook-share-button/dummy02.html" />
<meta property="og:image" content="https://cly7796.net/blog/sample/arranging-a-plurality-of-facebook-share-button/cat.jpg" />
<meta property="og:description" content="猫の写真" />

Facebookのshareボタンを複数配置するデモページ(2番目の猫の画像)

これで商品画像用のシェアボタンを押した時も意図した表示になりました。

■シェアボタンクリック後の内容

■投稿された内容

Facebookの投稿からダミーページに遷移されても、リダイレクトを設定しているので問題ないかと思います。
　

もしくは、og:urlを指定していなければ、そのページに設定されているOGPを参照してくれるみたいなので、og:urlを指定しないという対応でも問題なさそうです。

OGPの設定(商品画像用)

<meta property="og:title" content="「Facebookのshareボタンを複数配置する」のデモページ" />
<meta property="og:type" content="article" />
<meta property="og:image" content="https://cly7796.net/blog/sample/arranging-a-plurality-of-facebook-share-button/sheep.jpg" />
<meta property="og:description" content="羊の写真" />

Facebookのshareボタンを複数配置するデモページ(3番目の羊の画像)

■シェアボタンクリック後の内容

■投稿された内容