Tinkererブログにソーシャルボタンを設置する
このブログにソーシャルボタンを設置してみました。
- ツイッター
- はてぶ
いずれはFacebookのいいねボタンも追加したいですね。
なお、以降記載するコードは、「_templates」ディレクトリ下にpage.htmlを作成してそこに書きました。
はてぶボタンの設置
こちらも参考にしたサイトと手順は同じです。
- はてなブックマークボタンの作成・設置について のページでコードを取得
- URLとタイトルの部分をSphinxのグローバル変数に変更
- page.htmlに記載
こんな感じです。
page.htmlへの記載
実は書き留めておきたかったのはこれです。
コードの取得はなんてことないんですが、このpage.htmlへの記載方法がよく分かりませんでした。
というか、そもそも中括弧で囲まれたコードが何のやつなのか分かってませんし(^_^;)
結局、今はこんな感じでうまく動いています。
{% extends "!page.html" %}
{%- block extrahead %}
[Facebookのコメント設置用のメタタグ]
{{ super() }}
{% endblock %}
{% block body %}
[はてブボタンのコード]
[ツイッターボタンのコード]
{% endblock %}
ネットで色々見てみたところ、Tinkererってjinja２というテンプレートエンジンを使ってるんですね。
そんなことさえ知らなくてもどうにかなってますが(笑)
とはいえ、今はpage.rstというファイルが_templates下に最初からあるので、これを使うのがスマートなやり方なのかなあなんて思いますが、よく分かりません。
こういった細かい疑問点は、使う中で解消していきたいですね！
フェイスブックのコメント機能を組み込む
さて、無事にGitHub上にブログを公開することが出来ましたので、次はカスタマイズをがつがつやっていきます。
まずは、コメント機能の組み込みです。
参考：Tinkerer 1.1以降でFacebookのコメントプラグインを組み込む方法
どうやら、Tinkererの現バージョンから方法が変わったみたいです。bitbucketにあるtinkerer-contribを取得する必要があります。
そのためには、bitbucketのアカウントを作成する必要がありました。
とその前に、私の場合はmercurialをまずインストールしました。
sudo port install mercurial
続いて、bitbucketのアカウント作成ですが、GitHubのアカウントを使って行ないました。
そうすると、GitHubで用意したSSH鍵をインポートしてくれて、使えるようになりました。
cd Work
mkdir hg_repos
cd hg_repos
hg clone ssh://hg@bitbucket.org/vladris/tinkerer-contrib
あとは参考にした記事通りに行ないました。
mkdir -p <myblogディレクトリ>/_exts
〜以下略〜
ただし、フェイスブックのアプリケーションIDを使った組み込みには失敗しまして、私のフェイスブックIDを使った方法で組み込みました。
どうもアプリの設定が良くないみたいですので、改めてチャレンジしてみます！！
Tinkererで定期的にビルドする
仕事でSphinxを使い始めたわけなんですが、実は毎回make htmlするのが結構だるいんですよね(^_^;)
というわけで、どうにか楽にしてくれる方法がないかと思って探してみたところ、、、
サクラエディタで、rstファイルを更新すると自動的にmakeするマクロがネット上に転がってました。
これを試してみたら、、、すごい！！
チョーー楽 だったので、家のmacでもTinkererでブログ書くときは取り入れたいなと思っていたのでした。
調べてみると、watchコマンドを入れたらええやん！ということが分かったんです。
が、Macには標準で入っていない。。。
なので、もうシェルスクリプトでも書いてやれ！ と思ってたら、すでに書いている人がいましたので拝借☆
これはzshだったので、bashにちょろっと書き換えました。
後は、ブログ作業用ディレクトリで、
watch tinker -b
これだけ。
nオプションでコマンド実行間隔を指定できるつもりでしたが、うまくいってない(笑)
とはいえ、いい感じに環境が整ってきました(笑)
(最終更新日：2013/05/18)
GitHubのアカウントを作成する
さて、まだ手持ちのiMac上でしこしこ作成中です。
最近のナウい技術者っぽく、私もGithubのアカウントを作成し、Pagesでこのブログを公開しようと思います。
と、その前に、、、
Gitをいれる
Gitが入っていなかったので入れておきます。
Macportsが入っていますので、それを使います。
sudo port install git-core
これで入ってくれましたぁ。
MacPortsの更新
ついでに、MacPortsの更新もしました。
というのも、こんなこと言われたんですよねえ。
Warning: port definitions are more than two weeks old, consider using selfupdate
コマンドは調べて以下を入力しました。
sudo port -d selfupdate
sudo port upgrade outdated
sudo port upgrade installed
これでOK！
GitHubのアカウント作成
GitHubのアカウントは、以下を入力したらすんなりいきました。
- username
- password
リポジトリの作成
さて、ブログ用のリポジトリ作成と、ローカルで作ったhtmlファイル達をpushします。
まず、リポジトリの作成は、ブラウザ上でやりました。
htmlファイルの追加
次にリポジトリをローカルディレクトリにcloneします。
git clone git@github.com:nidena/nidena.github.com.git
その後、標準では Jekyll サポートのため _ (underscore) から始まるディレクトリを使用できません。
このままだと困るので Jekyll サポートを無効化するためのファイルを作成します。
cd nidena.github.com/
touch .nojekyll
htmlファイルをリポジトリ下に持ってきます。
そして、addしてcommitしてpushしたら完了のはずが、、、
rsync -av <myBlogディレクトリ>/blog/html/ .
git add .
git commit -m "First commit of blog contents."
git push origin mastar
エラーになりました。。。
error: src refspec mastar does not match any.
error: failed to push some refs to 'git@github.com:nidena/nidena.github.com.git'
すぐには理由が分からなかったんですが、とりあえずusernameとemailを登録していなかったのでします。
git config --global user.name "nidena"
git config --global user.email naoking504@gmail.com
で、この時思いつきました。
「そうだ、README作れと言ってた！」
とゆーわけで、空ファイルのREADMEを追加しました。
touch README.md
git add README.md
git commit -m "add readme"
その後、pushするとうまくいきましたぁ！！
git push -u origin mastar
(最終更新日：2013/05/18)
最初の第一歩
初めまして。
これからここで色々と書いていこうと思います。
とりあえず、以下の機能を実装してみるつもりです。
- フェイスブックコメントの追加
zenbackの関連記事
できたら記事にしますねー
(最終更新日：2013/05/18)