OGPの設定とかSNS関係のところ修正した

今時OGPくらい対応しておかないと、Facebookでリンクがシェアされた時とかに恥ずかしい思いをする。ひどい場合だと、ページ内広告の画像が使用されたりとか…。

このサイトでは広告とか考えてないので、そういうことはないけど、画像がないのはそれはそれで寂しい。シェアされることがあれば…の話だが。

meta タグの設定

「jekyll open graph」でググったらテンプレートが出てきたので、使わせてもらうことにした。

Open Graph for Jekyll

でも何かあんまりだったので修正した。

{% gist 6388460 ogp_meta_tags.html %}

page.is_top てのは、index.md の方で設定して、サイトのトップページと、そうでない時に出力する内容を変更できるようにしてる。

あと、og:description のとこだけど、記事はMarkdownで書いているので、そのまま出力すると # とか - とかの記号が入ってしまうことがある。なので、

1. markdownify でHTMLに変換
2. stript_html でHTMLタグを除去
3. 改行を除去
4. truncate

という手順を踏んでる。

いいねボタンとか

Implementation of Social Sharing into Jekyll | Florian Bersier

↑このページを読んだけど、何かごちゃっとしてんなーという印象。とりあえず include を使って地道に作ることにした。
ボタンはそれぞれのサイトでタグを作成する。

• Like Button - Facebook開発者
• Twitter / Twitterボタン
• はてなブックマークボタンの作成・設置について - はてなブックマーク

最終的にできたファイルはこんな感じ。

_includes/sns
|-- facebook
|   |-- header.html
|   |-- like.html
|   `-- site_like.html
|-- hatena
|   |-- bookmark.html
|   |-- script.html
|   `-- site_bookmark.html
|-- ogp_meta_tags.html
`-- twitter
    |-- share.html
    `-- site_share.html

↑ちなみに、treeコマンドは LANG=C をつけた方がMarkdownとは相性がよさそう。何か変にずれてしまうので。

ボタンは記事の下に設置してみた。