OGP設定不要!Facebookのshareが便利

OGP設定不要!Facebookのshareが便利 Facebookからshareボタンがなくなって、share自体もできなくなったかと勘違いしていましたが、下記のような設定で対応可のなようでした。
備忘録がてらエントリーにしておきます。

#1 リンクでShare 気軽にできるタイプのShareで、下記のような表示となるものです。
Facebookのshare
いたって簡単です。
<a href="https://www.facebook.com/sharer/sharer.php?u=http://www.skuare.net/" target="_blank">シャア</a>
ということでu=のあとに対象のURLを記載すればOKです。
この場合は開くウィンドウのサイズなどを指定してあげたほうが良いかもしれません。
Facebook上では以下のように見えます。
Facebookのshare
※この手法はOGP設定した方がいいです。

▼デモ
シャアする

#2 APIでShare Feed Dialog - Facebook開発者に記載のある手法です。
ポップアップのように表示されます。 Facebookのshare
この場合はApp IDが必要となります。
Facebook Developersにて事前にアプリを作成しておきましょう。
なお、App Domainsには利用するサイトのドメインを正確に記述してください。

基本的には上記のFeed Dialogと書き方は一緒です。
<div id='fb-root'></div>
<script src='http://connect.facebook.net/ja_JP/all.js'></script>
<a href="#" onclick = 'postToFeed("<?= $uniqueURL;?>")'>Share</a>
<script>
FB.init({appId: "App ID", status: true, cookie: true}); function postToFeed(url) {
var obj = {
method: 'feed',
link: 'http://www.skuare.net/', //shareしたいURL
redirect_uri: url,
picture: 'http://www.skuare.net/apple-touch-icon.png', //shareさせたい画像
name: 'えいえいおー', //タイトル
caption: 'なんて日だ!?', //キャプション
description: 'Using Dialogs to interact with users.' //説明
};
FB.ui(obj);
}
</script>

Facebook上の表示と対応表は下記です。 Facebookのshare
※ご覧の通りサイト側で設定したOGP設定は無視されています。

▼デモ
しゃー!する

#3 メリット・デメリット ▼メリット
Shareを利用することにより「いいね!」ボタンを使用するよりもデザインの拡張性があがります。
また、何度でも同じ記事を共有することができます(必要かどうかは別)。
さらに#2のやり方だとOGPがhead内に記述できないASPなどでも意図した内容を拡散できます。

▼デメリット
「いいね!」数や「いいね!」している人の顔などの表示が手軽にはできません。
また、Googleのソーシャルトラッキングでは、like、dislikeを把握出来ますが、Shareではクリックイベントによるクリック数カウントくらいになりそうです。

一長一短ありそうですが、頭の隅にShareのことも入れておいてみてはいかがでしょうか。

sponsors

「OGP設定不要!Facebookのshareが便利」をシェアする

記事作成:
記事URL:

TOP > > > OGP設定不要!Facebookのshareが便利