WordPress詳細記事下にTwitter、Feedly、Push7 のフォローボタンを設置!

英語アドバイザー(@eigojouhou)鈴江です。

本日は英語以外のテーマ、ワードプレスのお話です。

このブログの詳細記事下には、Twitter、Feedly、Push7 のフォローボタンを設置してあります。もちろん、素人のわたしにはこのカスタマイズは出来ません。専門家の力を借りてセットいたしました。

「風の羅針盤」というブログを主幹する、ちゃぼP(@chabo0429)さんのサイトで公開しているコードを拝借して完成させました。悪戦苦闘しながらでしたが、なんとかたどり着くことが出来ました。

ちゃぼP(@chabo0429)ありがとうございます!

フォローボタン!

これです!

 

無題

奇麗でしょう。

・Twitter、Feedly、Push7のロゴマークに入っております。
・そのサイドにフォロー数が表示されております。
・さらにその下には文言も入っております。

注:ツイッターのカウント集は、わたくしの都合でまだ表示されておりません。近々処理して表示させます。

本日は、この設置の概要をご説明したいと思います。勿論詳細は、ちゃぼP(@chabo0429)さんのサイト記事を案内しますので、そちらをご参照ください。

TFPのボタン説明記事!

TFPはTwitter、Feedly、Push7のことです。

彼の記事はこれです。

http://www.omoide-soko.jp/apps/wordpress/wordpress/4458

丁寧に説明されています。根気よくじっくり読むことが重要です。

当然のことですが、この記事を1~10まで読見込んで同様のことを実施しても完成しません。事前にセットしておかねばならないことがあるからです。

SNS Count Cache!

このプラグインも事前にダウンロードしておいてください。このセットに関連する説明が以下の記事で書かれています。要参照です。

http://www.omoide-soko.jp/apps/wordpress/wordpress/4339

さらに、ツイッターのカウント取得には次のステップを踏む必要があります。

それが、代替のAPIである「coount.jsoon」!

coount.jsoon!

http://www.omoide-soko.jp/apps/wordpress/wordpress/1384#APIcoountjsoon

それの、「1 代替のAPIである「coount.jsoon」」です。

http://jsoon.digitiminimi.com/のサイトにログインして手続きを始めます。

 

さあ、もう一息ですよ。最初の画像に戻ります。

FBのいいね!ボタン設置!

無題

最後になってしまいました。この3つのフォローボタンの上に、フェイスブックの「この記事が気に入ったらいいね!しょう」ボタンが付いています。

このコードについては、わたしのヤツを添付しておきますので、ご確認の上ご利用ください。

注:コード利用はあくまで「自己責任」にてお願いしますよ。うまくいかなくても関知いたしませんので、よろしくです。

まずは、デザインをセットするコードです。style.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: 0;
}
.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: 10px 12px 30px 12px;
    text-align: center;
}
.p-shareButton__a-cont__btn p {
    font-size: 12px;
    color: #fff;
    font-weight: 700;
    padding: 0px 0 5px;
    line-height: 1.4;
    margin-bottom: 0px;
}

/*記事がよかったら、いいねPC*/
.p-entry__push {
    margin-bottom: 20px;
    display: table;
    table-layout: fix;
    width: 100%;
    background-color: #2b2b2b;
    color: #fff;
}
.p-entry__pushThumb {
    display: table-cell;
    min-width: 240px;
    background-position: center;
background-size:cover;
}
.p-entry__pushLike {
    display: table-cell;
    padding: 10px;
    text-align: center;
    vertical-align: middle;
    line-height: 1.4;
    font-size: 20px;
}
.p-entry__pushButton {
    margin-top: 15px;
    display: inline-block;
    width: 200px;
    height: 40px;
    line-height: 20px;
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}
.p-entry__pushButtonLike {
    line-height: 1;
}
.p-entry__note {
    margin-top: 5px;
    font-size: 12px;
    color: #999;
}

続いて、以下のコードを個別投稿 single.php にはりつけます。私の場合は「<div id=”under-entry-body”>」の下にセットしました。

それと、https://www.facebook.com/eigojouhou/が2か所ありますが、eigojouhou にはご自身のページの名称を入れてくださいね。

<!-- 記事がよかったらいいね ここから -->
<?php if (is_mobile()) :?>
      <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('<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>')"></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="https://www.facebook.com/eigojouhou/" 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>
<?php else: ?>
<div style="padding:10px 0px;"></div>

<!-- 記事がよかったらいいねPC -->
            <div class="p-entry__push">
              <div class="p-entry__pushLike">
                <p>この記事が気に入ったら<br>いいね!しよう</p>
                <div class="p-entry__pushButton">
<div class="fb-like" data-href="https://www.facebook.com/eigojouhou/" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
                </div>
                <p class="p-entry__note">最新情報をお届けします</p>
              </div>
              <div class="p-entry__pushThumb" style="background-image: url('<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>')"></div>
            </div>
                        
<?php endif; ?>
<!-- 記事がよかったらいいね ここまで -->

いかがでしでしょうか?

まとめ!

どんなにきちっとセットされていても、ユーザーの目に留まらなければ、押してくれません。それがあなたのファンの人であったとして、ユーザーは忙しいのです。

ですからいつもユーザーにとって見やすく、行動を起こしやすいようにすることが重要だ、とわたしは思っております。

で、最後に、以下の2SNSの登録先を添付しておきますので活用ください。
Push7:https://push7.jp/
Feedly:http://feedly.com/

お疲れ様です。

こんな関連記事もどうぞ:

お力を借りてトップページにカテゴリーの最新記事を設置できました!

記事ごとでトータル何人シェアしてくれたかひと目でわかるカウントを設置!

アイキャッチ画像:ちゃぼP(@chabo0429

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA