仕事にヒント

ライブドアブログに「いいね」ボタンとOGP導入

イケダヒロミ — Wed, 16 May 2012 11:13:19 +0000

テストで登録してみたライブドアブログにソーシャルボタンを設置してみました。
ソーシャルボタンとは、facebookの「いいね」やTwitterの「ツイート」ボタンなどのこと。

よく見ていたライブドアブログには無かったので、ライブドアブログでのソーシャルボタン設置は面倒なのかと思っていたのですが、管理画面から簡単に設定出来ました。
OGP対応もしていて、記事投稿時にオプション設定すればOKです。

以下、設定手順です。

ライブドアブログにソーシャルボタンを設置

ライブドアブログ管理画面から「ブログ設定」を選びます。
「外部サービス」を選びます。
タブメニューから「ソーシャルボタン」を選びます。
表示させるソーシャルボタンにチェックを入れ、「設定する」ボタンを押します。

投稿時にオプションでOGP対応の説明文設定

投稿時には、OGP対応の説明文を設定しておきましょう。
OGPについては、ライブドアブログ投稿画面（下記画面）「OGPとは？」リンク先のブログを参考にどうぞ。
また、過去にOGPについて調べた時の記事もあります。

投稿時には、「オプション設定」を表示します。
「記事の概要設定」に任意に入力します。

使っているテンプレートによっては、対応していないかもしれません。
その場合は、独自タグを使ってのカスタマイズが必要かも。

「記事の概要設定」に入力しない場合は、記事の先頭からの文章が自動的に登録されます。

アドビ　CS6無償アップグレード対象ソフトをいつ買うか？

イケダヒロミ — Tue, 03 Apr 2012 08:11:04 +0000

いくつか、アドビのソフトを使っています。
どうしても必要なのかどうかと云われれば、悩んでしまうほどの使用頻度だけれど、無いと仕事には困るような…。

「CS5.5 を買って、次期バージョン製品を手に入れよう！」キャンペーンが3月26日から始まりました。
まだCS5にアップグレードしてないソフトもある私。
3月31日までのアップグレードキャンペーンでの5,000円キャッシュバックを狙ってもいたのですが、風邪を引いて決断出来ませんでした。

まずは近々仕事で必要なのが確実な感じ（試用版期限切れしそう）のIllustratorをアップグレードしといた方がいいのかな、と。
Photoshop、Fireworksもあり、Mac本体も買いたいし、財布は寒く、頭が痛いです。

Facebookページのタイムライン化についての備忘録

イケダヒロミ — Wed, 07 Mar 2012 06:15:05 +0000

Facebookページが、3月30日には強制的にタイムラインデザインへ変更されます。
見た目のデザインだけでなく、Facebookページ運用についての考え方も変わると思います。
そこで、実際に自分のFacebookページを作業しながら調べたことのメモです。

まずは、参考にしたリンクを挙げておきます。

ページ幅が広がる

まず、大きく見た目が変わります。
こんな感じ↓の左のタブメニュー（アプリ）が無くなって、ページ幅が広がります。

そして、タブメニュー（アプリ）は、カバー写真の下に配置されています。（後述の画像参照）

アプリのページ幅は、今までは横幅520pxでしたが、タイムライン適用後のアプリのページ幅は810pxとなります。
タブメニューが無くなった分、横に広がりました。
今までより、表現の幅が広がると思います。

ビジュアル重視？

カバー写真等の画像が必要になりますし、Facebookページ（ブランド）を印象づけるのに画像を工夫すると良さそうです。
必要な画像サイズは、以下の通りです。

カバー写真　851×315px: ロゴはOKのようですが、宣伝やアクションを促す文句はNGというfacebookの規約のようです。
プロフィール画像　180×180px
: 実際に表示されるのは125×125pxですが、アップロード時に180×180pxの画像だときれいに表示されます。
カスタムタブ（アプリ）画像　111×74px
: カスタムタブの画像を任意に変更できます。
「写真」は固定で、常時表示されるのは「写真」を含め４つのアプリまでです。
合計12アプリ登録でき、表示位置は変更可能です。

デフォルトページ設定が無くなる

「いいね！」を誘導するウェルカムページを用意して、Facebookページの「デフォルトページ」とすることが多かったと思いますが、デフォルトページ設定自体が無くなりました。
FacebookページのURLで表示されるのは、タイムラインです。

直接、ウェルカムページのURLをリンクすれば表示できます。
例えば、https://www.facebook.com/kokochinote?v=app_186663019975 というように。
広告や外部サイトからは、ウェルカムページに誘導する方法もあるとうことです。

管理画面は以前より見やすい

管理情報が、一つのパネルにまとまっていて、以前より分かりやすい気がします。
でも、今のところ、個人アカウントでfacebookを見ていると、Facebookページの「お知らせ」は、管理画面を見ないと分かりません。

Facebookページのタイムライン化による変化は、まだまだfacebook初心者の私としては、大変というより楽しみであります。

試行錯誤の様子は、facebookのノートにも記録していますので、宜しければ、ご覧ください。
そこにも書きましたが、英語アプリの「TabSite」からの情報が役に立ちました。
中学英語くらいでも、理解できる部分もありました。

「TabSite」については、Welcomeページで高度なカスタマイズをしたいなら「TabSite」｜Rex（レッキス）の記事を参考にして、導入してみました。
810px幅への対応も速かったです。

WordPressのテーマの変更と、OGPプラグイン『WP-OGP』導入

イケダヒロミ — Tue, 17 Jan 2012 08:32:33 +0000

えいやーっと、このブログで使っているWordPressのバージョンアップと、テーマの変更を作業しました。

デフォルトの「Twenty Eleven」の子テーマを作り、
自分で紹介していたヘッダ画像に変更し、
OGP対応のために、プラグイン『WP-OGP』をインストールしました。

プラグイン『WP-OGP』

先日、プラグインを使わないOGP導入を試したばかりですが、テーマを変更したので、今度はプラグインを試してみようと思いました。
WordPressのOGPプラグイン『WP-OGP』を正しく設定する方法 | IDEA*IDEAを参考に、修正・変更しました。

参考にした記事にある通り、プラグインファイルの「fb:appid」を「fb:app_id」へ変更。（でも、一箇所じゃありませんでした。
先日の記事にも書いた通り、を追加。（プラグインを変更するのは難しいので、header.phpに直書き）
記事に画像が無い場合の画像を差し替え。

Facebookのツール「Debugger – Facebook開発者」が、検証にとても役立ちました。

しばらく、様子を見て、テーマを変えたことでの不具合を確認します。

HTMLの再学習に「ドットインストール」が便利

イケダヒロミ — Thu, 05 Jan 2012 08:16:11 +0000

JavaScriptとかjQueryを学習したいと思い、3分動画でマスターできる、初心者向けプログラミング学習サイト「ドットインストール」に登録（無料）しました。
登録はしたものの全くログインしないでいたら、背中を押すようにメルマガが届きました。
“まずは一歩”と、ログイン。

すると、基本であるHTML、CSSのレッスンもあるではありませんか！
独学の私、早速「HTMLの基礎」から始めました。

動画は苦手だと思っていたのですが、3分くらいの動画（スクリーンの動画キャプチャ）は分かりやすいです。
人の声での説明というのもいい。
“3分”という時間の妙に、「カップラーメンてすごいな」と変なところに感心したり。

勢いで登録はしたものの続けられるか不安もあったのですが、これなら続けられそうです。
ワクワク。

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の設定か…。