忍者ブログ
手探りでパソコンの事を勉強するブログです。 何か覚えたら記録していきます。
2017 . 11
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  •   

    [PR]



    このエントリーをはてなブックマークに追加
    ×

    [PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

    忍者ブログに記事ごとでFacebookの「いいね」ボタンを設置する方法。



    このエントリーをはてなブックマークに追加
    まず、デザインにこだわらない人やコードがよく解らない人は忍者おまとめボタンを利用するのが手っ取り早いと思います。

    実際のコードを貼り付けるとこんなんです。

    忍者おまとめボタン

    ただし、このサービスは付けたくもないボタンまで付いてくるし、必要不可欠な「はてブ」ボタンが付いてなかったりで痒い所に手の届かない微妙なサービスだったりします。

    なので今回は「いいね」ボタンを記事ごとに単体でつける方法を紹介します。

    コードの取得はこちらから行います。

    http://developers.facebook.com/docs/reference/plugins/like/



    そして実際に取得し、当ブログに貼りつけたコードはこちらです。
    2分割になっています。

    一つ目のコードは<body>直下に貼り付けます。
    <!--FacebookのSDKコード-->
        <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";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>

        <!--/Facebook-->


    2つ目のコードはボタンを設置したい箇所に貼り付けます。
    このコードはブログごとに変更箇所がありますので注意して下さい。
     

    <!--Facebookボタン-->
        <div class="fb-like" data-href="http://rokufc2.blog.shinobi.jp
    <!--$entry_link-->" data-send="true" data-layout="button_count" data-width="200" data-show-faces="true"></div>
     <!--Facebookボタン-->

    変更箇所はdata-hrefのリングURLをブログのURLに書き換えるだけです。
    赤文字の所を自分のブログのURLに書き換えてスラッシュを挟まないで<!--$entry_link-->と記載します。
    <!--$entry_link-->は忍者ブログの独自タグで記事ごとのURLの末尾の部分にあたります。
    PR




    ■ この記事にコメントする
    お名前
    タイトル
    文字色
    URL
    コメント
    パスワード
    Vodafone絵文字 i-mode絵文字 Ezweb絵文字
    ■ コメント一覧
    Adobeが超高級ソフトのフォトショップとイラストレイターを無料配布!? HOME webサイトのコピーライトを動的に自動更新する
    ©パソコン手探り all rights reserved.
    Powered by ニンジャブログ  Designed by ピンキー・ローン・ピッグ
    忍者ブログ / [PR]