横浜のフリーランスWeb制作者ブログ

2011年 11月 08日

WP Social Bookmarking Lightを設置してみました

とっても久しぶりの記事になってしまいました。前回の投稿時前後からずっと、何かと忙しくさせていただいておりまして、なんとなく放置気味にしてしまっておりました。反省。

その間に、twitterはスマートフォンの普及促進と共にますます勢力を伸ばし、facebookも着実にユーザー数を増やし、Google+なるものが登場し…これらのソーシャルメディアはもはや無視できない存在となってきています。仕事上でも、多方面で「つぶやくボタンは必須だよね」「いいね！ボタンも絶対あった方が良い」なんて声が溢れています。

じゃぁちょっと、ウチのサイトにもそのボタン、付けてみよう。というのが今回のお話。

当然、WordPressで作っているんだから、まずはWordPressのプラグインから選んでみましょう、ということで世に存在するさまざまなプラグインを比較検討してみました。小生としては、twitterにつぶやくボタン、facebookのいいね！ボタン、Google+ボタンさえあれば十分と考え、最終的に次の二つが候補となりました。

細かい設定ができるのは前者、のようですが後者は開発者が日本人（utahta様）ということで、今回はWP Social Bookmarking Lightを使わせていただくことにします。

1.インストール
直接ダウンロードしていつものように’wp-content/plugins/’ディレクトリにアップしても良し、WprdPressのコントロールパネル＞プラグインから検索＆インストールしても良し。プラグインを有効化したら、設定＞WP Social Bookmarking Lightを開き、各種設定画面に入ります。

2.設定
「一般設定」のタブの中の、「サービス」に幾つかのソーシャルサービスが登録されているので、自分の使いたいサービスを残して、ついでに表示させたい順番にドラッグ＆ドロップで並べます。今回は「twitter」、「facebook_like」、「google_plus_one」、「hatena_button」を有効にしてみました。
変更を保存すると、有効になっているサービスのそれぞれを詳細に設定するタブが表示されるので、各種設定に移ります。
今回小生が行った設定をメモしますと、

「一般設定」位置をTopに、個別記事のみをNoに、ページをYesに
「twitter」LanguageをJapaneseに
「facebook」Localeをja_JPに、Send buttonを「Yes」に
「google_plus_one」LanguageをJapaneseに

表記のないものについては、初期状態のままです。

3.調整とカスタマイズ
いざどのように表示されるかを確認します。

なんだか少し、残念です。コントロールパネルの設定に戻って、調整してみましょう。まずは各ボタンの下の空間が狭いので、「一般設定」の「上下の間隔」で、「Bottom」を「10px」としてみました。次に、twitterのボタンとfacebookのボタンが妙に近いので、「twitter」の「width」を「140」としてみました。

だいぶスッキリしてきました。しかし、ボタンのブロックが左に飛び出しているような印象です。「左右の間隔」は、コントロールパネルからは設定できないのですね…。
どうやら、これらのボタンに関するCSSはページのソースに直接書き込まれるようですので、その元を少し弄る事にします。

‘wp-content/plugins/wp-social-bookmarking-light/modules/content.php’を開き、107行目付近にある

1	div.wp_social_bookmarking_light{border:0 !important;padding:<?php echo $padding_top ?>px 0 <?php echo $padding_bottom ?>px 0 !important;margin:0 !important;}

の部分を

1	div.wp_social_bookmarking_light{border:0 !important;padding:<?php echo $padding_top ?>px 0 <?php echo $padding_bottom ?>px 10px !important;margin:0 !important;}

としました。paddingの指定で左側がゼロになっているところを、10pxとしています。

WP Social Bookmarking Lightソースファイルを少し弄って更に位置を調整

これで見た目は随分整ってきました。

あとは細かい点で、例えばtwitterでつぶやくボタンを押した際に、デフォルトだとブログまたは記事のタイトルとURLは表示されるのですが、サイト名などは表示されず、場合によってはちょっと、「？」と思われるような表示になってしまいそうです。ので、これも元を少し弄ります。

‘wp-content/plugins/wp-social-bookmarking-light/modules/service.php’を開き、38行目付近、

1	$this->encode_title = rawurlencode( $title );

の部分を

1	$this->encode_title = rawurlencode( $title ) . ' - ' . rawurlencode( $this->blogname );

または

1	$this->encode_title = rawurlencode( $title ) . '（追加したい文字列）';

などとします。今回小生は

1	$this->encode_title = rawurlencode( $title ) . ' : SiGT Web Studio';

としました（あまり文字数が多くなるのも困るので）。

よしよし。ちなみにURLは投稿時に自動で短縮URLに変換され、あらかじめその分を考慮した残りの入力可能文字数が表示されるので、よほど長いタイトルを多用しない限りは気にしなくて良いと思います。

4.問題点
まだ使い始めたばかりで、後からいろいろ出てくるのかも知れませんが、今現在で一番気になっているのは、このプラグインを入れることによってW3C Markup Validationでエラーが出てしまうことです。主にfacebookタグ絡みなので、仕方ない…ような気もしますが…。回避できそうであれば、続報でお伝えしたいと思います。

あと、旧来から記事の末尾に表示させている、古い（と言ったら怒られるけど）ソーシャルブックマーク群の表示をどうするか…。

以上になります。導入してみると、過去の記事がつぶやかれていたり、ブックマークされていたり、その数が直接見れて面白いですね。やっぱりWeb制作絡みの記事は、そこそこ反応あるなぁ、とか。そして、もっともっと大きな反響が呼べるくらいのムーブを起こさないとダメですな、と思い直す次第。これからも、よろしくお願いいたします。

最後に、いつもこのような素晴らしいアイデアを提供してくださったり、プラグインを開発してくださる皆さんに心からお礼を申し上げます。