タグ別アーカイブ: lokka

Lokkaをgit cloneしてからpull requestするまで

投稿日時: 投稿者:
返信

Lokkaをgithubでforkする

githubのLokkaリポジトリの右上にある「Fork」ボタンをクリック。

forkしたLokkaを自分のlocal環境へclone

% git clone git@github.com:noriaki/lokka.git lokka-noriaki

変更用のbranchを作りcodeに変更を加える

% cd lokka-noriaki
% git co -b spike_new_feature
% emacs lib/lokka/entry.rb # codeを修正・追加
% emacs spec/post_spec.rb # ちゃんとtestも書く

gemをインストールしてrspecによるunit testを走らせる

localでテストするだけなら、最小構成は以下でインストールできる。

% bundle install --without=production:development:mysql:postgresql
% rake spec

testをパスしたらcommitして自分のremoteリポジトリへpush

% git ci -a -m "added new feature"
% git push origin spike_new_feature

いざpull request

  1. 自分のremoteリポジトリへ行って
  2. branchを今回の作業で作った変更用branch(
    spike_new_feature

    )へ変更

  3. 右上にある「pull request」ボタンを押す

※参考：GitHubへpull requestする際のベストプラクティス

LokkaにFacebook OGP metaタグを追加する

投稿日時: 投稿者:
返信

OGPタグ用のHelperをつくる

lib/lokka/helpers.rb

に meta\_ogp メソッドを追加する。

def meta_ogp
  s = yield_content :meta_ogp
  s unless s.blank?
end

さらに、OGPタグを読み込む位置でこのメソッドを呼び出すために、

public/theme/theme-name/layout.erb

のmetaタグ周辺に追加した。

<%= meta_ogp %>

これでLokkaの各Viewで
content_for :meta_ogp

が使えるようになる。

各エントリの情報をOGPタグに設定して読み込む

public/theme/theme-name/entry.erb

の末尾に以下を追加する。

<% content_for :meta_ogp do %>
  <meta property="og:type" content="article"/>
  <meta property="og:site_name" content="<%= @site.title %>"/>
  <meta property="og:url" content="<%= base_url + @entry.link %>"/>
  <meta property="og:title" content="<%= @entry.title %>"/>
  <meta property="og:description" content="<%= @entry.snippet_body %>"/>
<% end %>

og:description

の値に設定されている

@entry.snippet_body

は、本文の先頭200文字を返すメソッド。
コードは以下の通り。
lib/lokka/entry.rb

のEntryクラスに追加する。

def snippet_body
  @snippet_body ||= Nokogiri(
    "<html><head></head><body>#{self.body}</body></html>"
    ).text[0..200]
end

self.body

には、各MarkupでHTMLコード化された本文が入ってるので、
それをHTML文書にしてNokogiriで解析してテキスト化してる。

これで、各エントリのページにOGPが追加された。

LokkaにFacebookコメントを設置する

投稿日時: 投稿者:
返信

Facebook Javascript SDKをjQueryを使って読み込む

コメントプラグインの設置には、Facebook Javascript SDKが必要。

public/theme/theme-name/entry.erb

の末尾に以下を追加。
jQueryとFacebook Javascript SDK用のプラグインを読み込んでる。

< % content_for :header do %>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script type="text/javascript" src="<%= @theme.path %>/js/jquery.facebook.js"></script>
< % end %>

Facebook Javascript SDK用のプラグインのコードは以下の通り。

jQuery(function($) {
    var app_id = $('meta[property="fb:app_id"]').attr('content');

    $('<script type="text/javascript">')
        .prop({ async: "true" })
        .attr({ src: document.location.protocol + '//connect.facebook.net/ja_JP/all.js' })
        .appendTo($('<div>', { id: 'fb-root' }).appendTo($('body')));

    window.fbAsyncInit = function() {
        FB.init({
            appId: app_id, status: true, cookie: true,
            oauth: true, xfbml: true,
            channelUrl: '//'+document.location.host+'/channel.html'
        });
        $("body").trigger("fbAsyncInit", [FB, app_id]);
    };
});

これを動作させるためのOGPタグを追加する。

public/theme/theme-name/layout.erb

のmetaタグあたりに以下を挿入。

<meta property="fb:app_id" content="FACEBOOK_APP_ID" />
<meta property="fb:admins" content="ADMIN_USER_ID" />

FACEBOOK_APP_ID は適当なFacebookアプリを作ってそのApp ID/API Keyを、ADMIN_USER_ID には自分のFacebook IDを入れる。

Facebook Commentプラグインのコードを取得

Facebook Social Plugin(Comments)のページでコメント欄のコードを出力します。

  • URL to comment on は適当で。後で書き換えるので
  • Number of posts は5つにした
  • Width はLokkaで使うテーマに合わせて。このブログでは690を指定

出力したコードはこんな感じ

<div class="fb-comments" data-href="http://example.com" data-num-posts="5" data-width="690"></div>

取得したコードを設置

public/theme/theme-name/entry.erb

の #footer内に以下を追加。

<div class="fb">
  <div class="fb-comments" data-href="<%= base_url + @entry.link %>" data-num-posts="5" data-width="690"></div>
</div>

data-href はそのPostのパーマリンクになるように変数化。

これで完成。