家にいるときはPCで何かしら作業しているのであまり意識することは少ないのですが、平日の仕事の合間などにはよく『WordPress』のスマホアプリでアクセス数をチェックしたりしています。

アクセス数の他にも『リファラ』という、どこから当ブログに飛んできたのかを一覧で見ることもでき、たいていは検索エンジンからの流入なのですが、たまに他のブログなどのリンクからの流入があって嬉しくなることも。

つい先日も『リファラ』をチェックしていたところ『Pocket』なるサービスを見つけました。詳細は割愛させて頂きますが、ブックマークサービスの一種の様ですね。

ここ最近まではSNSボタンの配置さえもしていなかったのですが、そういったサービスを介したアクセスが今後も見込まれるので、SNSボタンを配置することにしました。

『賢威8』デフォルトのSNSボタン

賢威8』にはデフォルトでSNSボタンの配置機能が搭載されており、『SNS設定』画面から表示の設定をすることが出来ます。

トップページの表示

トップページでは投稿一覧の一番上の部分および各記事のパネルに表示されます。

投稿ページの表示

投稿ページでは記事表示領域の一番上と一番下(コメントや関連記事などの間)に表示されます。

上記の通り、『SNS設定』画面からの設定だけでは『Twitter』『Facebook』『はてなブックマーク』の3つのボタンしか表示されません。

今回『リファラ』に出現した『Pocket』をはじめとする他のサービスを追加していきたいと思います。

『Pocket』および『LINE』のSNSボタン

SNSボタンを追加するにあたり、一番最初に参考にさせて頂いた投稿がこちらです。

結論から言ってしまえばこちらの投稿だけでやりたかったことの半分は済ませられたのですが、業務系エンジニアにはまだWeb系の記載がスッと入ってこなかったため、他にこちらの投稿も参考にさせて頂きました。

「禍を転じて福と為す」ではありませんが、上記の投稿を参考に私がまず行ったのは「sns-btn_fb」のGrep検索でした。

改修作業を行う際に「まずは既存の理解から」と真っ先に考えるのも仕事柄でしょうか。

余談は置いておいて、Grep検索の結果なんと『utility.js』に『Twitter』『Facebook』『はてなブックマーク』だけではなく、『Google+』『Pocket』『LINE』用のSNSボタンが用意されていました。

これは『賢威』側から試されているのかと思いたくなるレベルです。

よって『Pocket』および『LINE』のSNSボタンの配置に関しては下記のようなコード追加により実現できます。

if ( ! function_exists( 'keni_get_sns' ) ) {
    function keni_get_sns( $link_str = "", $title_str = "", $disp = false ) {
        $link = "";
        $title = "";
        if ( $link_str != "" ) $link = ' data-url="' . esc_attr( $link_str ) . '"';
        if ( $title_str != "" ) $title_str = urlencode( $title_str );
        if ( $title_str != "" ) $title = ' data-title="' . esc_attr( $title_str ) . '"';
        ob_start();
        ?>

        <div class="sns-btn_tw"<?php echo $link; ?><?php echo $title; ?>></div>
        <div class="sns-btn_fb"<?php echo $link; ?><?php echo $title; ?>></div>
        <div class="sns-btn_hatena"<?php echo $link; ?><?php echo $title; ?>></div>

        // 追加したコード
        <div class="sns-btn_line"<?php echo $link; ?><?php echo $title; ?>></div>
        <div class="sns-btn_pocket"<?php echo $link; ?><?php echo $title; ?>></div>

        <?php
        $ret = ob_get_contents();
        ob_end_clean();

        // keni_get_sns_html フックで拡張する
        $ret = apply_filters( 'keni_get_sns_html', $ret, $link_str, $title_str );

        if ( $disp == false ) {
            return $ret;
        }
        echo $ret;
    }
}

変更するファイルは『keni-sns.php』になります。

パソコン版の表示

パソコンの画面では既存に加えて綺麗に表示されます。

スマホ版の表示

スマホ版はというと、表示するボタンの数が増えた分、領域が狭まってしまったことでなんとも微妙な見え方となってしまいました。

こちらは改善していく必要がありますが、今回は「もう一つボタンを追加し、2行3列の表示にする」ことにしました。

『Feedly』のSNSボタン

SNSボタンを追加するにあたり、少し昔であれば使われていなかった『Google+』のボタンを先程の手順で追加するだけでよいのですが、『Google+』はどうやら間もなくサービス終了とのことだったので、新たに他のサービスのボタンを作成していく必要がありました。

そこで真っ先に思い浮かんだのが、以前当ブログでも使用していた『XeoryBase』の投稿ページ下部に表示されていた『Feedly』というサービスです。

サービス自体は良く知らなかったのですが、今はとりあえず『Pocket』と同じ類と捉えてます。

『Feedly』のSNSボタンを作成する

既に追加されていた『Pocket』や『LINE』とは異なり、『Feedly』のSNSボタンは新規追加していく必要があります。追記が必要なファイルは『utility.js』『base.css』『keni-sns.php』になります。

utility.js

最初にGrep検索をして見つけた、各SNSボタンを作成するJavascriptコードの下に下記のコードを追加します。

/* feedly */
$('.sns-btn_feedly').each(function () {
    $(this).append('<a target="_blank" href="(自分のサイト用のURL)"><i class="fa fa-rss"></i><span>Feedly</span></a></a>');
});

コード内の「自分のサイト用URL」の取得に関しては、下記の投稿を参考にさせて頂きました。

最初は規定URLに対して直接サイト名などを打ち込んでいたのですが、どうやら『Feedly』独自のURLエンコードがあるようで、『Feedly』サイトから直接調達するのが早そうです。

恐らくサイトURLに加えて記事タイトルなども利用することが出来るのでしょうが、今回は諦めました…。

base.css

Javascriptで生成されたボタンのスタイルを定義する必要があります。

Feedly』のSNSボタンのスタイルとして、下記のコードを追記します。(追記するときにも既存のSNSボタンの近くに置いとくと見やすいです。)

.sns-btn_wrap > .sns-btn_feedly a{
	color: #87c040;
}

keni-sns.php

最後に実際に表示させる処理を記述します。

if ( ! function_exists( 'keni_get_sns' ) ) {
    function keni_get_sns( $link_str = "", $title_str = "", $disp = false ) {
        $link = "";
        $title = "";
        if ( $link_str != "" ) $link = ' data-url="' . esc_attr( $link_str ) . '"';
        if ( $title_str != "" ) $title_str = urlencode( $title_str );
        if ( $title_str != "" ) $title = ' data-title="' . esc_attr( $title_str ) . '"';
        ob_start();
		?>

        <div class="sns-btn_tw"<?php echo $link; ?><?php echo $title; ?>></div>
        <div class="sns-btn_fb"<?php echo $link; ?><?php echo $title; ?>></div>
        <div class="sns-btn_hatena"<?php echo $link; ?><?php echo $title; ?>></div>

        // 追加したコード
        <div class="sns-btn_line"<?php echo $link; ?><?php echo $title; ?>></div>
        <div class="sns-btn_pocket"<?php echo $link; ?><?php echo $title; ?>></div>

        // さらに追加したコード
        <div class="sns-btn_feedly"<?php echo $link; ?><?php echo $title; ?>></div>

        <?php
        $ret = ob_get_contents();
        ob_end_clean();

        // keni_get_sns_html フックで拡張する
        $ret = apply_filters( 'keni_get_sns_html', $ret, $link_str, $title_str );

        if ( $disp == false ) {
	        return $ret;
        }
        echo $ret;
    }
}

パソコン版の表示

ひとまずこれで一つ目の課題「もう一つボタンを追加」が完了しました。

SNSボタンの分割表示

続いて二つ目の課題「2行3列の表示にする」に関してですが、こちら私のWeb系知識が乏しいせいか納得いく仕上がりまで半日ほどかかりました…。CSSって大変。

変更したファイルは『keni-sns.php』および『base.css』になります。

keni-sns.php

SNSボタンを作成する部分を下記のように変更します。

<div>
    <div class="sns-btn_tw"<?php echo $link; ?><?php echo $title; ?>></div>
    <div class="sns-btn_fb"<?php echo $link; ?><?php echo $title; ?>></div>
    <div class="sns-btn_hatena"<?php echo $link; ?><?php echo $title; ?>></div>
</div>
<div>
    <div class="sns-btn_line"<?php echo $link; ?><?php echo $title; ?>></div>
    <div class="sns-btn_pocket"<?php echo $link; ?><?php echo $title; ?>></div>
    <div class="sns-btn_feedly"<?php echo $link; ?><?php echo $title; ?>></div>
</div>

2行3列」を実現するために<div>タグで3個ずつ括るようにしました。

base.css

一部水平展開が必要となりますが、変更する内容は下記のとおりです。

.sns-btn_wrap > div{
	display: flex;
	justify-content: space-between;
}

.sns-btn_wrap > div div{
	width: 100%;
	background-color: rgba(255,255,255,0.85);
	border: 1px solid #ddd;
	border-radius: 4px;
	text-align: center;
}

.sns-btn_wrap > div div:hover,
.sns-btn_wrap > div div:active,
.sns-btn_wrap > div div:focus{
	-webkit-transition: 0.3s;
	transition: 0.3s;
	opacity: 0.5;
}

.sns-btn_wrap > div div a{
	display: block;
	padding: 3px 0;
	text-decoration: none;
	color: #fff;
	font-weight: bold;
}

.sns-btn_wrap > div .sns-btn_tw a{
	color: #1da1f2;
}

<div>の追加により階層が一つ増えたため、定義にdivを一個ずつ追加していきます。

上記のコードでは「sns-btn_tw」までとなっていますが、『Facebook』以降のボタンに関しても同様の変更が必要となりますのでご注意ください。

さらに追加した<div>のスタイルを「display: flex」および「justify-content: space-between」と定義しました。こちらに関しては割愛し、下記投稿をご参考ください。

パソコン版の表示

思い通りの配置になりました。

スマホ版の表示

こちらも問題なく全て綺麗に表示されるようになりました。

おまけ

NG集です。

単純な思い付きでtableタグ使って笑える感じになりました。

以上です。

スポンサーリンク