WPSocialBookmarkingLight 1.7.0をリリースしました。

変更点

  • Grow!ボタンの追加。(yamitakeさん、ありがとうございます)
  • バリデーションエラーの修正。
 

WP Social Bookmarking Light 1.6.8 をリリースしました。

新たにGoogle +1 ボタンが追加されてます。

開発協力kamitoさんありがとございました( ´-`)b

 

今回は、あとでボタンの追加といくつかのボタンの内部処理の改善が主です。
WP Social Bookmarking Light

更新内容

あとでボタンの追加。
・tumblr, evernote, instapaperの処理を修正。
・ボタンの上下に間隔をつけられるように修正。

 

WP Social Bookmarking Light 1.6.5 をリリースしました。

追加した機能は、以下の3点。

・Facebook Sendボタンを新しく追加。
・Facebook Likeボタンの横にSendボタンを加えるオプションを追加。
・GREEいいねボタンの形状を選べるオプションを追加。

現在、Facebook側の問題?で、Sendボタンがうまく動作しない事があるようです。

ソースコードのリファクタもしました。

 

WordPress にソーシャルブックマークボタンを楽々設置できるプラグイン:WP Social Bookmarking Light のソースコードをGitHub に公開しました。

 

WP Social Bookmarking Light の管理ページをつくってるときにハマった点メモ。

メモ

JavaScript と CSS の読み込みには、wp_enqueue_scriptwp_enqueue_style APIを使用する。

管理ページ上で上記 API を反映させる為に、add_actionadmin_print_stylesadmin_print_scripts を使用する。

ただし、単純に

add_action('admin_print_styles', 'myplugin_admin_print_styles');
add_action('admin_print_scripts', 'myplugin_admin_print_scripts');

とすると、他のプラグインの管理ページにも同様に指定の JavaScript と CSS が反映されてしまい、競合等の迷惑をかける可能性がある。

この問題は、例えばこのように

$page = add_options_page('myplugin', 'myplugin', 'manage_options', __FILE__, 'myplugin_admin_page');
add_action('admin_print_styles-'.$page, 'myplugin_admin_print_styles');
add_action('admin_print_scripts-'.$page, 'myplugin_admin_print_scripts');

add_options_page 等の戻り値を admin_print_stylesadmin_print_scripts のお尻に加えてあげると回避できる。

全体像

WP Social Bookmarking Light からソースコード抜粋。

function wp_social_bookmarking_light_admin_print_scripts()
{
    wp_enqueue_script('jquery');
    wp_enqueue_script('jquery-ui-core');
    wp_enqueue_script('jquery-ui-tabs');
}
 
function wp_social_bookmarking_light_admin_print_styles()
{
    wp_enqueue_style('jquery-ui-tabs', WP_SOCIAL_BOOKMARKING_LIGHT_URL."/libs/jquery/css/pepper-grinder/jquery-ui-1.8.6.custom.css");
}
 
if( function_exists('add_options_page') ){
    $page = add_options_page( 'WP Social Bookmarking Light', 
                              'WP Social Bookmarking Light', 
                              'manage_options', 
                              __FILE__, 
                              'wp_social_bookmarking_light_options_page' );
 
    add_action('admin_print_styles-'.$page, 'wp_social_bookmarking_light_admin_print_styles');
    add_action('admin_print_scripts-'.$page, 'wp_social_bookmarking_light_admin_print_scripts');
}
 

WordPress にソーシャルブックマークボタンを楽々設置できるプラグイン、WP Social Bookmarking Light を公開しました。

2011.01.21 GitHubにソースコードを公開しました。

概要

ソーシャルネットワーク, ソーシャルブックマーク系のリンクをエントリーの先頭か後尾に自動で追加するプラグイン。

例えば、はてなブックマークや Facebook や Google Buzz や Twitter など。

どのリンクを追加するかは、設定画面から選択可能です。

このプラグインは、Social Bookmarking JPwp-hatena をインスパイアしたものです。

インストール

1. こちらのページからプラグインをダウンロードして、wp-content/plugins/ にアップロード。

2. WordPress 管理画面のプラグインメニューから、WP Social Bookmarking Light を有効化。

3. お好みで、WordPress 管理画面の WP Social Bookmarking Light 設定メニューから構成を変更可。

スクリーンショット

エントリーに表示されるアイコンたち。

設定画面。

バッジ

wp social bookmarking light Download

意見・要望

意見・要望・不具合報告などは、コメント欄かGitHubのIssuesまでよろしくです。

 

WordPress Plugin を公開するまでの流れをメモ。

公開するページは、WordPress.org Plugins

アカウント登録

最初に、WordPress.orgでアカウント登録。

必須項目は、Username と Email。

登録するとメールが届く。ログイン用のパスワードも一緒に届く。

パスワードは、Forums ページの右上にある View your profile から変更できる。

プラグイン登録申請

続いて、Add Your Pluginで登録申請。

Extend → Plugins → Developer Center → Add Your Plugin という順番でたどり着ける。

必須項目は、Plugin Name と Plugin Description。

申請の結果が出るまで、大体1週間ぐらいかかる。

承認完了したらメールが届く。

SVN チェックアウト

承認メール内に Subversion のリポジトリ URL が書かれている。

この URL が、基本的にプラグインの公開場所となる。

リポジトリをチェックアウト。

$ svn co http://plugins.svn.wordpress.org/wp-hoge/
A    wp-hoge/trunk
A    wp-hoge/branches
A    wp-hoge/tags

trunk が作業する場所。
tags が公開する場所。
とざっくり決める。

公開準備

既にプラグインが完成しているのであれば、そのファイルたちを trunk にコピーする。
まだであれば作成する。trunk 配下で作業がオススメ。

プラグインが完成したら、readme.txt の準備する。
WordPress 公式の readme.txt サンプルは、こちら

フォーマット通りに記述すると、readme.txt の内容が WordPress Plugin 公開ページに反映される。
フォーマットの確認は、こちらのサイトで行う。
足りない項目があると、以下の図のように教えてくれる。

公開

readme.txt が完成したら、公開するバージョンなどを決める。

readme.txt の Stable tag 項目に設定したバージョン番号をタグ名にする。

Stable tag: 1.0.0

上記の場合なら、1.0.0 という名前のタグを作成する。

まず trunk 内のファイルをコミット。
コミットするときに WordPress アカウントのユーザ名とパスワードを求められるので要確認。

$ svn add wp-hoge.php readme.txt
$ svn commit -m "first release."
Authentication realm: <http://plugins.svn.wordpress.org:80> WordPress.org Subversion
Username: user	
Password for 'user':
...
Transmitting file data .....................
Committed revision 251421.

続いて、タグを作成してコミット。

$ svn copy http://plugins.svn.wordpress.org/wp-hoge/trunk http://plugins.svn.wordpress.org/wp-hoge/tags/1.0.0 -m "tagging 1.0.0 release."
Committed revision 251422.

最後にプラグインのページにアクセスし、readme.txt の内容が反映されていることを確認したら完了なり。

参考

WordPress.orgのプラグインディレクトリに自作プラグインを登録する方法(Windowsユーザー向け、TortoiseSVN使用) : 参考エントリー

 

以前、Social Bookmarking JP が便利といったエントリを書いたけど、少し気になる点をみつけてしまった。

Twitter へのツイートボタンがあるのだが、通常だと短縮URLが使われず、URLに日本語が混じっていると非常に長いURLになってしまい、ツイッターの140文字制限を軽くオーバーしてしまう・・・。

たとえば、こんな感じ。

WordPress ソーシャルブックマーク系プラグイン : http://www.ninxit.com/blog/2010/05/05/wordpress-%E3%82%BD%E3%83%BC%E3%82%B7%E3%83%A3%E3%83%AB%E3%83%96%E3%83%83%E3%82%AF%E3%83%9E%E3%83%BC%E3%82%AF%E7%B3%BB%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3/

92文字ほどオーバーしてる。

これを対策するには、プラグインを弄るしかないのだけど、短縮URLサービスのAPIを叩くように変更するのは、かなりめんどくさい。

そこで、ブログ1年生でも設置できる超シンプルTwitter「つぶやきボタン」を使うことにしてみた。
このサービスを使えば、URLを自動で短縮してくれるっぽい。

変更内容は、以下のとおり。

social-bookmarking-jp.php

    // Twitter
/*
    'twitter' => array(
	'label' => __('Twitter', 'social-bookmarking-jp'),
	'entry' => array(
	    'link' => 'http://twitter.com/home?status=@URLENCODED_TITLE@%20@URLENCODED_LINK@',
	    'icon' => WP_PLUGIN_URL . '/social-bookmarking-jp/twitter.gif',
	    'width' => 16,
	    'height' => 16,
	    'alt' => __('Post to Twitter', 'social-bookmarking-jp')
	),
	// http://tweetbuzz.jp/static/imgcounter
	'users' => array(
	    'link' => 'http://tweetbuzz.jp/redirect?url=@LINK@',
	    'icon' => 'http://tools.tweetbuzz.jp/imgcount?url=@LINK@',
	    'alt' => __('Tweets for this web page', 'social-bookmarking-jp')
	)
    ),
 */
    'twitter' => array(
	'label' => __('Twitter', 'social-bookmarking-jp'),
	'entry' => array(
	    'link' => 'http://2bu.in/j',
	    'icon' => 'http://2bu.in/tw',
	    'alt' => __('Post to Twitter', 'social-bookmarking-jp')
	),
	// http://tweetbuzz.jp/static/imgcounter
	'users' => array(
	    'link' => 'http://2bu.in/d/http://www.ninxit.com/blog/',
	    'icon' => 'http://2bu.in/i/http://www.ninxit.com/blog/',
	    'alt' => __('Tweets for this web page', 'social-bookmarking-jp')
	)
    ),

時間があれば、自分用にプラグインを作ってみたいところだけど、とりあえずしばらくこのままで行こうかな。

 

エントリーの最初 or 最後に自動でソーシャルブックマーク用のボタンを追加してくれる超便利なプラグイン。

Social Bookmarking JP の導入メモ。

インストールは簡単。zipファイルをダウンロード&解凍して、plugin ディレクトリに置くだけ。

しかし、見た目がなんか気になる。
その画像がこちら。

ボタンの周りが灰色になっていてカコワルイよ。

ブックマーク数を表示する部分なんて小さな灰色の四角となって申し訳なさそうにたたずんでいるじゃないか。

原因は、テーマで設定されている CSS の img 項目。
おもいきり干渉してる。

とりあえず解決策として、「プラグインのソースコードを弄って、オプションから CSS の設定をできるようにする」ことを考えた。

けど、めんどくさい。

興味本位からソースコードをサッと眺めてみた感じ、かなり分かり易くて修正は容易っぽかったけど、
後々プラグインがアップデートされたときとか考えるとやっぱ面倒。

結局テーマの CSS を弄くることにした。

使用中の Atahualpa 3.4.6 テーマは CSS の拡張が自由にできて地味に便利。

以下、修正コード。

.bookmark_entry img{
background: #ffffff;
padding: 3px 0;
}
.bookmark_users img{
background: #ffffff;
padding: 3px 0 3px 2px;
}

bookmark_entry は、ブックマークボタン用のクラス。
バックグラウンドを白くして、上下に 3px 幅を持たせた。

bookmark_users は、ブックマークとかリツイートされた数用のクラス。
こちらもバックグラウンドを白くして、上下に 3px 幅を持たせた。さらに左に 2px 調整値をいれてみた。

修正後の見た目がこちら。

ずいぶんシュッとしてよい感じになったである。