仕事にヒント » 行動

WordPressブログにプラグインを使わないでOGPを設定してみた

イケダヒロミ — Thu, 29 Dec 2011 10:48:57 +0000

WordPressには便利なOGP対応プラグインがあるらしいですが、プラグインを使わない方法を試してみました。
対象は、このブログです。

次の点が、今回の作業の主なポイントです。

個別記事には、それぞれ独自（URL、記事タイトル、説明文、画像など）の設定する: 個別記事とそれ以外を振り分ける
アイキャッチ画像は設定していないし、画像のない記事もある: 記事内の１枚目の画像を取得、無ければデフォルトの画像を表示させる
テンプレートファイルの改造をなるべく簡単に: PHPとか、サーバとか、参考書やネットの記事を読んでも、完全に理解できていないから危険

最初は、次の記事を参考に始めたのですが、失敗。
functions.php での絶対パス指定が間違っていたのだと思います。

WordPressで、OGP（The Open Graph Protocol）に完全な情報を反映させる | いろいろコードスニペッ卜

次に参考にしたのは、こちらの記事。
基本のソースは、こちらを参考にさせて頂きました。
しかし、画像が無いページはどうすりゃいいんだ？と。

備忘録：WordPressにFacebookのOGPを設定する（プラグイン無し） | ryodesignblog

投稿の最初の画像を取得して、無ければ設定したデフォルト画像を表示させる方法を探しました。
見つけたのが、次の記事。
記事のままでは何故かうまくいかず、「参照元」となっている英文記事を参考にしたら、思い通りになりました。

カスタムフィールド使わずに投稿の最初の画像を取得する簡単な方法 – （株）アイポケット　スタッフブログ

さらに次の記事を参考に、localeプロパティを追加。
アプリIDを取得しようとしたのに、画面遷移せず、FacebookユーザIDを設定。
と、何度もつまづきながらの作業でした。

facebook いいねボタンの仕様変更?OGPの設定についてまとめました（ localeプロパティについて） | HTML5でサイトをつくろう

最終的なソース例は、こちら。
使っているテーマにもよるとは思いますが、参考になれば。
投稿に画像がなかった場合、投稿以外のページの場合のデフォルト画像を default.jpgとしています。

function.php に画像URL取得のソースを追加

function catch_that_image() {
  global $post, $posts;
  $first_img = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('//i', $post->post_content, $matches);
  $first_img = $matches [1] [0];

  if(empty($first_img)){ //Defines a default image
    $first_img = "/ogp_hint.jpg";
  }
  return $first_img;
}

html要素にxmlns属性を追加（header.php）

ヘッダにOGPのタグを追加（header.php）

誰も「いいね」してくれなきゃ、意味は無いんですけどね。

アプリID取得画面に移動できたので、上記ソースをアプリID版に変更しました。
また、デバッガーでエラーを見つけたので、下記部分を修正しました。（/を追加）

ドメインのトップページにもOGPを設定しました。
自分で「いいね」してみたし、アプリIDも取得したけれど、Facebookインサイトがゼロのまま。
インサイトのページにも、何も表示されません。

そういえば、アラートメッセージが出てました。
でも、英語でよー分からん。
ドメイン単位っぽいので、対象ドメインのトップページにもOGPを設定してみました。
すると、インサイトにも表示されました。

ソースを見なおしてみると、html要素にxmlns属性を追加はしてません。
og:typeは、website にしました。
追加だけでも良かったのかも。
これでなんとか、ちゃんと出来たかも。

FC2ショッピングカートにOGPを設定する

イケダヒロミ — Mon, 26 Dec 2011 06:04:31 +0000

「いいね！」ボタン設置に引き続き、FC2ショッピングカートにOGP設定を試みてみました。
ＦＣ２無料ショッピングカート商品ページにOGP(Open Graph Protocol)を設定したのは、「いいね！」をクリックしたときに情報が伝わりやすくするためです。
多分、うまく行ったので、記録。

OGPの設定について、下記の記事を参考にさせていただきました。

FC2カートには、ソーシャルボタン設置のオプションが無いので、テンプレート変数を参照しながら、ヘッダを変更しました。
下記に、参考ソースを載せます。

html要素にxmlns属性を追加

OGPのメタタグを追加

{if DSP_ITEMDETAIL}







{/if}

「ジローのらくがきノート」をリニューアル

イケダヒロミ — Mon, 05 Dec 2011 08:54:21 +0000

先日、自分のベースになってるホームページをリニューアルしました。
まぁ、リニューアルというほど、大したことじゃないですが。

使ってみたかったjQueryを使ってみたり、好きなノートの帳面の写真を背景画像にしたり、自分が楽しいページです。
新しいことにもちょっとずつ。
最近よくみる定番の動きは、だいたいこれで対応できるjqueryライブラリ – バニデザノートなどの記事を参考にしながら、また。

大橋建築設計工房様ホームページ公開しました

イケダヒロミ — Mon, 05 Dec 2011 06:58:10 +0000

上越市の建築事務所「大橋建築設計工房」様のホームページを公開しました。
建築家の大橋秀三さんの設計事務所です。

シンプルな、親切すぎないホームページです。
お知らせは、ブログ「おむすびと家」で、スタッフの方が更新されます。

プロバイダの無料ホームページスペースを使っています。
CMSを使ったり、何かと連動のような今どきのことはしていません。
初めてのホームページ・インターネットでの情報発信です。

大橋秀三さんの建築を雑誌や展示などで見た方が、他の作品を見たり、コンタクトを取るためのきっかけになれば…、
家をつくるということについて、深く考えてもらうきっかけになれば…、
新築・増築を考えてる方に、「建築家との家づくり」という選択肢も考えてもらえれば…。

という、ご依頼主である大橋秀三さんとスタッフの方の思いを形にするお手伝いでした。
担当させていただき、ありがとうございました。

FC2ショッピングカートに「いいね！」ボタン

イケダヒロミ — Fri, 25 Nov 2011 11:28:25 +0000

ＦＣ２無料ショッピングカート商品ページに、Facebookの「いいね！」ボタンを追加しました。

FacebookのSocial Plugins > Like Buttonから、表示用コードを取得出来ます。
ただ、これだと、全ページ同じです。
商品ページごとに「いいね！」ボタン表示したいです。

そこで、「facebook like（いいね）ボタンを記事ページ（エントリーページ）ごとに表示｜WEBマスターのお仕事」を参考に設置しました。

しかし、ＦＣ２無料ショッピングカートは、タイトルタグ部分が全ページ共通です。
Facebookで表示されるページタイトルが、同じになってしまいます。
それでは効果も少ないかも…ということで、対処法を探しました。

そして、商品詳細ページのタイトルタグ、メタタグ設定をFC2の独自タグを利用してカスタマイズする方法を見つけました。
以前にFC2 ショッピングカートのテンプレートカスタマイズ用マニュアルを確認しつつも、解決法を見つけられなかった私…。

ともかくも、FC2 ショッピングカートの大きな弱点だと思っていたタイトルタグ・メタタグの重複を少し改善できました。
次は、OGPの設定か…。

「ホームページを作りたいんだけど…」という相談

イケダヒロミ — Sat, 05 Nov 2011 12:04:32 +0000

「ホームページ（ウェブサイト）を作りたんだけど…」という相談を受けました。
初対面の方からの漠然とした相談。
ホームページとかインターネット・パソコンに関する知識や考え方、その人自身についても、その時初めて知りました。
２時間ほど、カフェでお話しました。

もう、２ヶ月も前の話ですが、その時考えたこと・その後考えたことを、まとめてみました。

ホームページを作ろうとする目的は？
ホームページを作るには、どんな方法があるか？
ホームページを作るために必要なこと

ホームページを作ろうとする目的は？

まず、ホームページに踏み出せない理由が何か、知りたいと思いました。
今は「ブログ」や「ツイッター」など、ネットでの発信方法は沢山あります。

周りの人に「ホームページがあった方がいいと思う」と言われたが、どんなもんか？
ホームページを作るメリットがあるか？
自分にホームページが作れるのか？
ホームページを作るのに、何が必要か？

こんな疑問を想定していました。
そして、どんなホームページをイメージしているのか、伺ってみました。

すると、すでに具体的にいろいろ考え、調べてらっしゃる方でした。
目的ははっきりしていて、仕事や表現のためにホームページを必要だと思っているが、どういう方法が自分に適しているか？知りたいということでした。

結果、私の答えは「いくつか提案しますから、まずは試してみたらどうでしょう」という曖昧なものになりました。
その中でお話したことのいくつかが、次の通りです。

ホームページを作るには、どんな方法があるか？

今は色んな方法があります。
初心者が「自分でホームページを作る」ことを想定すると、次のような方法が浮かびました。

ホームページ作成ソフトを使って作り、ファイル転送をしてホームページを作る
ブラウザで更新できるホームページ作成サービスを利用する
ブログを使う

All About「ホームページの作り方」の解説も参考になります。

無料ブログで始める

難易度と費用の面から考えて、一番簡単なのは「ブログを使ったホームページ」です。
特に、定期的に情報発信したいと思っているなら、始めるのも簡単ですし、おすすめです。

契約しているプロバイダにブログサービスがあれば、無料で広告の入らないブログを始められると思います。
ほか、広告の少ない無料ブログといえば、次の２つがあります。

ホームページ作成サービスを利用する

ホームページ（ウェブサイト）の体裁を持ったものが欲しいという場合、ホームページ作成サービスを利用する方法があります。
例えば下記のような、無料から月額1,000円程度のサービスなど。

ネットショップ用のサービスを利用する

販売が主な目的なら、ネットショップ構築サービスを利用するという方法があります。
無料および低価格のサービスがこちら。
上記のホームページ作成サービスの中に、簡単なショップを作る機能が付属しているものもあります。

ホームページ作成ソフトを使って、自分で作る

契約しているプロバイダの無料ホームページスペースを利用すれば、月々の費用は無料で出来ます。
レンタルサーバを使って、独自ドメインでホームページを運用ということも考えられます。
安いレンタルサーバのいくつかは、次の通り。

ホームページ作成ソフトを使うなら、購入費用とその使い方を覚える時間が必要です。
ソフトを覚えたり使ったりが好きなら、この方法も楽しめます。
ホームページ作成ソフトのほか、画像処理ソフトも必要になります。

ホームページを作るために必要なこと

ホームページ作成ソフトやブログといった道具でホームページを作ることは出来ます。
でも、ホームページを作る目的は何でしょう？
多分「作っておしまい」ではないはず。
「作っておしまい」にならないためにも、まずは考えましょう。

「ホームページで何がしたいのか」をはっきりさせる

目的やテーマ、コンセプトといったものを、文章や言葉にしてみましょう。
文章にしておくことで、悩んだときに立ち戻ることができます。
他人にホームページを紹介するとき、ロゴやマークなどのデザインや制作を誰かに頼むときにも役立ちます。

ピッタリな言葉が浮かばないなぁというときは、連想ゲーム。
どんどん書いてみることをお勧めします。
その場合、マインドマップの手法を使うと、言葉が浮かんだり、関連するキーワードを近くに書くことで、頭の中が整理されます。

まずは、始める

ホームページを作っただけでは、誰も見てくれません。
誰にもPRしなくても、コツコツ続けていけば、そのうち検索エンジンが拾ってくれます。
だから、まずは始めてみたらどうでしょう？

関連する記事をいくつか書いていますので、参考になれば。

今回、相談をもらってお会いする前に、マインドマップ（右の図）を作りました。
「ホームページを作る」という漠然としたテーマで、連想した課題や要素です。
この記事に書ききれなかったことも載ってます。

「誰かに話してみる」こともいいと思います。
ある程度関心を示してくれる人に、話してみることで自分が整理できるということがあります。
適当な相手が思いつかない場合、自問自答で考えてみるのでもいいです。

あと、あんまり考えが煮詰まるようなら、プロに頼むってのも方法です。
ソフトを買って使い方を覚えて、構成を考えて、あれもこれもと悩むくらいなら、プロと一緒に考えたり、プロに任せる部分も考えてみては？
あなたにしか出来ないことに時間を注ぐ方がいい場合もあると思います。

Jimdoで不動産会社のホームページ制作

イケダヒロミ — Wed, 20 Jul 2011 06:17:59 +0000

ホームページを作成できるウェブサービスJimdoを利用して、不動産会社のホームページを制作しました。
無料版もあるJimdoですが、独自ドメインを利用できる有料のProを使っています。

ご依頼者はパソコン・インターネットがお得意では無いですが、将来ご自身で更新を出来ることを想定して、Jimdoを選びました。
個人的な好みからすると、「あれがちょっと…」「ここがちょっと…」と思うJimdoですが、ご依頼者の印象は良かったため、採用となりました。

レイアウトは、無料版でも使えるレイアウトデザインのカスタマイズです。
ヘッダにCSSを追加しています。
「独自レイアウト」を使うことも考えましたが、日程的な問題と自分がそこまでJimdoに慣れていないため、ヘッダでのCSS指定にしました。

特別なことはしていませんが、Jimdoでパンくずリストを簡単に追加する – hiromitz @ blog for designing and developmentで紹介されているパンくずリストを利用させて頂きました。
検索窓が無いのも個人的には不満なので、同じブログで紹介されているJimdoのリアルタイムサイト内検索も使ってみたいなぁと思います。
「うーん…。アレがあれば…。」というような機能を作って公開してくださる方に感謝。

今回のホームページでは、ブログで物件情報を登録し、新規に作成したページに表示させるようにしました。
ややこしい感じですが、ナビゲーションメニューの反転やパンくずナビの表示など、分かりやすさ優先に考えました。

そして、トップページやカテゴリ（物件一覧）表示も、Jimdoにある「ブログの概要表示」でなく、わざわざ作成しました。
これも見やすさ・分かりやすさを考えた場合、少し手を加えた方がよいだろうと考えたからです。

CMSを利用して自動的に成形更新するのと、HTMLで作成して更新することの間みたいなことをしました。
Jimdoにブログ記事のテンプレート機能などあればいいなぁと思います。
自分が知らないだけかもしれないので、もっと知らなければ。

ページによっては縦長になるので、フッタにリンクを追加しましたが、そのレイアウトなどを見ると、やはり独自レイアウトの方が良かったかなぁとも。

次のサイトも非常に参考になりました。

FC2ショッピングカートをお試し

イケダヒロミ — Fri, 15 Jul 2011 08:33:56 +0000

無料の「ＦＣ２ショッピングカート」を使ったショップ構築をして、意外と使えるかもと思いました。
勿論、無料なりにですけど。

しかし、お客さんのサイトを使ってカスタマイズの情報を見せるわけにもいきませんから、自分でもショップを作ってみようと思います。
また機会があるかどうか分からないけれど、ＦＣ２無料ショッピングカートカスタマイズの時に役立つようにも。

でも、売るものがない…というのが悩み。
フリマ式で、自分で持っているもの一点もので売ってみようかしらと思ってます。
紙モノ文具（ポストカードとか栞とか）を作るとか。

どこかで宣言しないと前へ進まないタイプなので、ここに書いておきます。
宣言しても、何もしない場合も多々あります。

TypePadからBloggerへのブログ引っ越し

イケダヒロミ — Tue, 12 Jul 2011 09:22:24 +0000

TypePadからBloggerへのブログ移行について、ちょっと調べました。
そして、エクスポートとインポートを試してもみました。
そのメモ。

手順は、簡単です。

TypePad管理画面の［設定］＞［インポート/エクスポート］の「エクスポート」から、エクスポートしたファイルをダウンロード。
http://movabletype2blogger.appspot.com/ で、Blogger用のファイルに変換。
Blogger管理画面の［設定］＞［ブログツール］の「ブログをインポート」で、Blogger用に変換したファイルをアップロード。

でも、何度も穴に落っこちました。

まずは、Blogger用のファイルに変換するところで、つまづきました。
なんか、今日はだめでも明日は大丈夫的みたいなのかもしれません。
実際、昨日はダメ（一向に画面が変わらない）だったのに、今日は一発ＯＫということを経験しました。

そして、Bloggerでのインポート作業でも苦戦。
まずは全然ダメ。進行状況を示すバーが変化するだけ。
次に、進行状況を示すメッセージが次々変わり、成功か！と思ったらずっと「ブログの投稿を書き込み中」。
最後に、ファイルを分割してアップしたら、成功しました。

エラーもブラウザ（Google Chrome／Firefox／Safari）で色々でした。
「ブログの投稿を書き込み中」から進まなかったり。
英語で「容量オーバー」的なメッセージが表示されたり。
不明なエラーメッセージが表示されたり。

今回の経験からは、Macの場合 Safariで作業する方がいいみたいです。

次の記事を参考にさせていただきました。

VOXからBloggerへの移行 – mzdakr blogで紹介されていた、パソコン（私の場合Mac）で動かす「Google Blog Converter」は、私には難しく断念。
でも、ダウンロードしたファイルの中にサンプルファイルがあって、それはちょっと参考になりました。
同じであれば安心もするし、穴に落ちていた頃のエクスポートファイルはサンプルとはちょっと違っていました。

なんだか、タイミングとか運の問題みたいなところがあって、スッキリしないのですが、まとめ。

Tumblerテーマのフォント指定を変更

イケダヒロミ — Thu, 30 Jun 2011 05:52:27 +0000

Tumbler（タンブラー）が日本語対応になったのを機に、新しいミニブログを始めました。
Tumbler（タンブラー）とは何ぞや？と思う方は、「1日に4億ビューを稼ぐミニブログ『Tumblr』で出来ること」を参考にするとよいと思います。

テンプレート（テーマ）がかっこいいのも特長の一つですが、外国で作られたテーマだと日本語表記にした場合にフォントが「うーん…」ということもあります。
まずは気になった見出しのフォント指定だけ変えてみました。