blog

2012.07.30(SNS)

[tips]Facebook新プラグイン!サイト内おすすめ「Recommendation Bar」を設定してみた。

Facebookデベロッパー

ベータ版としては公開されていたらしいのですが、先日、正式に公開されたようです。

どのようなものかというと、このサイトの右側にあるニョロっとでてくるもの。

Facebookアプリを登録していないかたは登録から!

下記のサイトからアプリIDを取得します。
Facebook開発者

IDを取得後、下記のコードを<body>直下に追加します。大半は、header.phpに設置することになると思います。

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id; js.async = true;
  js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=取得したアプリID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

※取得したアプリIDの部分をご自身のアプリIDと変更して下さい。

「Recommendation Bar」設定方法

2012/7/28現在、デベロッパープラグインのページにリンクがないみたい。下記のリンクから設定できます。
Recommendation Bar

1. URL of the article

設置するページのURLを入力。
Wordpressなら下記のコード

<?php the_permalink(); ?>

ですが、エラーを返されるので、自社サイトのURLを仮に入力します。私のサイトなら「htttp://ken247.com」

2. Trigger

プラグインが現れるタイミングの指定。
設定が効かないみたい。。。

3. Read Time

指定した秒数後プラグインが展開されます。上記のTriggerよりもこちらの時間が優先?なのかな。

4. Verb to display

「いいね!」か「おすすめ」の2つから選ぶ。

5. Side

表示位置を右か左か選ぶ。

6. Domain

設置するサイトのドメインを入力。

7. 「Get Code」でコードを取得。

WordPressなら下記のようなコードを</body>の直前に設置すればOK。大半はfooter.phpに設置することになると思います。
※「自分のサイトURL」はご自分のサイトURLに変更して下さい。

<div class="fb-recommendations-bar" data-href="<?php the_permalink(); ?>" data-trigger="60%" data-read-time="15" data-action="recommend" data-side="right" data-site="自分のサイトURL"></div>

補足
トップページには表示したくない場合は、下記のコードにすればOKです。

<?php if ( is_front_page() == false ) { ?>
<div class="fb-recommendations-bar" data-href="<?php the_permalink(); ?>" data-trigger="60%" data-read-time="15" data-action="recommend" data-side="right" data-site="自分のサイトURL"></div>
<?php } ?>

 
 

以前は、WordPressのプラグインSimpleReach Slideを使用していたのですが、サイト滞在時間が増えることに期待してしばらく設置してみようと思います。

一度表示されると、ずっと表示されっぱなしなので、そこがちょいとウザったく思うかもしれません。。。

- AD -