プラグイン Post6WidgetArea Ver0.3.1

前回に自作プラグイン Post6WidgetArea をクラス化してみたのですが、その後バグがあり修正に手間取ってしまいました。

Checkbox をチェックしない場合のPOST

Webプログラムを作成している方には常識なのでしょうが、データ更新時に Checkbox は、チェックした項目だけ POST 送信され、チェックしない項目はPOSTされません。
そういうものとわかれば対策を調べれば済む話なのですが、かなり悩みました (^_^;)

プラグインの使用例としてSNSボタンを表示してみる

ついでにこのプラグインの使い方のサンプルとして、SNSボタンの表示でもやってみようと思い、短縮URL等についても少し調べました
現在 Twetter では、リンク共有が、自動的にhttp://t.co リンクに短縮されるとのことで、tinyurl や bit.ly で短縮URLを生成する必要もないようなのですが、今まで同様に tinyurl を使用するにはどうすれば良いかも、とりあえず調べてみました

Twetter で短縮URLを使用するには、https://dev.twitter.com/docs/tweet-button の Sharing a short URL のサンプルのように短縮と通常のURLを両方設定します
data-url=”短縮URL”
data-counturl=”パーマリンクURL”

※短縮URLを指定するには、PHPのプログラムを少し組む必要があるので、PHP Code ウイジェット等のPHPを実行できる環境が必要となります

なかなかうまく行かず、短縮URLを指定するとカウントが0になってしまうという状態でしたが、何回か書きなおしているうちにカウントが表示されるようになりました
原因ははっきりしないのでモヤモヤする感じですが、変な所で改行等を行なってしまっていたかもしれません。
うまくカウントが表示出来ない方がいたら次の手順を試して下さい

image

まず、Sharing a short URL のサンプルのコードを Post6WidgetArea の記事の上か下のウイジェットに PHP Code ウイジェットを設置して、そこにそのまま貼り付けて実行させてみて下さい
ちゃんとカウントが表示されることを確認します

次に、PHPで処理するURL取得と data-url と data-counturl の部分を書き換えます

<?php $tinyurl = CeltisLib::get_shorturl( get_permalink(), 1 ); ?>
<a href="https://twitter.com/share" class="twitter-share-button" data-url="<?php echo $tinyurl; ?>" data-counturl="<?php the_permalink(); ?>" data-via="eno_celtislab" data-lang="ja" data-count="vertical">ツイート</a>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

ちなみに data-via は、私のツイッターアカウント名ですので、適宜書き換えて下さい

また、get_shorturl 関数は、Post6WidgetArea プラグインで定義した関数ですので、プラグインを有効にしないと使用出来ません

プログラムは、ネットで見つけたコード http://davidwalsh.name/create-tiny-url-php を少し修正して使っています

    public static function get_shorturl($permalink, $type = 1) 
    {
        $url = $permalink;
        if($type == 1){ //tinyurl
            $maketiny = 'http://tinyurl.com/api-create.php?url='.$url;

            $ch = curl_init();
            $timeout = 5;
            curl_setopt($ch, CURLOPT_URL, $maketiny);
            curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
            curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);

            $tinyurl = curl_exec($ch);
            if(! curl_errno($ch)){
                $url = $tinyurl;
            }
            curl_close($ch);
        }
        return $url;
    }

処理内容としては、curl 関数を使い Tinyurl のAPIで短縮URLを取得しています

curl 関数については、こちらを参照して下さい 基本的な curl の使用法

Tweetボタンだけでは寂しいので、ついでに google+1 ボタンも横に並べてみました

コードは、https://developers.google.com/+/plugins/+1button/?hl=ja で作成です

ボタンを綺麗に並べて表示するには、環境に合わせてCSSで調整してやる必要があると思いますが、参考までに記述したコードを張っておきます

<ul  style="padding-left: 0.2em;; list-style-type: none">
  <li style="float:left;  margin:2px 6px">
    <?php $tinyurl = CeltisLib::get_shorturl( get_permalink(), 1 ); ?>
    <a href="https://twitter.com/share" class="twitter-share-button" data-url="<?php echo $tinyurl; ?>" data-counturl="<?php the_permalink(); ?>" data-via="eno_celtislab" data-lang="ja" data-count="vertical">ツイート</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
  </li>
  <li  style="float:left;  margin:4px 6px">
    <!-- +1 ボタン を表示したい位置に次のタグを貼り付けてください。 -->
    <div class="g-plusone" data-size="tall"></div>

    <!-- 最後の +1 ボタン タグの後に次のタグを貼り付けてください。 -->
    <script type="text/javascript">
  window.___gcfg = {lang: 'ja'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
    </script>
  </li>
</ul>

プラグインの国際化対応について調べる予定でしたが、バグ等があったので先に修正してからと思いちょっと横道にそれてしまいました

ダウンロード

ほとんどプラグインをダウンロードした方もいないようですが、バグを修正した Post6WidgetArea Ver0.3.1 を公開しておきますので、万一使用している方がおられましたらバージョンアップをお願い致します

2013/4/2 Version 0.3.1 日本語専用のテストバージョンです

Post 6 Widget Area version 0.3.1 (WordPress Plugin)

[wpdm_file id=3 title="true" ]


Download332 downloads

ダウンロードした zipファイルを解凍して出来た Post6WidgetArea フォルダを、FTP等を用いて、WordPressの /wp-content/plugins/ フォルダにアップロードしてください。アップロードしたら管理画面から有効化すれば使用することが出来ます

2013/4/9 プラグインを公式サイトに登録しました

下記サイトから最新版をダウンロードすることが出来ます

http://wordpress.org/extend/plugins/post6widgetarea/

また、説明が https://celtislab.net/wp_plugin_post6widgetarea/ にあります

よろしければ試してみて下さい

次は、いよいよ国際化について調べて行こうと思いますが、Poeditというツールが有るようなので、まずはその辺りからぼちぼちやっていこうと思います では (^^)

関連コンテンツ


まとめ記事紹介

search star user home refresh tag chevron-left chevron-right exclamation-triangle calendar comment folder thumb-tack navicon angle-double-up angle-double-down angle-up angle-down quote-left googleplus facebook instagram twitter rss