目次

内容

概要

  • Facebookのソーシャルプラグインとは、外部WebサイトにFacebookページのコンテンツを表示する枠組みのこと
  • 利用できるプラグインは一覧ページで確認できる
  • 2012年3月6日現在の一覧は次の通り
Like Button
The Like button lets users share pages from your site back to their Facebook profile with one click.
Send Button
The Send button allows your users to easily send your content to their friends.
Subscribe Button
The Subscribe button allows people to subscribe to other Facebook users directly from your site.
Comments
The Comments plugin lets users comment on any piece of content on your site.
Activity Feed
The Activity Feed plugin shows users what their friends are doing on your site through likes and comments.
Recommendations
The Recommendations plugin gives users personalized suggestions for pages on your site they might like.
Like Box
The Like Box enables users to like your Facebook Page and view its stream directly from your website.
Login Button
The Login Button shows profile pictures of the user's friends who have already signed up for your site in addition to a login button.
Registration
The registration plugin allows users to easily sign up for your website with their Facebook account.
Facepile
The Facepile plugin displays the Facebook profile pictures of users who have liked your page or have signed up for your site.
Live Stream
The Live Stream plugin lets your users share activity and comments in real-time as they interact during a live event.

実装方法

プラグイン用コードの生成

Webページに埋め込み

  • bodyのすぐ後ろに挿入
    <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.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=373804282647429";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
  • ソーシャルプラグインを表示させたい場所に挿入
    <div class="fb-like-box" data-href="http://www.facebook.com/platform" data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div>

プラグインイベント

  • プラグインが表示されたときや プラグイン表示時や「いいね!」クリック時といったイベントでJavaScriptの関数を実行することが可能。
  • 参考:FB.Event.subscribe - Facebook開発者
  • サンプルコードは次の通り
    <script>
      window.fbAsyncInit = function() {
    
        // ソーシャルプラグイン表示時
        FB.Event.subscribe("xfbml.render", function() {
          console.log('xfbml.render');
        });
        
        // Likeボタンクリック時
        FB.Event.subscribe("edge.create", function(targetUrl) {
          console.log('edge.create');
        });
    };
    </script>

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2016-09-25 (日) 19:27:03 (442d)