rcmdnk's blog
  1. Top
  2. › Blog
  3. › Octopress

20130831_hatebu_200_200

Octopress上で追加したWidgetについてのまとめ。

はてブ人気エントリー

はてブの人気エントリーのウィジェットは はてなのブログパーツの設定 から作ることが出来ます(はてなアカウントが必要)。

自分のURLを入れるとコードを作ってくれるのでそれを貼り付けるだけで出来ます。 Octopressでは これをsource/_includes/custom/asides/hatebu.htmlとしてコードを保存して おきます。(sectionタグを追加)

source/_includes/custom/asides/hatebu.html 
1
2
3
4
5
6
7
8
9
10
11
12

<section>
  <script language="javascript" type="text/javascript" src="http://b.hatena.ne.jp/js/widget.js" charset="utf-8"></script>
  <script language="javascript" type="text/javascript">
  Hatena.BookmarkWidget.url   = "http://rcmdnk.github.io/";
  Hatena.BookmarkWidget.title = "人気エントリー";
  Hatena.BookmarkWidget.sort  = "count";
  Hatena.BookmarkWidget.width = 250;
  Hatena.BookmarkWidget.num   = 5;
  Hatena.BookmarkWidget.theme = "default";
  Hatena.BookmarkWidget.load();
  </script>
</section>

こんな感じ。作成ページでもオプションを選べますが、 必要に応じてコードの値を変更することも出来ます。 Octopressのサイドバーに合うようにwidthは250にしました。 sortの値がcountだと全ページからはてブの多い順、 hotにすると新着エントリーになります。 載せる数や名前なども後から調整できます。

これで_config.ymlのdefault_asidesへcustom/asides/hatebu.html を加えることでサイドバーへ表示することが出来ます。 (まだ少ないものばかりで敢えて載せるのは微妙。。。)

Twitterタイムライン

Twitterのウィジェット(Twitterのアカウントが必要)から好きなウィジェットを作れます 1。

今、サイドバーでは検索でアカウント名(rcmdnk)を検索したものを使っています(エゴサーチ。。。)。

ウィジェットを作成すると、そのウィジェットはTwitter内でID管理される様で、 出来上がったウィジェットのコードを直接書き換えて変更できることは 限られているようです。 (カスタマイズをすべて出来なくする設定もあります。)

上のページから作ったコードを下の様に source_includes/custom/asides/twitter_search.htmlへ保存。 (sectionとh1も追加)

source/_includes/custom/asides/twitter_search.html 
1
2
3
4
5

<section>
  <h1>Tweets about rcmdnk </h1>
  <a class="twitter-timeline" data-chrome="transparent" width="280" height="400"  href="https://twitter.com/search?q=rcmdnk"  data-widget-id="373008330047770624">Tweet about rcmdnk</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</section>

data-chromeを追加することで見た目を変えられます。

  • noheader: ヘッダー無し
  • nofooter: フッター及びツイートボックス無し
  • nobarders: 境界線無し
  • noscrollbar: スクロールバー無し
  • transparent: 背景を透過

のオプションがあります。 また、width、heightで大きさを変えることも出来ます。

その他検索ワードなどを変更したい場合はTwitterのウィジェット管理のページから ウィジェットの設定を変更する必要があります。

できたら、 _config.ymlのdefault_asidesへcustom/asides/twitter_search.html を加えればOK。

Zenback

Zenbackは色々な形式のフィードバックを 表示してくれるウィジェットを提供してくれます。

上のページからアカウントを作り、自分のブログ用のコードを作ります。 表示できるのは

  • ソーシャルボタンセット
  • 関連する記事
  • 関連するみんなの記事・キーワード (必須)
  • おしらせ欄 (必須)
  • Twitterでの反応
  • はてなブックマークでの反応
  • Facebook コメント

このページでは必須のものと、Twitter/はてブ/Facebookについて使っています。

設定を行いコードを取得したらコードを source_includes/custom/zenback.htmlとして保存。

source/_includes/custom/zenback.html 
1

<!-- X:S ZenBackWidget --><script type="text/javascript">document.write(unescape("%3Cscript")+" src='http://widget.zenback.jp/?base_uri=http%3A//rcmdnk.github.io/&nsid=112714283011311473%3A%3A112714293211884381&rand="+Math.ceil((new Date()*1)*Math.random())+"' type='text/javascript'"+unescape("%3E%3C/script%3E"));</script><!-- X:E ZenBackWidget -->

さらにsource/_layouts/post.htmlへ

source/_layouts/post.html 
1
2
3
4
5
6
7
8
9

...
</article>
{% if site.zenback_show == true and page.comments == true %}
<section>
  {% include custom/zenback.html %}
</section>
{% endif %}
{% if site.disqus_short_name and page.comments == true %}
...

の様にDisqusの上に設置。 Disqus同様、articleタグの外側にsectionタグの中に入れて 設定すると綺麗に納まります。 pageにも必要な場合、source/_layouts/page.htmlへも</article>の下へ設置します。

さらに有効化するために_config.ymlへ

_config.yml 
1
2

# Zenback
zenback_show: true

を加えておきます。page.commentsについては、デフォルト状態だと rake new_postで記事を作った場合にymlブロックに

comments: true

があるはずです。ページ単位で向こうにしたいときはこれをfalseへ。

これだけで上の設定についてはOKですが、もし関連ページも表示させたいときは その精度を上げるためにいくつかタグを追加します。

article.html.diff 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

diff --git a/article.html b/article.html
index 85fbd92..1d504b1 100644
--- a/article.html
+++ b/article.html
@@ -3,7 +3,13 @@
     {% if index %}
       <h1 class="entry-title"><a href="{{ root_url }}{{ post.url }}">{% if site.titlecase %}{{ post.title | titlecase }}{% else %}{{ post.title }}{% endif %}</a></h1>
     {% else %}
+      {% if site.zenback_show == true and page.comments == true %}
+      <!-- zenback_title_begin -->
+      {% endif %}
       <h1 class="entry-title">{% if site.titlecase %}{{ page.title | titlecase }}{% else %}{{ page.title }}{% endif %}</h1>
+      {% if site.zenback_show == true and page.comments == true %}
+      <!-- zenback_title_end -->
+      {% endif %}
     {% endif %}
     {% unless page.meta == false %}
       <p class="meta">
@@ -24,5 +30,12 @@
     </footer>
   {% endif %}
 {% else %}
+{% if site.zenback_show == true and page.comments == true %}
+<!-- zenback_body_begin -->
+{% endif %}
 <div class="entry-content">{{ content }}</div>
-{% endif %}
\ No newline at end of file
+<!-- </div><footer> * pseudo line for the function raw_content() -->
+{% if site.zenback_show == true and page.comments == true %}
+<!-- zenback_body_end -->
+{% endif %}
+{% endif %}

この様に、記事のタイトル前後にzenback_title_begin/endタグ、 記事部分にzenback_body_begin/endタグを入れるとより正確に関連記事と そのタイトルを表示してくれる様になります 2。

pageの方では、直接source/_layouts/page.htmlのpage.titleの行の前後と、 content行の前後に上のarticle.htmlにあるように zenbackタグ達を入れておきます。

LinkWithin

LinkWitinはブログ内の関連ページを 画像つきでリストするウィジェットを提供してくれます。 Zenbackにも同じ機能があるのですが、 Zenbackの場合は反映されるまでに暫く時間がかかるのと、 ページの画像が上手く取れなかったので 3、LinkWithinを試してみました。 今のところ、画像もきちんととてくれるし、即座に反映されています。

上のページから自分のページについてのウィジェットを作成 (PlatformはOtherで)。 得られたコードをsource/_include/custom/after_footer.htmlに追加。

source/_include/custom/after_footer.html 
1
2
3
4
5
6
7
8

{% if site.linkwithin_show == true %}
<script>
var linkwithin_site_id = 1795279;
</script>
<script src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts Plugin for WordPress, Blogger..." style="border: 0" /></a>
<script>linkwithin_text='You might also like...'</script>
{% endif %}

最後のlinkwithin_textはLinkWithinのタイトルを変更するための値です。

Zenback同様linkwithin_showで_config.ymlから表示/非表示を変更出来るようにします。

表示するために、_config.yml

_config.yml 
1
2

# LinkWithin
linkwithin_show: true

を追加

この状態でもページの適当な部分に表示してくれるみたいですが、

<div class="linkwithin_div"></div>

を置くと、この位置に表示場所を指定することが出来ます。

これをsource/_include/custom/linkwitin.htmlというファイルを作って記入。

source/_include/custom/linkwitin.html 
1

<div class="linkwithin_div"></div>

さらにsource/_layout/post.htmlへ

source/_layouts/post.html 
1
2
3
4
5
6
7
8
9
10
11
12
13
14

...
</article>
{% if site.linkwithin_show == true %}
<section>
  {% include linkwithin.html %}
</section>
{% endif %}
{% if site.zenback_show == true and page.comments == true %}
<section>
  {% include custom/zenback.html %}
</section>
{% endif %}
{% if site.disqus_short_name and page.comments == true %}
...

の様にZenbackの上に設置。

また、初期状態のままだと5つとか表示していると、 ブラウザの表示幅が狭くなった時、サイドバーに被ってしまいます。 これを回避するために、次の様なsass/custom/_linkwithin.scssを追加。

sass/custom/_linkwithin.scss 
1
2
3

.linkwithin_inner {
    width: 100% !important;
}

sass/custom/_styles.scssでインクルード

@import "_linkwithin.scss";

で狭い時は2段組になってくれます。

Sponsored Links

  1. 埋め込みタイムライン ↩

  2. </div><footer>の部分は、この直後に_post.htmlの中で<footer>があるのですが、 このつながりをみてOctopressが記事部分を抜き出すフィルターをかけてる 部分があるので、間にzenback_body_endが入るとこのフィルターが上手く行かず、 結果的にdescription等に影響が出ます。 ので、無理矢理コメントでこのつながりを追加してあります。 (post_filters.rb->raw_content()) ↩

  3. Zenbackのページを見ると、og:imageを指定するとZenbackもそれを参照する、 ということが書いてありますが、以前からog:imageを追加(OctopressのIndexページの変更) して居るにも関わらず余り上手く行きませんでした(何故かアイコンロゴになることが多い)。 ↩

Sponsored Links

« Windowsでのショートカットの起動オプション for MagicFormation オンラインストレージCopy.comを導入 »

}