タグ: ソーシャルボタン

  • FeedlyのRSS登録ボタンを購読者数を付けてソーシャルボタン風に設置するサンプルを載せてみる。

    FeedlyのRSS登録ボタンを購読者数を付けてソーシャルボタン風に設置するサンプルを載せてみる。

    2014.01.31 加筆修正。number_format_i18n 関数を咬ませて出力。
    2015.01.28 購読 URL が変わったためコード変更

     

    今日の午前中メンションが飛んできまして、

    購読者数つきのFeedlyボタンを設置したので、その方法と参考にしたサイトを紹介

     

    ぼくの過去記事を参考にして頂いたらしく。

    そういえばこのブログでも自分で作ったボタンがあるなぁ、ということで紹介された勢いを借りてサンプルコードを載せておこうと思います。

    FeedlyのRSS登録ボタン購読者数付きのサンプルコード

    まず前提条件がいくつか。

    をご理解くださいませ。では早速。

    マークアップ

    phpにさしこむhtmlタグとphp文です。


    <a href="http://feedly.com/i/subscription/feed%2F<?php echo rawurlencode( get_bloginfo( 'rss2_url' ) ); ?>"
    class="feedlyButton"
    target="_blank"
    title="<?php bloginfo('name'); ?>のRSSをFeedlyで購読してみませんか">
    <div class="arrow_box_feedly">
    <span class="feedlyCount">
    <?php echo number_format_i18n( get_transient( 'feedly_subscribers' ) ); ?>
    </span>
    </div>
    <img id="feedlyFollow" src="http://s3.feedly.com/img/follows/feedly-follow-rectangle-flat-small_2x.png"
    alt="follow us in feedly" width="66" height="20">
    </a>

    入れたいところに書き込めばOKです。

    feedly_subscribers_regist_button_1
    この段階ではこんな感じになってるはず

    cssで見た目を整える

    ソーシャルボタン的にするためcssでスタイルを指定してあげます。

    a.feedlyButton {
    	color: #777777;
    	text-align: center;
    	text-decoration: none;
    }
    a.feedlyButton:hover {
    	color: #333333;
    }
    a.feedlyButton:visited {
    	color: #777777;
    }
    .arrow_box_feedly {
    	background: none repeat scroll 0 0 #FFFFFF;
    	border: 1px solid #CCCCCC;
    	border-radius: 3px 3px 3px 3px;
    	height: 35px;
    	width: 66px;
    	margin-bottom: 8px;
    	position: relative;
    	-webkit-box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	-ms-box-sizing: border-box;
    	box-sizing: border-box;
    }
    .arrow_box_feedly:after, .arrow_box_feedly:before {
    	border: medium solid transparent;
    	content: " ";
    	height: 0;
    	left: 50%;
    	pointer-events: none;
    	position: absolute;
    	top: 100%;
    	width: 0;
    }
    .arrow_box_feedly:after {
    	border-color: #FFFFFF rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
    	border-width: 4px;
    	margin-left: -4px;
    }
    .arrow_box_feedly:before {
    	border-color: #CCCCCC rgba(204, 204, 204, 0) rgba(204, 204, 204, 0);
    	border-width: 5px;
    	margin-left: -5px;
    }
    .arrow_box_feedly img {
    	margin: 0;
    	border: none;
    }
    .arrow_box_feedly span {
    	line-height: 35px;
    }

    テーマのcssに書き込みましょう。

    これで終了です、簡単ですね!表示サンプルはこちら(拡大してます、本来はwidth 66pxです)

    マウスホバーでブログタイトル+αのツールチップが出ます
    マウスホバーでブログタイトル+αのツールチップが出ます

    ちなみに、WordPress用の不動産プラグインを作ってらっしゃる nendeb.jp さんがいつの間にかこのブログと同じものを使っておられました。

    赤線部
    赤線部

    ホホまとめ

    2匹目のどじょうインスパイアを受けて書いてみました。

    他のブログと違った個性を出すためには色々試してみるのがいいですね。

    全く同じになっちゃうとちょっとオリジナリティがなくなるので、うちではマウスホバー時に~人目の~って出すようにしてます。

    横長のソーシャルボタンは使ってないので作っていませんが、リクエストがあれば作ってみようと思います。

    ボタンつけてだいぶ購読者さんが増えたのでなかなかに効果はあったのかな。

  • Google+のカウント数を取得するために色々試した結果がこちら

    Google+のカウント数を取得するために色々試した結果がこちら

    若干(というかわりかし無理矢理)ですけども無事、Google+の+1されたカウント数を取得できました。

    Google+はカウント数を取得するAPIが公式で提供されてないのでぼくはおこですよ全く。

    さて。

     

    最初に試したこと

    そりゃまぁGoogleで検索しますよね。

    検索すると非公式ながらも取得方法がありました。↓ via http://papermashup.com

    <?php
    /**
     * Show Google Plus’s – PHP function
     * via http://papermashup.com/google-plus-php-function/
     *
     * @param $url
     *
     * @return array|mixed
     */
    function gplus_shares( $url ) {
    
    	// G+ DATA
    	$ch = curl_init();
    	curl_setopt( $ch, CURLOPT_URL, "https://clients6.google.com/rpc?key=AIzaSyCKSbrvQasunBoV16zDH9R33D88CeLr9gQ" );
    	curl_setopt( $ch, CURLOPT_POST, 1 );
    	curl_setopt( $ch, CURLOPT_SSL_VERIFYPEER, false );
    	curl_setopt( $ch, CURLOPT_POSTFIELDS, '[{"method":"pos.plusones.get","id":"p",
    "params":{"nolog":true,"id":"' . $url . '","source":"widget","userId":"@viewer","groupId":"@self"},
    "jsonrpc":"2.0","key":"p","apiVersion":"v1"}]' );
    	curl_setopt( $ch, CURLOPT_RETURNTRANSFER, true );
    	curl_setopt( $ch, CURLOPT_HTTPHEADER, array( 'Content-type: application/json' ) );
    
    	$result = curl_exec( $ch );
    	curl_close( $ch );
    	return json_decode( $result, true );
    
    }
    ?>

     

    使ってみるよね

    これを使ってカウント数を取得するとですね、ええと、

    <?php
    // 関数にURLを投げてJSON取得
    $gplus = gplus_shares( 'http://hayashikejinan.com' );	// ぼくのブログURLで試してみます
    
    // カウント数だけ出力
    echo $gplus[0]['result']['metadata']['globalCounts']['count'];
    ?>
    <!-- JSONごと出力 -->
    <pre><?php print_r( $gplus ); ?></pre>

    こんな感じで返って来ます。

    こんなかんじ
    こんなかんじ

    「ちゃんと取得できてるんだからいいじゃん!」

    と思いきや、使ってるAPIキーが謎。ほんと謎。

    自分のGoogle+APIキーだとダメ。何のキーよ AIzaSyCKSbrvQasunBoV16zDH9R33D88CeLr9gQ って…

    さすがにちょっと気持ち悪いので他の方法を試す。(curl 使えないサーバーもあるっぽいよね!

     

    公式の+1ボタンからカウント数だけ取得したらよくない?

    という誰でも思いつくことをしましたよ。

    公式ボタンのスクリプトはGoogle+の諸機能を呼ぶやつなので、+1ボタンだけが欲しい。

    それっぽいのを探してみる。お、これは怪しい。

    ボタンっぽい
    ボタンっぽい

     

    スクリプトURLをコピーして、不要っぽいのを省いて呼んでみたら押せないただのボタンだけが表示された!いえす!

    拡大。押せないボタン呼べた。
    拡大。押せないボタンが呼べた。
    <?php
    $url = 'http://hayashikejinan.com';
    $gplus = file_get_contents( 'https://apis.google.com/_/+1/fastbutton?url=' . urlencode( $url ) );
    echo $gplus;
    ?>

    取得した内容はちょっと長いから割愛して、カウント数書かれてるところを探す。発見。

    ld:[,[2,【カウント数】,[ 常にこういう形で出てくる、同じ記述はない、つまり!正規表現でカウント数だけ頂ける!

     

    ちょっと横道にそれて正規表現

    phpで正規表現使って文字列抽出する関数は preg_match 。

     

    というわけでGoogle+のカウント数を取得するまとめ

    ここまでだらだら書きましたけども、取得は数行でできました。今回はphpで jQueryとかわかんない

    注意点は1つだけ、呼ぶスクリプトが https なので opensslモジュール 対応のサーバーが条件です!

    enableならおっけー
    enableならおっけー

    phpinfo で確認しときましょう。

    ローカルなら php.ini で extension=php_openssl.dll を解き放てばおっけーです

    phpinfoとかわかんないひとは↓これを書いてみればいいよ!

    <?php
    // openssl モジュール確認
    if ( ! extension_loaded( 'openssl' ) ) {
    	throw new Exception( 'openssl 拡張モジュールが有効になっていません。' );
    } else {
    	echo 'openssl 拡張モジュールが有効です';
    }
    ?>

     

    Google+のカウント数を取得するサンプルコード

    <?php
    /**
     * Google+ のカウント数だけを取得する関数
     *
     * @param $url
     *
     * @return mixed
     */
    function getGooglePlusCount( $url ) {
    	$plus = file_get_contents( 'https://apis.google.com/_/+1/fastbutton?url=' . urlencode( $url ) );
    	// 正規表現でカウント数のところだけを抽出
    	preg_match( '/\[2,([0-9.]+),\[/', $plus, $count );
    	return $count[1];
    }
    // 出力
    echo getGooglePlusCount("http://hayashikejinan.com");
    ?>

    こんな感じですね。長かった…

     

    ホホまとめ

    正直、curl使ったコードでええやん、という感想もあったり。

    ただまぁ今回やった方法が安心なのは間違いないんじゃないでしょうか。

    そもそもGoogleさんがちゃんとAPIを提供してくれればいいんですよまったく。

    いろいろやってみると勉強になっていいっちゃいいですね。

  • pocketのソーシャルボタンがリリースされてたのでつけてみた。

    pocketのソーシャルボタンがリリースされてたのでつけてみた。

    いやー全然知らなかったです、ボタン、あったんですねぇ。

    Pocket Button
    Pocket Button

     

    Pocket ってなあに

    そもそもですね。ざっくりいうと、あとで読むリストをつくるサービスです。

    androidアプリや

    Pocket
    Read It Later
    価格:無料
    平均評価:4.6(37,953)

    iPhoneアプリもあります

    Pocket (Formerly Read It Later)

    Pocket (Formerly Read It Later)
    Idea Shower
    価格: 0円
    iTunesで見る
    posted with sticky on 2013.4.20

     

    Pocket Button の設置方法

    公式のボタン作るページへ行って3種類の中から選ぶだけ。これ簡単。

    ボックスタイプならこうですね。スクリプトはフッターにでも置いとくとさらによいか。

    <a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en"></a>
    <script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>

    wordpressの場合

    wordpressだと今見てるページにしなきゃいけないですよね!

    …と思いきや上のコードで普通に対応してました(;´∀`)

    ただまぁせっかくなんでドキュメント通りにやりましょう。簡単ですね。

    パラメータは今のところ3つだけ、

    • data-save-url: ポケットさせたいURLを指定
    • data-pocket-count: ボタンの形式。none, horizontal, vertical の3種類。
    • data-pocket-align: data-pocket-countにhorizontalを指定した時だけ有効。ボタンを右側整列したときに right を指定しないとカウントが正しく表示されないんですって。

    将来的には data-lang で言語指定できるようになるんでしょうねきっと。

    ボタン形式 none

    表示はこんな感じ。Pocket// < ![CDATA[
    // < ![CDATA[
    // < ![CDATA[
    // < ![CDATA[
    // < ![CDATA[
    // < ![CDATA[
    // < ![CDATA[
    // < ![CDATA[
    // < ![CDATA[
    // < ![CDATA[
    //

    <a href="https://getpocket.com/save" class="pocket-btn" data-lang="en"
      data-save-url="<?php echo get_permalink(); ?>"
      data-pocket-count="none" 
      data-pocket-align="left"
      ></a>
    <script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>
    ボタン形式 horizontal

    Pocket// < ![CDATA[
    // < ![CDATA[
    // < ![CDATA[
    // < ![CDATA[
    // < ![CDATA[
    // < ![CDATA[
    // < ![CDATA[
    // < ![CDATA[
    // < ![CDATA[
    //

    <a href="https://getpocket.com/save" class="pocket-btn" data-lang="en"
      data-save-url="<?php echo get_permalink(); ?>"
      data-pocket-count="horizontal" 
      data-pocket-align="left"
      ></a>
    <script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>
    ボタン形式 vertical

    Pocket// < ![CDATA[
    // < ![CDATA[
    // < ![CDATA[
    // < ![CDATA[
    // < ![CDATA[
    // < ![CDATA[
    // < ![CDATA[
    // < ![CDATA[
    // < ![CDATA[
    //

    <a href="https://getpocket.com/save" class="pocket-btn" data-lang="en"
      data-save-url="<?php echo get_permalink(); ?>"
      data-pocket-count="vertical" 
      data-pocket-align="left"
      ></a>
    <script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>

    楽勝ですね。

     

    早速つけてみましたよ(´∀`)

    こんなかんじー。
    こんなかんじー。

    モバイルビューにもつけてみた。

    モバイルでもつけてみた
    モバイルでもつけてみた

     

    ちなみに、IE8以下は表示されません。pocketのページ自体も対応させてないみたいで、そもそも切り捨ててらっしゃるっぽいです。

    ホホまとめ

    pocketボタンでは拡散は狙えないものの、どれだけの人が記事に興味を持っているか知れる指標になるんじゃないかと思ってます。

    ある程度のアクセスがあるブログさんだとつけておくことで

    「おー、こんなにpocketされてるんだね」

    って感じで読者へのアピールになるんじゃないでしょうか。

  • LINEで送るボタン 公式の設置方法じゃandroidでリンク飛ばないので

    LINEで送るボタン 公式の設置方法じゃandroidでリンク飛ばないので

    若年層に大人気、というか10~20代で使ってへん人いてるんか?ってぐらいのLINE。

    2013年1月17日に公式でソーシャルボタンがリリースされましたね。

    さて、前から試していてすごく今さらなんですが、公式のまんま設置したらandroidで LINEで送る を押してもLINEアプリが起動しないんですよ。

    LINEのホームページに飛んでしまうんです。iPhoneだとアプリ起動するんですけどね。

    ということで、LINEアプリがダイレクトに起動するよう書き変えました。

    ※スマートフォンサイトへの設置方法は読み込む外部スクリプトを書き変えないといけないんで却下。

     

    書き変えたらこうなった

    まず設置方法リンクの一番下から画像zipをダウンロードして然るべきディレクトリに画像を据えておきます。

     

    Webサイトの場合

    <a href="line://msg/text/?LINE%E3%81%A7%E9%80%81%E3%82%8B%0D%0Ahttp%3A%2F%2Fline.naver.jp%2F"><img src="[ボタン画像のURL]" width="[ボタン幅]" height="[ボタン高さ]" alt="LINEで送る" /></a>

    WordPress の場合

    <a href="line://msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>"><img src="[ボタン画像のURL]" width="[ボタン幅]" height="[ボタン高さ]" alt="LINEで送る" /></a>

    ボタン幅、高さは画像によります。ぼくは 幅 36px, 高さ 60px で。

     

    これでちゃんとandroidでも起動します。

    http://line.naver.jp/R/msg/~ をダイレクトに起動のパラメータ line://msg~ に置き換えた感じです。

     

    うちのサイトではモバイルビューの時だけ出るようにしてますしてました。

    line-button_sample

     

    LINEで送るボタンっている?? 他のソーシャルボタンみたくカウントしてくれたらいいのにー。

    LINEでビジネスとコミュニケーションを加速する方法
    松浦 法子
    ソーテック社
    売り上げランキング: 83,776