CMS

プラグインを使わずにWordPressにFacebook用OGP(Open Graph Protocol)を設定する

2011.10.23追記:
ここで解説しているコードには一部間違いがあります。 All in one SEOプラグインにも対応した、完全版はこちらです。

FacebookまわりでホットなOGP

どんなものかというのはひとまず置いておいて、今回はプラグインを使わずにWordPressに設置する方法について説明します。

プラグインを使う方が楽だけど

簡単にFacebook用OGPを設定できるWordPress用プラグインは、既にリリースされています。

素直にこれを使えばいいと思いますが、Facebookのいつものノリで、いきなり仕様が変わってしまう可能性もあります。
それに、情報をもっと細かく調整したいこともあるかもしれません。

なので、以下のような条件で、エントリー・固定ページの画像も含めてOGPを出力するコードを書いてみました。

  1. アイキャッチ画像を指定している場合は、そのサムネイルを利用する
  2. ない場合は、記事中の画像のうち、最初にアップロードしたもののサムネイルを利用する
  3. それもない場合は、テーマディレクトリに入れた「ogp_default.jpg」ファイルを利用する

この記事には続きがあります

Webdesign

ブログをリニューアルしました


a-blog cmsに移転してから半年近く仮営業だった、このブログをリニューアルしました。

以前WordPressで運営していたときのテーマと、見た目はあまり変わっていませんが、細かいところをブラッシュアップしています。

この記事には続きがあります

Work

works:deztec.jp

ブロガー・徳保隆夫さんの「趣味のWebデザイン」をはじめとするサイトのテーマ「green」を制作しました。< /p>

deztec.jp (趣味のWebデザイン)

徳保さんは十年近く前から更新を続けている、息の長いブロガーの一人です。AmazonでWeb制作の技術書・ゲームのレビューも多数投稿しています。

はてなブックマークを利用している方だと、子どもの悪事が明らかになったときの対処とか、お父さんとお母さんにドラゴンクエスト9を遊んでもらっての肯定的なレビューを書いた人、というとわかるかもしれません。

欠点を指摘される

五年以上前の話になりますが、FC2ブログで「テンプレートデザインコンテスト」というのがありました。

当時FC2ブログに注目していた徳保さんは、アマチュア向けにWeb制作のアドバイスもしていた関係で、コンテストの全作品レビューを担当しています。

ご本人は覚えてないと思いますが(笑)
そのときの私の作品に対する徳保さんの感想がこれです。

  1. webbingstudioさんのテンプレートはソースがきれいだし、レイアウトのアイデアもいい。技量もある。配色の調整がうまくなれば鬼に金棒なのですが。
  2. アイデアは面白い。たしかにしゃきっとした印象はあります。だから成功といってもよいのですが、配色と余白の設定は再考の余地あり。調整不足の印象。

全作品感想集W | テンプレートデザインコンテスト

色のセンスが悪い+作り込みが足りない」は、当時の私がいちばん気にしていたことです。
趣味で制作をしていると、欠点を指摘されることはなかなかありません。それをできるだけ改善しようと努力するきっかけになったということで、徳保さんには感謝しています。

既存テーマを補う

相変わらず私自身は「think」がいちばん好きなんだけれども」と仰っている徳保さんが、テーマを外注された理由を考えた結果、やはり「自分とは別の視点で作られた、見た目重視のテーマ」を要望されているのだろうと思いました。

時折閲覧している立場から、これまでのテーマには

  • 幅可変テーマは高解像度だと読みにくい
  • Vista以降の標準フォント「メイリオ」に対応していない
  • 一日分の区切りがつきにくい

という欠点を感じていました。

なので、徳保さんにお伺いした「参考にしてほしいサイト」を元に、これまでのテーマに不足している要素を補うデザインとしました。
余白を大目に取り、ヘッダをコンパクトに抑えたので、スマートフォンでも読みやすいと思います。

当初は室内をテーマにしたラフも描いていたのですが、ブログのファビコンにも使われていて、アーカイブをイメージさせる「恐竜」に意味を持たせたいと思い、今のデザインになっています。

HTMLの制限

通常のCMSでは、本文は平文か、ウィジウィグやWikiによる自動生成HTMLで書かれます。なので対応するCSSもその範疇になります。

それに対し徳保さんは、膨大な情報を扱うためにたくさんのHTML要素を駆使します。
「blockquoteの三重入れ子」とか
「dl>dd>ul>li>blockquote>ol>li>p」とか。

可読性が落ちないよう、できるだけ多くのパターンに対応したつもりです。

また、昔のコンテンツはCMS化されていないので、本文を白く抜くためのdiv要素を加えることができませんでした。
この辺りは見た目とブラウザ間の安定性を重視するということで、文字色を反転する対応で了承をいただきました。


そんなこんなでいろいろと手を入れましたが、今回のお仕事はサイトの一部で行ったパフォーマンスに過ぎません。

コンテンツを訪れる人のうち、数パーセントでも
「お、このテーマ自分向きかも。自分はこれで読もう」
と感じていただければ幸いです。

CMS

「TweetMeme」でブログの記事にReTweetしてもらう

7/1追記:
半月前くらいから、日本語のブログタイトルが文字化けしてしまう現象が解決できないため、ボタンを撤去しました。
TweetmemeのAPIが原因かと思われます。

CREAMUさんの記事を参考に、
「ブログ記事にReTweetしてもらう」ボタンを付けました。

retweet

ブログにRetweetボタンを設置できるスクリプト | CREAMU

TwitterのつぶやきでリンクされたURLを収集するサイト「Tweetmeme」が提供しているボタンを利用しています。

緑のボタンをクリックすると、ReTweetのフォーマットが自動入力された訪問者のtwitterページにジャンプします。
「@ブログ主のID」が含まれているので、ReTweetしてもらえば、ブログ主にもReplyが届きます。

WordPress なら記事中に自動表示されるプラグインもありますが、一覧ページではうまく動作しなかったり、表示位置を自分で決めるように設定するとパーマリンクがおかしくなってしまうのとで、結局「はてなブックマーク」もセットにする形で、テーマにコードを直接書き込む方法をとりました。

各種ブログサービス対応の設置方法を乗せておきます。追記以下をどうぞ。
※もちろん、Twitterアカウントを持っていることが前提です

記事ループ内のどこかに、以下のコードを貼りつけます。

<div class="tweetmeme_button">
<script type="text/javascript">
//<![CDATA[
tweetmeme_url = '[記事のURL]';tweetmeme_source = '[TwitterID]';tweetmeme_style = 'compact';
//]]>
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

[TwitterID]を、ReplyしてほしいIDに書き換え(私だとwebbingstudio)、
[記事のURL]を、ブログによって以下のように書き換えます。
(もし、独自タグに間違いがあれば教えてください)

WordPress
<?php echo get_permalink(); ?>
MovableType
<$mt:EntryPermalink$>
FC2ブログ
<%topentry_link>
SeeSaaブログ
<% article.page_url %>
忍者ブログ
<!–$entry_link–>
ライブドアブログ
<$ArticlePermalink$>

これで保存すれば緑の小さなボタンが表示されますが、インラインフレームが使われているので、囲んでいるdivを取っても上下に改行ができてしまいます。

ボタンだけがポツネンと表示されるのは嫌だ!という方は、divに指定しているクラス「tweetmeme_button」を利用して、floatするなり、ネガティブマージンやpositionで移動するなりしてCSSで調整してください。

ちなみに、私はこんな風にはてブアイコンとセットにして

<div class="social">

<div class="tweetmeme_button">
<script type="text/javascript">
//<![CDATA[
tweetmeme_url = '<?php echo get_permalink(); ?>';tweetmeme_source = 'webbingstudio';tweetmeme_style = 'compact';//]]>
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

<div class="hatebu">
<a href="http://b.hatena.ne.jp/append?<?php echo get_permalink(); ?>" title="この記事をはてなブックマークに追加"><img src="http://b.hatena.ne.jp/images/append.gif" alt="この記事をはてなブックマークに追加" width="16" height="12" /></a>
<a href="http://b.hatena.ne.jp/entry/<?php echo get_permalink(); ?>" title="この記事のはてなブックマークページ"><img src="http://b.hatena.ne.jp/entry/image/<?php echo get_permalink(); ?>" alt="" /></a>
</div>

<!-- /.social --></div>

floatで一列にまとめてます。
(後続する要素で、floatを解除してくださいね)

/* social
=================================================== */

.post .social {
margin: -2.3em 0 2em;
}

.single .post .social {
margin: -3em 0 3em;
}

.post .social .tweetmeme_button {
float: left;
display: inline;
width: 75px;
}

.post .social .hatebu {
display: inline;
}

こうやってReTweetされると、「自分のブログを見てもらってる!」ということがわかって嬉しいし、Twitterの他のユーザーにも記事を読んでもらえる機会が増えると思います。

残念ながら「TweetMeme」自体は日本語化されていないのですが、ReTweetしてもらう分には問題ないみたいなので、皆さんもどぞ。