アイディアボード

Just another WordPress site

最高のWordPressテーマStingerのSNSボタンを軽量化する。#Stinger-WP

   

Advent_black_b_ex1
この記事はStinger Advent Calendar 2013の6日目の記事として書いています。

Adcent Calender とは

Adcent Calenderは12月1日〜12月25日に行われるリレー日記の様なイベントです。
基本的に、お題にしたプログラミング関連技術について、沢山の人がいろんな記事を書いてバトンを渡す形になってます。

Advent Calenderの種類は数多く、頓挫したAdvent Calenderもありますが、まぁそんなに肩に力入れてガッツリとしなくても良いのです。

極端な話、某WordPress Advent Calenderの様にネタに走ってしまっても良くて、何を書こうが自由。Advent Calenderは一応技術系イベントですが、例え技術的なネタがなくともフリーダムにやればいいんじゃないのかなって思ってます。

ネタに走るつもりはないけど、Advent Calender初参加だからどうやればいいかわからないし、なんか書きにくいなぁなんて思っている方は、こちらをご覧あれ。

Advent Calendar の書き方という内容のLTをしてきました - TitaniumMobile勉強記

ちなみにTitanium MobileというのはiPhone・Androidアプリ制作フレームワークのことです。
で、この記事はStinger Advent Calendar 2013の6日目の記事として書いています。
そういえば主催者の@niji_mamiさんに
「Stingerのヘッダー画像みたいなバナーとか良くないっすか?」
って言って、しかも作ってもらったのに当ブログには掲載されておりませぬ。

開き直って白状すると、当ブログの更新頻度からしてお察しくださいという話なのですが、この場でお詫びしておきます…
申し訳ありません、フォントで有名なモリサワってところでインターン始まって、ブログ触ってる時間なかったんです。m(_ _)m

ウチのテーマはSNSボタンの軽量化です

Stingerが今年の4月ごろに流行りはじめた時、よく言われていたのは
「左下の、スクロールしてもついてくるSNSボタンが目立つ」
というお話でした。

@ENJILOG さんは拡散を狙って目立つ配置にしたんだと思います。

しかし、原因は判然としませんが、StingerやそれをベースにカスタムしたブログのSNSボタンがうまく読み込めていないことが多々あったのです。
スクリーンショットを残しておけばよかったなぁと思いますが、自分が覚えている範囲では

辺りはSNSボタンの読み込み不全が「まれによくある」と言った状況でした。
10月ごろはよく見たものの、最近はそんなでもないので、Stingerのアップデートで治ったのかもですが。

しかし、これを機にSNSボタンのJavaScriptを解析したところ、たかだかボタンひとつになんでこんなことになってしまったのかと思うほど複雑で面倒くさいことになっていました。
非同期コードにしてても、充分にサイトが遅くなる原因たり得ていました。

SNSボタンの改良をPHPで実施

と、いうわけでちょこっと改造。JavaScriptを使わず、PHPのコードのみで完結させました。
やったのは以下のとおり。

functions.php

function countTweetNum($url){//ツイート数取得
    $get_twitter = 'http://urls.api.twitter.com/1/urls/count.json?url=' . $url;
    $json = file_get_contents($get_twitter);
    $json = json_decode($json);
    $twitter = $json->{'count'};
    print("$twitter");
}
function countFbNum($url){//facebook(いいね! + シェア)数取得
    $get_facebook = 'http://api.facebook.com/restserver.php?method=links.getStats&urls=' . $url;
    $xml = file_get_contents($get_facebook);
    $xml = simplexml_load_string($xml);
    $facebook = $xml->link_stat->total_count; //いいね!のみ…like_count、shareのみ …share_count
    print("$facebook");
}
function countHatebuNum($url){//はてブ数取得
    $get_hatebu = 'http://api.b.st-hatena.com/entry.count?url=' . $url;
    $hatebu = file_get_contents($get_hatebu);
    if($hatebu == ""){$hatebu = 0;}
    print("$hatebu");
}

を追記。

functions.phpに追記する時は、WordPressがエラー吐いて画面が真っ白になっても焦らない覚悟と、最後の“?>”の直前に追記すると割と安心だよねって事を忘れないでください。

このコードにより、テーマ内で

  • countTweetNum()
  • countFbNum()
  • countHatebuNum()

という3つの関数を呼べる様になりました。名前の通り、代入したURLが各SNSでどれだけ拡散されたか(ツイート数とか)の数字を出してくれます。

sns.php

各種SNSのJavaScriptを使わずにSNSボタンを実装するため、aタグにonclickを仕込みます。
どこを書き換えたか忘れたので、まるっと全部載せておきます。


これで新しいSNSボタンの完成です。

見た目を整える

これだけだと見た目があまりにもあんまりなので調整します。あくまでサンプルとして当サイトの2013年12月6日現在のコードを載せます。

style.css

@font-face {
    font-family:'LigatureSymbols';
    src: url('fonts/LigatureSymbols-2.11.eot');
    src: url('fonts/LigatureSymbols-2.11.eot?#iefix') format('embedded-opentype'),
         url('fonts/LigatureSymbols-2.11.woff') format('woff'),
         url('fonts/LigatureSymbols-2.11.ttf') format('truetype'),
         url('fonts/LigatureSymbols-2.11.svg#LigatureSymbols') format('svg');
    src: url('fonts/LigatureSymbols-2.11.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
/*SNSボタン共通設定*/
.sns-button{
    display:block;
    float:left;
    width:85px;
    height:60px;/*白銀比*/
    color:#fff;
    text-decoration:none;
    font-weight:900;
    font-size:12px;/*これが.sns-buttonのレイアウト原点*/
}
.kurage-icon:before{
    font-family:'LigatureSymbols';
    -webkit-text-rendering: optimizeLegibility;
    -moz-text-rendering: optimizeLegibility;
    -ms-text-rendering: optimizeLegibility;
    -o-text-rendering: optimizeLegibility;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -ms-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    font-smoothing: antialiased;
    content:attr(title);
    margin-right:3px;
    font-size:300%;
    font-weight:100;
    vertical-align:top;
}
.share-num{
    padding-top:6px;
    font-size:200%;
    line-height:100%;
    text-align:center;
}
/*SNS色分け*/
.twitter{
    background-color:#00c6f2;
}
.facebook{
    background-color:#3B5998;
}
.hatebu{
    background-color:rgb(44, 110, 189);
}

smart.css

.twitter{
    background-color:#00c6f2;
}
.facebook{
    background-color:#3B5998;
}
.hatebu{
    background-color:rgb(44, 110, 189);
}
/*SNSmini*/
.sns-button{
    display:block;
    float:left;
    color:#fff;
    text-decoration:none;
    padding:0 5px;
    vertical-align:middle;
}
.kurage-icon:before{
    font-size:20px;
    font-weight:100;
    margin-right:3px;
}
.kurage-icon{
    font-weight:900;
    font-size:15px;
}

Webフォントの追加

ここまでのコードを読んだ方ならお分かりでしょうが、PCサイト版のみWebフォントを使ってアイコンを表示しています。

Ligature Symbols

こちらのくらげさんに深くお辞儀をしたあと、フォントをダウンロードし、Stingerがインストールされているフォルダにfontsフォルダを作ってそこに置きます。

WordPressをインストールしたディレクトリ/wp-content/themes/自分が使っているStinger/fonts

です。

これでPHPによる高速なSNSボタンを作る事が出来ました。

One more thing…

このコード、当然PHPなので、実行される度に「その時点の」SNS拡散数を拾ってきます。

つまり、WP Super Cacheとか、W3 Total Cacheとか、キャッシュ系プラグインを入れている場合は、リアルタイムで数字を取ってこれないという事になります。

それじゃあダメだろ、という声もあろうかと思い、jQuery版で対応作業を進めています。

まぁ、jQueryで$.ajaxとしてAPI叩くのは目新しくもなんともないのですが、今度は見た目も標準のSNSボタンと同じレベルにまで持って行こうと思って、GitHubに公開しながら制作を進めています。

white-ayato / compare-ajax-tweetbutton

GitHubというかGitによるバージョン管理自体、今月(2013年12月)に初めて触ったレベルなのですが、すっごい便利ですね。マイペースでちょくちょく進めていこうかなと思ってます。
完成したらどこかで告知するかと思いますが、最新のを追っかけたいかたはどうぞGitHubでお星様を付けて下さい。

以上でStinger Advent Calender 2013 6日目を終わります。
明日は 瑞佳 さんの記事です!

Advent_black_b_ex1

 - 解説記事 ,