2012年10月12日金曜日

BootstrapのGoogle Maps JavaScript APIへの影響と対策

Bootstrapを使っているページ内ではGoogle Maps JavaScript APIで生成した地図の表示が乱れることがある件について、jsdo.itに投稿しました。

地図領域のIDが'map_canvas'でなければ、地図の表示が乱れるので、たとえばIDが'map'の場合、以下のCSSを書く必要があります。

#map img {
  max-width: none;
}

#map_canvasの場合のみ正常に表示されるのは、BootstrapのCSSが#map_canvasを特別扱いしているためなのですが、これは正直微妙ですよね。

確かに#map_canvasに固定しておけば、何も気づかずに救われる場合もいるでしょうが、別のIDを使っている場合に対して無意味すぎると思います。

こっちの方がBootstrapらしいかなと思うのですが、どうでしょうか。

.map-canvas img {
  max-width: none;
}

#map_canvas対応は後から追加されたものですが、githubでも、#map_canvas対応について、賛成しかねるとのコメントが付いています。
make bootstrap like google maps a bit more · fe30bd6 · twitter/bootstrap

「a bit more」だから、あまり気にしなくていいのでしょうか(笑)

2012年10月11日木曜日

Facebookの「宣伝する」リンクを非表示にする方法

Facebookで、自分の投稿を宣伝できるようになりました。

このように、「宣伝する」というリンクが現れます。

試しに「宣伝する」をクリックすると、こんな画面が出てきます。

これ、宣伝するつもりが全然ない人には邪魔ですよね。

Facebookヘルプセンターに書かれているように、投稿して6時間経つと「宣伝する」リンクは出なくなるのですが、投稿数が比較的多い人だと、目にする機会は多いと思います。

「宣伝する」リンクを非表示にする

Stylishというブラウザの拡張機能(アドオン)を使用します。
Chrome版Firefox版がありますので、どちらかのブラウザでインストールしてください。

次に、以下にアクセスして、拙作の「Hide boostActionLink」というユーザースタイルをインストールしてください。
Hide boostActionLink - Themes and Skins for Facebook - userstyles.org

「+ Install with Stylish」というボタンを押すとインストールされます。

以上で、「宣伝する」リンクが非表示になります。

また、拡張機能(アドオン)の管理で、インストールしたユーザースタイルの編集、有効化/無効化、削除が可能です。

この記事のリンクをシェアして、宣伝してみようかな(笑)

関連リンク

2012年6月12日火曜日

RailsアプリをPostgreSQLで開発してHerokuにデプロイするまでの簡単まとめ

PostgreSQLの設定や開発用ユーザーの作成、Heroku Toolbeltのインストールは完了しているものとします。

1. アプリケーション作成

$ rails new blog -d postgresql
$ cd blog

2. データベース設定

config/database.ymlの開発用DBとテスト用DBを設定

development:
  adapter: postgresql
  encoding: unicode
  database: blog_development
  pool: 5
  username: ユーザー名
  password: パスワード

.gitignoreにconfig/database.ymlを追加

# Ignore database.yml
/config/database.yml

3. データベース作成

$ rake db:create

4. データベースのマイグレーション

$ rails g scaffold post name:string title:string content:text
$ rake db:migrate

5. ルーティング設定

$ rm public/index.html

config/routes.rbを編集

  root :to => 'posts#index'

6. Herokuにデプロイ

アセットの事前コンパイル

$ rake assets:precompile

以下、デプロイ

$ git init
$ git add .
$ git commit -m 'init'
$ heroku login
$ heroku create --stack cedar
$ git push heroku master
$ heroku run rake db:migrate

動作確認

$ heroku open

動作しなければログを確認

$ heroku logs

2012年5月30日水曜日

Railsのサンプルで「Can't mass-assign protected attributes」ってエラーが出た

Ruby on Rails Guides: Getting Started with Rails」にあるBlogアプリのサンプルでRailsの基本を勉強していたところ、最後のところで動作しなかったのでメモ。

11 Building a Multi-Model Form」にあるように、tagというモデルを追加して、views/posts/_form.html.erbにタグの編集を追加すると、フォームのsubmitでエラーが発生するようになりました。

エラーの内容は以下。

ActiveModel::MassAssignmentSecurity::Error (Can't mass-assign protected attributes: tags_attributes):

トレースを見ていると、assign_attributesでエラーが発生しているので、文字通り、保護された属性tags_attributesにアクセスしようとしたのが原因っぽい。

ということで、app/models/post.rbを次のように直したらあっさり解決。

class Post < ActiveRecord::Base
#  attr_accessible :content, :name, :title
  attr_accessible :content, :name, :title, :tags_attributes
...
end

Rails 3.1ベースで書かれたドキュメントで、そもそもmodelのソースにattr_accessibleがないので、ここを変更するという指示がなかったのでしょう。

こちらの環境は3.2.3なんで、極力バージョンが近いものを参考にするようにした方がよさそうだと学習。

2012年3月8日木曜日

ソーシャルボタンを設置したら動作確認を!w

ほんと恥ずかしい話です…

衆議院議員 安倍晋三 公式サイト

コドモのためのワークショップ・イベント企画|ピコトン

いいね!ボタンを押してみると…

はてなブックマークボタンも…

+1ボタンも…

どうなってるか想像はできるけど、一応ソースも見ておきましょうか。

衆議院議員 安倍晋三 公式サイト

<div id="rightSideMenu_socialLink">
<ul>
<li class="facebook"><!-- facebook -->
<div class="fb-like" data-href="http://workshop.picoton.com" data-send="false" data-layout="button_count" data-width="20" data-show-faces="true"></div>
<!--facebook end--></li>
<li class="hatena"><!--hatena-->
<a href="http://b.hatena.ne.jp/entry/http://workshop.picoton.com" class="hatena-bookmark-button" data-hatena-bookmark-title="コドモのためのワークショップ・イベント" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
<!--hatena end--></li>
<li class="twitter"><!--twitter-->
<!--Twitter Follow Button-->
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.html?screen_name=AbeShinzo&amp;lang=ja&amp;show_count=false" style="height:20px; width: 90px;"></iframe>
<!--twitte endr--></li>
<li class="google"><!--google+1-->
<!-- このタグを +1 ボタンを表示する場所に挿入してください -->
<g:plusone size="medium" href="http://workshop.picoton.com"></g:plusone>

<!-- この render 呼び出しを適切な位置に挿入してください -->
<script type="text/javascript">
  window.___gcfg = {lang: 'ja'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
<!--google+1 end--></li>
</ul>
</div>

コピペしたままやんw
うわぁ…

一回でも動作確認すれば気づくでしょうに…

しかもこれ、個人が趣味でやってるサイトじゃなくて、元総理の公式サイトですからね(泣)
日本ヤバいw

最低限の動作確認くらいしようよってのは、ソーシャルボタンに限った話じゃないですけどね!

@AbeShinzo宛にツイートしといたんだけど、どうなるでしょうか。
早急に対応されることを期待します。

2012年3月4日日曜日

Tweetボタンを世界の言語で表示してみた

いいね!ボタンでやってみたら、ツイートボタンも一応やっておきたくなりました。

Facebookのような、対応言語を参照できるドキュメントが確認できなかったので、以下のリンクから手動で取り出しました。
Twitter / Twitterボタン

また、以下のドキュメントも参考にしています。
Tweet Button | Twitter Developers

あくまで体感的な印象ですが、いいね!ボタンよりもツイートボタンの方が重いなと感じます。

いいね!ボタンほど面白くなかったというのが正直な感想ですね。

追記: モバイルテンプレートだとボタンが出ないです。すみません><

ツイートの対象:
言語ボタン
スペイン語 - Español
英語 - English
ノルウェー語 - Norsk
ドイツ語 - Deutsch
ヒンディー語 - हिन्दी
韓国語 - 한국어
マレー語 - Bahasa Melayu
ロシア語 - Русский
ポルトガル語 - Português
日本語
オランダ語 - Nederlands
インドネシア語 - Bahasa Indonesia
フィンランド語 - Suomi
スウェーデン語 - Svenska
フィリピン語 - Filipino
繁体中国語 - 繁體中文
フランス語 - français
ポーランド語 - Polski
デンマーク語 - Dansk
簡体中国語 - 简体中文
ハンガリー語 - Magyar
トルコ語 - Türkçe
イタリア語 - Italiano
Thai - ภาษาไทย

2012年3月1日木曜日

Facebookのいいね!ボタンを世界の言語で表示してみた

とりあえず興味本位で。

Facebookがサポートしている言語はXMLファイルから取得できますが、以下のドキュメントにそのリンクがあります。
Internationalization - Facebook開発者

現時点では77言語あるようですが、「English (Upside Down)」(en_UD)とか「Leet Speak」(fb_LT)など、ふざけたものも含まれます。「English (Pirate)」(en_PI)もジョーク?

これだけのボタンを表示すると、さすがに重いです。

いいね!ボタンの言語については、以下のリンクのFAQに、「How do I display the Like button in different languages?」というのがあります。
Like Button - Facebook開発者

ちょっと見た雑感とか。

  • ボタンが右に寄ってるのは、右から左に書く言語?カウントは左から右でいいの?
  • English (Upside Down)はカウントも逆にしてほしい。
  • Leet Speakの「<3」いいなと思ってFacebookの言語をLeet Speakに変えてみたらカオスすぎるw

表示形式(standard or button_count)といいね!の対象(この記事 or Facebookのトップ)を変えられるようにしてあるので、いろいろ試してみてください。Facebookのトップ、httpsの方は少ないですね。

追記: モバイルテンプレートだとボタンが出ないです。すみません><

表示形式:
いいね!の対象:
言語ボタン
Afrikaans
Arabic
Azeri
Belarusian
Bulgarian
Bengali
Bosnian
Catalan
Czech
Welsh
Danish
German
Greek
English (UK)
English (Pirate)
English (Upside Down)
English (US)
Esperanto
Spanish (Spain)
Spanish
Estonian
Basque
Persian
Leet Speak
Finnish
Faroese
French (Canada)
French (France)
Frisian
Irish
Galician
Hebrew
Hindi
Croatian
Hungarian
Armenian
Indonesian
Icelandic
Italian
Japanese
Georgian
Khmer
Korean
Kurdish
Latin
Lithuanian
Latvian
Macedonian
Malayalam
Malay
Norwegian (bokmal)
Nepali
Dutch
Norwegian (nynorsk)
Punjabi
Polish
Pashto
Portuguese (Brazil)
Portuguese (Portugal)
Romanian
Russian
Slovak
Slovenian
Albanian
Serbian
Swedish
Swahili
Tamil
Telugu
Thai
Filipino
Turkish
Ukrainian
Vietnamese
Simplified Chinese (China)
Traditional Chinese (Hong Kong)
Traditional Chinese (Taiwan)

2012年2月25日土曜日

Pinterestのピン避け(nopin)がお粗末だった件

ヘルプの「What if I don't want images from my site to be pinned?」のところに書いてあるように、Pinterestは、以下の1行がHTMLに含まれているページではpinできないようにする対策を実施しました。

<meta name="pinterest" content="nopin" />

ところが、これは簡単に突破することができます。

実験用ページを作りました。確認方法を簡単にまとめます。

  • 実験用ページはnopinコードを含むため、初期状態ではpinできません。「Pin It」ボタンを押すとアラートが出ます。
  • いったんpin不能状態になると以後は動作しなくなるので、ページをリロードします。
  • 「Remove "nopin"」ボタンを押します。
  • 「Pin It」ボタンを押すと、今度はpin可能になります。

「Remove "nopin"」ボタンのイベントハンドラで、nopinコードを動的に取り除いています。そういうブックマークレットを書けば、他のページでもnopinが突破できるわけです。

nopinコードがあればpinできませんよっていうのは、そういうことじゃないだろうと言っておきたいと思います。

pinmarkletでpinできないページがあって、DOMをゴニョゴニョして無理やりpinした時に疑惑が発生して、やっぱりそうだったかって話。localhostからもpinできるしね。

そのうち真っ当に対策されることを期待します。

参考までに、nopinと公式の「Pin It」プラグインが同一ページに共存してる場合は、pinできました。意味的には矛盾している状態ですし、pinできてもできなくても、どちらでも問題ないでしょう。

2012年2月21日火曜日

BloggerへのDISQUS導入メモ

このブログにDISQUSコメントを導入した手順のメモです。

DISQUSの方でウィジェットとして簡単に追加する手順が用意されているのですが、以下の対応を追加しています。

  • モバイルテンプレートにも対応
  • ページにも対応
  • 編集中のプレビューでの発動を抑止

まずはウィジェットの追加の手順を、次にカスタマイズの手順を説明します。

1. ウィジェットの追加

ずばり、以下のページで「Add site "◯◯◯" to Blogger」というボタンを押すだけで、ウィジェットが追加されます。
Install Disqus on Blogger

ブログを表示して確認してみます。このブログでは右サイドバーに追加されていたので、ダッシュボードの「レイアウト」で、「Disqus for ◯◯◯」というウィジェットを記事の下に移動しました。

2. モバイルテンプレート対応

単にウィジェットを追加した状態では、PCでしかDISQUSコメント欄が表示されませんので(モバイルではBloggerのコメント欄のまま)、手動でテンプレートを書き換えました。

ダッシュボードの「テンプレート」から「HTMLの編集」に進み、「ウィジェットのテンプレートを展開」のチェックボックスをONにしして、「Disqus for ◯◯◯」という箇所を探します。

<b:widget id='HTML1' locked='false' title='Disqus for ◯◯◯' type='HTML'>

この行に、以下の青字部分を追加します。

<b:widget id='HTML1' locked='false' mobile='yes' title='Disqus for ◯◯◯' type='HTML'>

以上でモバイル対応は完了です。テンプレートを保存して、記事ページにコメント欄が表示されるか確認しましょう。

なお、普通に記事ページでコメント欄が表示できればよくて後は気にしないという場合は、ここまでの対応で十分かと思います。

3. 編集中のプレビューでの発動を抑止

編集中のプレビューでDISQUSコメントが発動すると、余計なスレッドが作成されてしまうので、それを抑止します。テンプレートで抑止する方法もあると思いますが、ここでは以下の青字部分のように、JavaScriptで抑止しています。(インデント少し変えています)

<b:widget id='HTML1' locked='false' mobile='yes' title='Disqus for ◯◯◯' type='HTML'>
<b:includable id='main'>
...
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <style type='text/css'>
          #comments {display:none;}
        </style>
        <script type='text/javascript'>
          location.pathname !== &#39;/b/post-preview&#39; &amp;&amp; (function() {
            var bloggerjs = document.createElement(&#39;script&#39;);
            bloggerjs.type = &#39;text/javascript&#39;;
            bloggerjs.async = true;
            bloggerjs.src = &#39;http://&#39;+disqus_shortname+&#39;.disqus.com/blogger_item.js&#39;;
            (document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(bloggerjs);
          })();
        </script>
      </b:if>
...
        <script type='text/javascript'>
          location.pathname !== &#39;/b/post-preview&#39; &amp;&amp; (function() {
          var bloggerjs = document.createElement(&#39;script&#39;);
          bloggerjs.type = &#39;text/javascript&#39;;
          bloggerjs.async = true;
          bloggerjs.src = &#39;http://&#39;+disqus_shortname+&#39;.disqus.com/blogger_index.js&#39;;
          (document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(bloggerjs);
        })();
        </script>
    </b:includable>
</b:widget>

4. ページ対応

次に、記事だけでなく、固定ページでもDISQUSコメントを使うようにします。blog.pageTypeがitemの場合のみ実行されているところが該当部分ですので、static_pageに対しても適用します(青字部分)。

      <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <style type='text/css'>
          #comments {display:none;}
        </style>
        <script type='text/javascript'>
          location.pathname !== &#39;/b/post-preview&#39; &amp;&amp; (function() {
            var bloggerjs = document.createElement(&#39;script&#39;);
            bloggerjs.type = &#39;text/javascript&#39;;
            bloggerjs.async = true;
            bloggerjs.src = &#39;http://&#39;+disqus_shortname+&#39;.disqus.com/blogger_item.js&#39;;
            (document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(bloggerjs);
          })();
        </script>
      </b:if>
      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
        <style type='text/css'>
          #comments {display:none;}
        </style>
        <script type='text/javascript'>
          location.pathname !== &#39;/b/post-preview&#39; &amp;&amp; (function() {
            var bloggerjs = document.createElement(&#39;script&#39;);
            bloggerjs.type = &#39;text/javascript&#39;;
            bloggerjs.async = true;
            bloggerjs.src = &#39;http://&#39;+disqus_shortname+&#39;.disqus.com/blogger_item.js&#39;;
            (document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(bloggerjs);
          })();
        </script>
      </b:if>

5. 課題

ページ対応で、次のように||(or)を使って書いてみたのですが、動作せず、正しい書き方が分かりませんでした。

<b:if cond='data:blog.pageType == &quot;item&quot; || data:blog.pageType == &quot;static_page&quot;'>

次に、以下のように書いてみたところ、PCでは動作したのですが、モバイルではBloggerのコメント欄が出てしまいました。

<b:widget id='HTML1' locked='false' mobile='yes' title='Disqus for ◯◯◯' type='HTML'>
<b:includable id='disqus_item_js'>
  <style type='text/css'>
    #comments {display:none;}
  </style>
  <script type='text/javascript'>
    location.pathname !== &#39;/b/post-preview&#39; &amp;&amp; (function() {
      var bloggerjs = document.createElement(&#39;script&#39;);
      bloggerjs.type = &#39;text/javascript&#39;;
      bloggerjs.async = true;
      bloggerjs.src = &#39;http://&#39;+disqus_shortname+&#39;.disqus.com/blogger_item.js&#39;;
      (document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(bloggerjs);
    })();
  </script>
</b:includable>
<b:includable id='main'>
...
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:include name='disqus_item_js'/>
      </b:if>
      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:include name='disqus_item_js'/>
      </b:if>
...
</b:includable>
</b:widget>

ということで、残念ながら、非常に冗長な記述になっています。

2012年2月13日月曜日

ブログの記事をFacebookのAdd To Timeline(タイムラインに追加)に対応させる

Open Graph対応の何となくソーシャル風味なブログを作ってみた」で書いたように、このブログの記事を読んだことがFacebookのタイムラインに表示されるようなOpen Graph対応アプリを作成しましたので、作り方をまとめます。

Facebookアプリとしては最も簡単な部類に入るでしょうが、初めてだとそれなりに勉強になるかとは思います。

1. Open Graphを理解する

まずはFacebook開発者サイトの、以下のチュートリアルを読み、やるべきことを理解します。

Tutorial - Facebook開発者

2. アプリを作成

Facebookアプリの作成方法については割愛し、ブログを使ったウェブアプリの作成に必要な項目だけにとどめます。

まずは基本設定で以下を入力します。それぞれの環境に合わせて読み替えてください。

  • アプリのドメイン: ovreneli.blogspot.com
  • アプリをFacebookに結合する方法→ウェブサイト
    サイトURL: http://ovreneli.blogspot.com/

次に、[オープングラフ]-[Getting Started]でアクションとオブジェクトを定義します。

このアプリでは「read a article」としましたが、それだとニュースという扱いになるようです。

3. OGPの記述を追加

ここからはブログ側での作業になります。

OGPって何?って方は、以下のリンクに詳しくまとまっていますので、ぜひお読みください。

フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記

「いいね!」ボタン導入の際にすでにOGPを記述されている場合でも、オブジェクトの定義は追加する必要があるかと思います。「read a article」のarticleです。

Bloggerの場合、index(トップページ、ラベル)、item(記事ページ)、archive(アーカイブ)、static_page(固定ページ)の4種類のページタイプがあるみたいですが、itemのページでog:typeをarticleに設定する必要があります。

以下、Bloggerテンプレートでの記述例です。他のテンプレートをお使いの場合は読み替えてください。

名前空間の追加(青字の部分)

<html b:version='2' class='v2' expr:dir='data:blog.languageDirection'
  xmlns='http://www.w3.org/1999/xhtml'
  xmlns:b='http://www.google.com/2005/gml/b'
  xmlns:data='http://www.google.com/2005/gml/data'
  xmlns:expr='http://www.google.com/2005/gml/expr'
  xmlns:fb='http://www.facebook.com/2008/fbml'
  xmlns:og='http://ogp.me/ns#'>

OGPの追加(<head>と</head>の間、<b:skin>の上あたりがよさそう)

<b:if cond='data:blog.pageType == &quot;index&quot;'>
    <meta expr:content='data:blog.title' property='og:title'/>
<b:else/>
    <meta expr:content='data:blog.pageName' property='og:title'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <meta content='article' property='og:type'/>
<b:else/>
    <meta content='blog' property='og:type'/>
</b:if>
    <meta expr:content='data:blog.url' property='og:url'/>
    <meta expr:content='data:blog.title' property='og:site_name'/>
    <meta content='画像のURL' property='og:image'/>
    <meta content='アプリケーションID' property='fb:app_id'/>
    <meta content='ja_JP' property='og:locale'/>

4. Add To Timelineプラグインを設置

<body>のすぐ下あたりに、以下を追加します。
「いいね!」ボタンをiframe以外で設置している場合は、window.fbAsyncInitの追加だけで済むと思います。

<div id='fb-root' style='display:none;'></div>
<script>
window.fbAsyncInit = function() {
  FB.init({
    appId: 'アプリケーションID',
    status: true,
    cookie: true,
    oauth: true
  });
};

(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = '//connect.facebook.net/ja_JP/all.js#xfbml=1&amp;appId=アプリケーションID';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

次に、サイドバーなどにHTML/JavaScriptガジェットを追加します。

<fb:add-to-timeline></fb:add-to-timeline>

テンプレートを保存して、プラグインの表示を確認します。

また、この時点で、curlを使って動作確認することが可能です。
確認方法は、アプリのページの[オープングラフ]-[Dashboard]で、Action Types: Readの「Get Code」を参照してください。

5. publishの実装

最後に、fbAsyncInit内に「read a article」をpublishする実装を追加します(青字の部分)。

publishする条件は以下です。

  • ページのog:typeがarticleであること
  • ユーザーが「タイムラインに追加」でアプリを許可していること

og:typeの判定はBloggerテンプレートのページタイプで代替していますが、環境によってはJavaScriptで判定するなど、いくつかの方法が考えられると思います。

<div id='fb-root' style='display:none;'></div>
<script>
window.fbAsyncInit = function() {
  FB.init({
    appId: 'アプリケーションID',
    status: true,
    cookie: true,
    oauth: true
  });
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  FB.getLoginStatus(function(response) {
    if (response.status === 'connected') {
      setTimeout(function() {
        FB.api('/me/news.reads', 'post', { article: '<data:blog.url/>' }, function(response) {
          /*window.console &amp;&amp; console.log(response);*/
        });
      }, 15000);
    }
  });
</b:if>
};

(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = '//connect.facebook.net/ja_JP/all.js#xfbml=1&amp;appId=アプリケーションID';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

テンプレートを保存して、動作確認をします。

うまくいくと、15秒後にタイムラインに出るはずです。Washington Post Social Readerなどのニュースと一緒になってしまうんですけど…

成功した場合、FB.apiのコールバックでresponse.idがセットされていますので、動作しなければresponseを確認しましょう。

まとめ

最も簡単なFacebookアプリの作り方を紹介しました。

日本でもそろそろOpen Graph対応アプリの開発が活発になると面白いなと思っています。

2012年2月12日日曜日

Open Graph対応の何となくソーシャル風味なブログを作ってみた

設定方法など、解説エントリーは後で追加していきたいと考えていますが、今回はひとまず、カスタマイズした内容をまとめておきます。

1. タイムラインに追加

FacebookのOpen Graph活用事例です。

ブログの右側にある「タイムラインに追加」ボタンを押すと、以後、このブログの記事を読んだというアクティビティが、タイムラインに表示されるようになります。

今のところ控えめに、15秒以上読んでいただいた場合に限定しています(笑)

ぜひ「タイムラインに追加」を押して、15秒以上読んでいただければと思います。

2. DISQUSコメントシステム

どうしてFacebookのコメント使わないの?って言われそうですが、Facebook以外のアカウントでもコメントできる方がいいと考えて、DISQUSを選択しました。

Twitter、Facebook、Googleなどのアカウントでコメントできます。

また、モバイルでも利用可能です。

3. ソーシャルボタン

共有ボタン類

Blogger標準の共有ボタンは挙動も含めイマイチなので、自分で設置しました。

技術的な内容を書いていくつもりなので、LinkedInも含めています。

フォローボタン類

右側に各種SNSのフォロー系ボタンをまとめてみました。

どれもフォロアーが多くないですが、そこは今回の主題ではありませんし、設置すると効果があるかという実験でもありますので、気にしないでください><

4. Google+連携

読者の方には関係のない話ですが、投稿後に投稿をGoogle+で共有するのが、非常に簡単になっています。

5. 今後の課題

  • 「タイムラインに追加」のモバイル対応
  • 「ソーシャルボタン」のモバイル対応
  • 共有ボタンの追加の検討(はてなブックマーク、mixiチェックなど)

まずは形だけ整えてみたって状態ですので、内容のあるエントリーを書き続けていくのが、最大の課題ですけどね(苦笑)