Ellinikonblue.net Devlosxom

Facebook の「いいね！」ボタンも足してみた

Dec 09, 2011 at 17:35 in フレーバー | トラックバック (0) | コメント (0)

　ちょっと前から、流行に乗ってあっちやこっちでもソーシャルサービス系のボタンを設置しているのですが、やり始めたときは Facebook は対策考えないと対応できないように思っていたのですが、別の目的でソースをいじり始めて煮詰まったときに、気分転換に Facebook を見たら、思いの外簡単に設置できるように変わった（？）みたいなので、試した見たらできてしまった (^^;>

　まず head フレーバーに以下のおまじない。

<div id="fb-root"></div>
<script>(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";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

　<body> タグの直後が理想と書いてあったので、素直にそこに設置。レイアウト的には特に問題はありませんでした。

　で、すでに設置してあるのを含めて、先般、さらした story フレーバーの一部を以下のように変更。他のボタンの順番も入れ替えたので、全部さらしときますが、 Facebook のは一番下の三行。

<!-- はてなブックマークボタン -->
<a href="http://b.hatena.ne.jp/entry/$url$path/$fn.$default_flavour"
  class="hatena-bookmark-button"
  data-hatena-bookmark-title="$blog_title - $title"
  data-hatena-bookmark-layout="vertical"
  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>
<!-- Tweet Button(Tweeter Official) -->
<a href="http://twitter.com/share" class="twitter-share-button"
  data-url="$url$path/$fn.$default_flavour"
  data-counturl="$url$path/$fn.$default_flavour"
  data-text="$blog_title - $title"
  data-count="vertical" data-lang="en">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<!-- Google +1 -->
<g:plusone href="$url$path/$fn.$default_flavour" size="tall"></g:plusone>
<!-- Facebook Like Button -->
<div class="fb-like" data-href="$url$path/$fn.$default_flavour"
  data-send="false" data-layout="box_count"
  data-show-faces="true"></div>

　Facebook からコードをもらうと data-width と言う引数があるのですが、これはなくてもいいみたい。取得したコードは 450 とか言う値が与えられてて思いっきりレイアウトを崩してくれたので抹殺したけど、特に問題なく表示されています。

　これで一通りそろったかな＞ソーシャルサービス系リンク対応
　え！？ mixi ？…そんなサービスあったなぁ（＜面倒なので遠い目しておく… (^^;> ）

2011 年 11 月時点の story フレーバーをさらしておく

Nov 15, 2011 at 23:01 in フレーバー | トラックバック (0) | コメント (0)

　zenback 対応やソーシャルサービス系リンク対応などどうもうまくいっているようなので、一次成果物としてstory フレーバーをさらしておきます。

　何かのご参考に。ご参考にされる方がいればの話ですが… f^^;

<div class="article">
  <h2 class="title"><!-- zenback_title_begin -->$title<!-- zenback_title_end --></h2>
  <p class="meta">$mo $da, $yr at
    <a href="$url$path/$fn.$default_flavour" 
      title="このエントリー「 $title 」への恒久的な URL">$ti</a> in
    <a href="$url$path" 
      title="カテゴリー「 $categories::name 」のエントリーを表示">$categories::name</a> |
    <a href="$url$path/$fn.$default_flavour#trackbacks"
      title="このエントリー「 $title 」へのトラックバック">トラックバック</a>
    ($writeback::tb_count) |
    <a href="$url$path/$fn.$default_flavour#comments"
      title="このエントリー「 $title 」へのコメント">コメント</a>
    ($writeback::cm_count)
  </p>

  <div class="paragraph"><!-- zenback_body_begin -->
    $body
  <!-- zenback_body_end --></div>
  <!-- zenback_date $yr-$mo_num-$da -->

  <?$path_info like="(^[^\.]+/?$)|(^$)|(index\.\w+$)">
  <div class="snsbutton">
    <g:plusone href="$url$path/$fn.$default_flavour" size="tall"></g:plusone>
    <!-- Tweet Button(Tweeter Official) -->
    <a href="http://twitter.com/share" class="twitter-share-button"
      data-url="$url$path/$fn.$default_flavour"
      data-counturl="$url$path/$fn.$default_flavour"
      data-text="$blog_title - $title"
      data-count="vertical" data-lang="en">Tweet</a>
    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    <!-- はてなブックマークボタン -->
    <a href="http://b.hatena.ne.jp/entry/$url$path/$fn.$default_flavour"
      class="hatena-bookmark-button"
      data-hatena-bookmark-title="$blog_title - $title"
      data-hatena-bookmark-layout="vertical"
      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>
  </div>
  </?>
</div> <!-- End of .article -->

$push_if_first::data

まだまだやります

Aug 12, 2011 at 22:29 in フレーバー | トラックバック (0) | コメント (0)

　悲願だったあっちのフレーバーの入れ替えも終わり、あちらはこれから VPS サービスへの引っ越しに移りますが、なんせ違うブログで同じフレーバー使っていると紛らわしいことこの上ないことがよくわかったので、こっちはこっちで新たなフレーバーを作って入れ替えたいと思います。

　デザインのアイデアはあるので（それがよいものかはひとまずおいといて）まだまだやっていきます！ということで、まぁ見た目、あっちに採用したフレーバーもまだまだこれからだと思っていて、別にフレーバーを量産する気はないですが、ちょっとでもましなものができるのなら、アイデアがあるうちはやっておこうかと。
　時間ができれば、 Photolog の方も何とかしたいですしね…

Google +1 ボタンも追加してみる

Jun 05, 2011 at 21:11 in フレーバー | トラックバック (0) | コメント (0)

「 Googleの「 +1 」ボタン、一般サイトでも設置可能に」（ INTERNET Watch より）

　Twitter やはてブのボタンをつけて悪戦苦闘としていたところで、 2 つやるのも 3 つやるのも一緒ということで、ついでに +1 ボタンもつけてみました。

　head フレーバーで以下のように JavaScript を読み込みます

  <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
    {lang: 'ja'}
  </script>

　で、story フレーバーには以下のように追加します。

  <g:plusone href="$url$path/$fn.$default_flavour" size="tall"></g:plusone>

　う～ん、なかなか Goog Job (^^)b

　ということで、これをあっちに反映させるためにも、少々気合いを入れてフレーバーともう少し格闘してみます。

「 +1 ボタンをサイトに追加 - +1 button API - Google Code 」

Tweet ボタンをエントリ個別に表示する

May 29, 2011 at 22:51 in フレーバー | トラックバック (0) | コメント (0)

　Twitter とはてブのリンクボタンをつけようとして先般、失敗しましたあと、その後、すぐに成功していたのですが、メモるの忘れてました。
# ただいま Sass に夢中 )^^(

　Twitter のページでボタンを作ると以下のようなコードが得られます。

<a href="http://twitter.com/share" 
  class="twitter-share-button" data-count="horizontal">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

　実はこれ、引数がたりなくって、 blosxom の場合、フレーバーには以下のように書けばいいみたい。

<a href="http://twitter.com/share" class="twitter-share-button"
  data-url="$url$path/$fn.$default_flavour" data-counturl="$url$path/$fn.$default_flavour"
  data-text="$blog_title - $title"
  data-count="horizontal" data-lang="en">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

　ココログには最近このボタンが表示されるのを思い出して、自分のとこを参考にしました。

　ただこの　Twitter もはてブのボタン、うまくマークアップできなくってそれも含めて今、Sass で格闘中。 CSS3 もちょっと勉強中。。。

Sassy CSS 環境設定できた！

Apr 28, 2011 at 18:13 in フレーバー » CSS | トラックバック (0) | コメント (0)

オープンソースソフトウェアとかウェブ技術とか「 Ubuntu 10.10 で Sass/Compass を使う（環境設定編）」

　Sassy CSS(SCSS) を使ってみたく ruby も知らない haml も知らない輩が、先般、チャレンジしたわけですが見事に玉砕。
　何が悪いんだろうと、sass のチュートリアル（むろん日本語訳）を熟読してみると SCSS のサポートは Sass 3.0 からサポートされた機能だと言うことに気がつきました。

sass -v

などしてみると表示されているのは 2.x 。
これか！と一瞬、どや顔になってアップデートを試みるも、何度アップデートかけても最新版がインストールされているような表示がされます。
　で、しつこく調べた結果、当たったのが上記のドキュメント。
　OS (Ubuntu) のせいやったんかい！ orz

　Ubuntu 10.04LTS で ruby や haml を（ apt-get で）インストールしたどこかの時点で /usr/bin 以下に haml/sass のバイナリがあり、 gem でインストールされる haml /sass は /var/lib/gems/1.8/bin 以下にあったというオチ orz
　実際、最新 sass でてきとーにつくった SCSS ファイルをコンパイルしてみると…できるじゃな～い (^^)b

　ということで、ちょうど最近、Ellinikonblue.com 側のトップページを書き直そうとしていて、その CSS を SCSS から書いているのですが、これがすごい。
　何がすごいって見渡せば、すぐに何が書いてあるかわかる。伝わらないかも知れないですが、個人的には文明開化級のインパクトです… が、その話は成果諸共また後日。今回はトラブル解決まで。

Sassy CSS(SCSS)

Mar 21, 2011 at 23:19 in フレーバー » CSS | トラックバック (0) | コメント (0)

hail2u.net 「 Sass、そしてSassy CSS (SCSS) 」

　最近時間ができても、何か生産するという意欲が湧いてこず不抜けているので、忘れないうちにメモっておく。

　CSS(Cascading Style Sheet) の文法を拡張するメタ言語 Sass … 砕いて言うと Sass で書いてコンパイルすると CSS になってくれるのだが、これの何が凄いというと、 CSS は単にスタイル定義の箇条書きにしかならないところが、 Sass で記述すると、プログラム言語チックな意味をもたせた記述ができると言うこと。

　ちょっと個人的には文明開化級の代物に出会った気でいるのだが、 Linux で Ruby をインストールして haml gem をインストールしても動かねぇやん orz

　Ruby は全然知らねぇので、あとでじっくり再チャレンジする。

ソーシャルサービス系リンク機能に対応してみた結果

Jan 24, 2011 at 22:37 in フレーバー | トラックバック (0) | コメント (0)

　zenback を導入してからの傾向を Analytics でみてみると、こっちは気のせいくらいのトラフィックしかないけど、むこうは統計的に見られるくらいの結構なトラフィックはあるので、平均サイト滞在時間が伸びてきていることが確認できたので非常に気をよくしました。
　おまけに記事をつぶやいてもらったり、「いいね！」押してもらえると、中の人が結構うれしがっていることも客観的にわかり f^^; 、もうちょっとソーシャル系サービスとの連携を計ってみることにしました。

　ひとまず各エントリ個別のページは zenback があるのでこれで由として、トップページを見たときに各エントリごとのボタンがないので、ここを対応してみることにしました。

　しかし、 Twitter とはてブはどうってことなかったんですけど、 Facebook がこまった。
　なぜかというとボタンにくくりつける URL を API に渡すときに URI エンコーディングしなければならず、 blosxom のフレーバーいじってちょいちょいなんて簡単にはいかなさそう。。。
　JavaScript でごりごりって方法も考えたけど、あまりにも美しくないコードしか浮かんでこなかったので躊躇。
　blosxom 用にプラグインを作っている人もいらっしゃったのだが、これはちょっと個人的な利用目的と違うもので、かといって自前でプラグインをつくたる！ってほどのモチベーションは、今回はない (^O^;
　blosxom 本体に手を入れるのが一番手っとり早い気がするのだが、それは御法度。
　Facebook 対策はもうちょっと時間をかけて考えることにしました。
　ま、そもそも自分で Facebook 登録してないから対応しても確認のしようもないし… (^O^;A

　ということで、今回は Twitter とはてブ対応を以下のような感じでフレーバーの story.html に追加。お気軽簡単 (^^)b

<div class="article">
  <h2>$title</h2>
  <p class="meta category">[
    <a href="$url$path" 
      title="カテゴリー「 $categories::name 」のエントリーを表示">$categories::name</a>
    ]</p>
  <div class="paragraph">
    $body
  </div>
  <p class="meta date">$mo $da, $yr at
    <a href="$url$path/$fn.$default_flavour" 
      title="このエントリー「 $title 」への恒久的な URL">$ti</a> |
    <a href="$url$path/$fn.$default_flavour#comments"
      title="このエントリー「 $title 」へのコメント">コメント</a>
    ($writeback::cm_count) |
    <a href="$url$path/$fn.$default_flavour#trackbacks"
      title="このエントリー「 $title 」へのトラックバック">トラックバック</a>
    ($writeback::tb_count)

    <?$path_info like="(^[^\.]+/?$)|(^$)|(index\.\w+$)">
    <br />
    <!-- Tweet Button(Tweeter Official) -->
    <a href="http://twitter.com/share" class="twitter-share-button"
      data-url="$url$path/$fn.$default_flavour" data-text="$blog_title - $title"
      data-count="horizontal" data-lang="en">Tweet</a>
    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    <!-- はてなブックマークボタン -->
    <a href="http://b.hatena.ne.jp/entry/$url$path/$fn.$default_flavour" class="hatena-bookmark-button"
      data-hatena-bookmark-title="$blog_title - $title" data-hatena-bookmark-layout="standard"
      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>
    </?>
  </p>
  $push_if_first::data
</div> <!-- End of .article -->

　これでブログのトップを見ても各個エントリごとのつぶやきとブックマーク数は視認できる。良 (^^)b

…と思ったのですが、１ページに複数ボタンを配置するととんでもなく重くなったのでちょっと導入は見送り。ひょっとしたらこうやって使うものではないかもしれない。
　Facebook と併せてもうちょっと試行錯誤…

JeffreyFrancesco.org 「 Blosxom Plug-in : facebook （いいね！ボタンを簡単に導入するためのプラグイン）」

Styleneat で美しい CSS を書く

Aug 01, 2010 at 18:12 in フレーバー » CSS | トラックバック (0) | コメント (0)

百式「スタイルシートをすっきりと見やすくしてくれる『 styleneat 』」

　なかなかすっきり美しく書けない CSS 。
　そんな CSS をきれいに書き換えてくれるのがこの Styleneat 。
　ちょっと前に百式さんちで知りまして、 Faves に埋もれてました orz

　フレーバーいじりをしていたときに思い出して探し回った次第 (_ _;> 　今度は忘れずにメモっておく。。。

Styleneat - CSS Organizer

フレーバーを考え直しました

Jun 20, 2010 at 21:09 in フレーバー | トラックバック (0) | コメント (0)

　OOCSS(Object Oriented CSS) と言う思想に感化されて、ちょっとフレーバーを見直しました。
　まだとりあえず作ったと言う段階なんですが、以前はこういう構造でした。

　これを今回は、以下のようにしました。

　それなりに意識はしたのですが、どうもまだきれいとは言い難く、まだまだこれからな感じです。
　こうご期待と言うことで、ちょっと時間をかけて熟成していきたいと思っています。
　ついでと言ってはなんですが、見栄えについてもプログレッシブエンハンスメント (Progressive Enhancement) に振ってみました。
　Firefox や Safari だとシンプルでもそれなりに見えるはずですが、 Internet Explorer だとシンプルを通り越して残念な感じに見えます。
# いや元々残念というのは言いこなしで (^^;

　まぁなんにしてもこれからと言うことで。

Ellinikonblue.net Devlosxom

Facebook の「いいね！」ボタンも足してみた

2011 年 11 月時点の story フレーバーをさらしておく

まだまだやります

Google +1 ボタンも追加してみる

Tweet ボタンをエントリ個別に表示する

Sassy CSS 環境設定できた！

Sassy CSS(SCSS)

ソーシャルサービス系リンク機能に対応してみた結果

Styleneat で美しい CSS を書く

フレーバーを考え直しました

Local Search

Archives

Categories

Syndicate

Specification

Powered by