Mt.Nanami「ライブドアブログに強いフリーランス」

WordPressにプラグイン無しの自作シェアボタンを追加しました。

nanami

nanamiです。

そういえばシェアボタンを付けて無かったなと気づき、まずオフィシャルが提供しているボタンを入れるかWordPressのプラグインで済ますかの2択を考えました。
大体オフィシャルのボタンというものを入れるとページの表示に時間がかかりがち。それぞれのサービスで見た目もバラバラなので統一感のあるアイコンを並べてくれるプラグインを使うことにしました。

しかしローカル環境でいくつかプラグインを入れてテストしてみたのですが、機能的にいいなと思っても自分が必要だと思う最低限のサービスをサポートしていないんですよね。主にはてなブックマーク。日本のサービスだから仕方ないけども。かと言ってはてブを切り捨てる勇気は無い。自分自身が10年以上のはてブユーザーですし。

そうすると面倒で選択肢から除外していた「自作」以外に解決法がなくてですね・・・やりましたよ！ ええ。

というわけで今回追加したのは

の8つです。

このブログのコンテンツ的にはLINEで共有するようなものはおそらくないのでいらないかなと思ったんですが、デザイン的に一定の個数が欲しかったので泣く泣く入れました。いらないけど。今後他のブログに転用することもありそうなのでまぁいいかと。

HTML

それぞれのサービスへのシェア(登録)するURIをいちいち調べるのは非効率なので下記の先人の記事を参考にさせていただきました。
WordPressでツイッターやフェイスブック等SNSのシェアボタンを設置する方法（プラグインなし）

<ul class="socialBtn">
<li><a class="twitter" href="http://twitter.com/intent/tweet?text=<?php echo urlencode(the_title("","",0)); ?>&amp;<?php echo urlencode(get_permalink()); ?>&amp;url=<?php echo urlencode(get_permalink()); ?>" target="_blank" title="Twitterでシェアする"><span>Twitter</span></a></li>
<li><a class="facebook" href="http://www.facebook.com/sharer.php?u=<?php echo urlencode(get_permalink()); ?>&amp;t=<?php echo urlencode(the_title("","",0)); ?>" target="_blank" title="facebookでシェアする"><span>Facebook</span></a></li>
<li><a class="pocket" href="http://getpocket.com/edit?url=<?php echo urlencode(get_permalink()); ?>" target="_blank" title="Pocketであとで読む"><span>Pocket</span></a></li>
<li><a class="feedly" href="http://cloud.feedly.com/#subscription%2Ffeed%2F<?php echo urlencode(bloginfo('rss2_url')); ?>" target="_blank" title="Feedlyで購読する"><span>Feedly</span></a></li>
<li><a class="google" href="https://plus.google.com/share?url=<?php echo urlencode(get_permalink()); ?>" target="_blank" title="Google+でシェアする"><span>Google+</span></a></li>
<li><a class="hatena" href="http://b.hatena.ne.jp/add?mode=confirm&amp;url=<?php echo urlencode(get_permalink()); ?>&amp;title=<?php echo urlencode(the_title("","",0)); ?>" target="_blank" data-hatena-bookmark-title="<?php the_permalink(); ?>" title="このエントリーをはてなブックマークに追加する"><span>はてブ</span></a></li>
<li><a class="line" href="https://timeline.line.me/social-plugin/share?url=<?php echo urlencode(get_permalink()); ?>" target="_blank" title="LINEでシェアする"><span>LINE</span></a></li>
<li><a class="rss" href="<?php echo urlencode(bloginfo('rss2_url')); ?>" target="_blank" title="RSSで購読する"><span>RSS</a></span></li>
</ul>

サービスの並び順は正直納得がいっていませんが、それぞれのサービスの色を背景に使った関係で隣同士に配置すると色が混ざって見える問題が発生しまして。色々考えた結果の妥協の並び順です。

参考に挙げた「サブローデザイン」さんのHTMLからの主な変更点は下記になります。

元のhrefがこちら。

http://line.naver.jp/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>

今回変えたのがこちら。

https://timeline.line.me/social-plugin/share?url=<?php echo urlencode(get_permalink()); ?>

前者はスマートフォンのみに対応していて、送信先は友達orグループorトークです。対応していないPCからクリックするとLINEのオフィシャルページに飛びます。
後者はPC版にも対応しているものになります。PCからはLINEのタイムラインへ送信することができて、スマートフォンからは友達orグループorトークorタイムラインに送信することが出来ます。
これは差し替えない理由がほぼ無いです。ほぼ。

CSS

ul.socialBtn {
    clear: both;
    list-style: none;
    margin: 10px 0;
    text-align: center;
}
ul.socialBtn:after {
    content: '';
    clear: both;
    display: table;
}
ul.socialBtn li {
    float: left;
    width: 25%;
}
ul.socialBtn li a {
    display: block;
    color: #fff;
    text-decoration: none;
    line-height: 42px;
    letter-spacing: .05em;
    font-size: 16px;
}
ul.socialBtn li a.twitter {background: #1da1f2;}
ul.socialBtn li a.facebook {background: #3b5998;}
ul.socialBtn li a.google {background: #db4437;}
ul.socialBtn li a.line {background: #00b900;}
ul.socialBtn li a.pocket {background: #ee4056;}
ul.socialBtn li a.hatena {background: #00a4de;}
ul.socialBtn li a.feedly {background: #51b139;}
ul.socialBtn li a.rss {background: #ffa500;}
ul.socialBtn li a:before {
    position: relative;
    bottom: -1px;
    font-family: 'icomoon';
    display: inline;
    margin-right: 5px;
    line-height: 1;
}
ul.socialBtn li a.twitter:before {content: "\ea96";}
ul.socialBtn li a.facebook:before {content: "\ea91";}
ul.socialBtn li a.google:before {content: "\ea8c";}
ul.socialBtn li a.line:before {content: "\e902";}
ul.socialBtn li a.pocket:before {content: "\e903";}
ul.socialBtn li a.hatena:before {content: "\e901";}
ul.socialBtn li a.feedly:before {content: "\e900";}
ul.socialBtn li a.rss:before {content: "\ea9c";}

@media screen and (max-width: 959px) {
    ul.socialBtn li a {
        font-size: 20px;
    }
    ul.socialBtn li a span {
        clip: rect(1px, 1px, 1px, 1px);
        height: 1px;
        overflow: hidden;
        position: absolute !important;
        width: 1px;
        word-wrap: normal !important;
    }
    ul.socialBtn li a:before {
        margin-right: 0;
    }

}

このCSSはあくまでこのブログに適用する上でのものです。コピペしただけじゃおそらく不十分なので若干の調整が必要になると思いますので参考にどうぞ。ここがうまくできないなどの質問はコメントをいただければ可能な限りお手伝いできると思いますのでお気軽に。

このブログではブラウザの表示領域が959px以下の場合にスマートフォン用のCSSを当てています。
後半の@media screen and (max-width: 959px)以下がそれで、これが適用されるとそれぞれのボタンの上にはサービスアイコンのみが表示されるようになります。

今回それぞれのサービスアイコンはWebフォントを使用していますが、これも先人の記事を参考にさせていただきました。
ブログのデザインでも使用している「Webフォントアイコン」を本当にオススメしたい！
アイコンフォントでLINE、はてなブックマーク、feedlyを作ってみる

Webフォントは本当に便利です。色や大きさはCSSで編集が容易だし、フォントなので拡大しても画像のように荒れることもありません。感動。

Javascript(jQuery)

アイコンをクリックした後のシェアページは、サービスによって小さなウインドウを想定した画面になっている場合があります。TwitterやFacebookがそうですね。
上記のHTMLとCSSのみでも十分な動作をしますが、個人的にはもう少しオフィシャルに近づけたいのでJavascriptで味付けをしました。

$(function(){
    var btn = $('.socialBtn a');
    btn.each(function(){
        if($(this).hasClass('twitter') || $(this).hasClass('facebook')){
            $(this).on('click', function(){
                window.open($(this).attr('href'), '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=no,height=350,width=600');
                return false;
            });
        } else if($(this).hasClass('hatena')) {
            $(this).on('click', function(){
                window.open($(this).attr('href'), '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=no,height=600,width=540');
                return false;
            });
        } else if($(this).hasClass('google')) {
            $(this).on('click', function(){
                window.open($(this).attr('href'), '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=no,height=600,width=410');
                return false;
            });
        } else if($(this).hasClass('line')) {
            $(this).on('click', function(){
                window.open($(this).attr('href'), '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=no,height=600,width=600');
                return false;
            });
        };
    });
});

先述したHTMLの構造とclass名がそのままで、そのページにjQueryが読み込まれていればこのスクリプトはそのまま動くはずです。aタグの中のテキストやtitleなどの属性は変更しても問題ありません。
これを使用するとTwitter、Facebook、はてなブックマーク、Google+、LINEのボタンをクリックした際にそれぞれに(個人的な感性で)適した(と思われる)小さめなウインドウが開くようになります。

なんだかんだ言って自作してみたらこれもまたいい勉強になりました。特にWebフォント。便利すぎるので今後も積極的に使って行こう。

Exit mobile version