(cache) 【はてなブログ用】この記事が気に入ったらいいねを設置する方法（コピペOK）

この記事が気に入ったらいいねを設置する方法

こんにちは。Facebookページを作ったものの、なかなか「いいね」が集まらないケーです（苦笑）

Facebookページを業務で運営する場合だと、ターゲットに沿ったユーザー向けに広告を出したりしますが、プライベートだと敷居がちょっと上がります。

バイラルメディアでよく見かけますがFacebookページのいいね(購読)を増やす方法の一つである「この記事が気に入ったらいいね」をつけましたので、その方法を説明します。

↓こんなのです。この記事が気に入ったらいいね

※この記事は、はてなブログユーザー向けです。

設置方法

こちらの記事を参考にさせていただきました。この記事では動的にアイキャッチを変更する方法とモバイルページの設置方法が無かったので対応してみました。

ichitaso.com

PC

まず記事内にはてなブログでの設置方法という部分がありますので、そちらを参考に【デザイン】ー【カスタマイズ】ー【記事】の記事下に埋め込みHTMLと【デザイン】ー【カスタマイズ】ー【デザインCSS】を貼り付けます。

<div class="p-entry__push">
  <div class="p-entry__pushThumb" style="background-size:auto 100%;background-image: url('【画像URL】)"></div>
  <div class="p-entry__pushLike">
    <p>この記事が気に入ったら
      <br>いいね！しよう
    </p>
    <div class="p-entry__pushButton">
      <div class="fb-like" data-href="【FacebookページのURL】" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
    </div>
    <p class="p-entry__note">最新情報をお届けします</p>
  </div>
</div>
<div class="p-entry__tw-follow">
  <div class="p-entry__tw-follow__cont">
    <p class="p-entry__tw-follow__item">Twitterで【サイト名もしくは名前】をフォローしよう！</p>
    <span style="vertical-align: -9px;"><a href="【TwitterのURL】" class="twitter-follow-button p-entry__tw-follow__item" data-show-count="false" data-size="large" data-show-screen-name="false">Follow @【Twitterのアカウント名】</a></span>
  </div>
</div>

こちらの画像部分は後ほど、動的に変更しますので適当な画像を指定します。

<div class="p-entry__pushThumb" style="background-size:auto 100%;background-image: url('【画像URL】')"></div>

その他【】で囲まれている部分は適宜変更してください。

次に以下のコードを先ほど追記した【記事下】部分に追記します。

このコードは記事内にある最初の画像を「この記事が気に入ったらいいね」のアイキャッチ部分に置き換えています。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
(function ($) {
    $(function() {
        var src = $('.entry-content img:visible:first').attr('src');
        if (!src) return;
        $('.p-entry__pushThumb').css('background', 'url(' + src + ')');
        $('.p-entry__pushThumb').css('background-size', 'cover');
        $('.p-entry__pushThumb').css('background-position', 'center');
    });

})(jQuery);
</script>
※既にjqueryを読み込んでいる場合は、１行目は不要です。

モバイル

モバイルページは以下のサイトを参考に追加しました。

javascriptの内容はPCと同じで記事内最初の画像をアイキャッチに設定しています。

sukina-koto.com

【デザイン】ー【スマートフォン】ー【記事下】に以下のコードを追加します。

<div class="p-shareButton p-asideList p-shareButton-bottom">
        <div class="p-shareButton__cont">
          <div class="p-shareButton__a-cont">
            <div class="p-shareButton__a-cont__img" style="background-image: url('【画像URL】')"></div>
            <div class="p-shareButton__a-cont__btn">
              <p>この記事が気に入ったらいいね！しよう</p>
              <div class="p-shareButton__fb-cont p-shareButton__fb">
                <div class="fb-like" data-href="【FacebookページのURL】" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
                <span class="p-shareButton__fb-unable"></span>
              </div>
            </div>
          </div>
        </div>
        <div class="p-asideFollowUs__twitter">
          <div class="p-asideFollowUs__twitter__cont">
            <p class="p-asideFollowUs__twitter__item">Twitterで【サイト名もしくは名前】を</p>
            <a href="【TwitterのURL】" class="twitter-follow-button p-asideFollowUs__twitter__item" data-show-count="false" data-size="large" data-show-screen-name="false">Follow @【Twitterのアカウント名】</a>
            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
          </div>
        </div>
 </div>
<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/sdk.js#xfbml=1&version=v2.6&appId=358622050905881";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script>
(function ($) {
    $(function() {
        var src = $('.entry-content img:visible:first').attr('src');
        if (!src) return;
        $('.p-shareButton__a-cont__img').css('background-image', 'url(' + src + ')');
    });

})(jQuery);
</script>

【デザイン】ー【スマートフォン】ー【フッター】のCSS記述のある内に追記します。

/*記事がよかったら、いいねスマホ*/
.p-shareButton-bottom {
    padding-bottom: 15px;
    overflow: hidden
}
.p-shareButton__buttons {
    font-weight: 700;
    color: #fff;
    font-size: 13px;
    text-align: center
}
.p-shareButton__buttons>li {
    padding-left: 3px;
    padding-right: 4px
}
.p-shareButton__buttons .c-btn {
    padding: 8px 0;
    border-radius: 2px
}
.p-shareButton__buttons .c-ico {
    display: block;
    margin: auto auto 5px
}
.p-shareButton__fb {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    width: 115px
}
.p-shareButton__fb-cont {
    position: relative;
    width: 108px;
    margin: 0 auto
}
.p-shareButton__fb-unable {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px
}
.p-shareButton__cont {
    margin: 15px 0 0
}
.p-shareButton__a-cont {
    background: #2e2e2e;
    display: table;
    width: 100%
}
.p-shareButton__a-cont__img {
    display: table-cell;
    min-width: 130px;
    -webkit-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center
}
.p-shareButton__a-cont__btn {
    display: table-cell;
    padding: 12px;
    text-align: center
}
.p-shareButton__a-cont__btn p {
    font-size: 12px;
    color: #fff;
    font-weight: 700;
    padding: 5px 0 15px;
    line-height: 1.4;
    margin-bottom: 0px;
}
.p-asideFollowUs__twitter {
    border: 2px solid #e6e6e6;
    margin-top: 15px;
    padding: 12px 0
}
.p-asideFollowUs__twitter__cont {
    text-align: center;
    font-size: 13px;
    color: #252525;
    font-weight: 700
}
.p-asideFollowUs__twitter__item {
    display: inline-block;
    vertical-align: middle;
    margin: 0 2px
}
.fb-like iframe {
    max-width: none!important;
}