--
    --.--

    スポンサーサイト

    上記の広告は1ヶ月以上更新のないブログに表示されています。
    新しい記事を書く事で広告が消せます。

    このエントリーをはてなブックマークに追加
    2014
    01.08

    FC2ブログではてなブックマークを導入してみた

    2014年の事始め(^-^)
    FC2ブログにはてなブックマーク(通称:はてブ)を導入してみました。

    ↑こんなの。

    はてなブックマークって何?


    単純にタグ付きのブックマークとして使えたり
    みんなでブックマークを共有して他の人のブックマークを参照したり
    データを集約して関連情報を取れたりできるものらしいです。
    参考:はてなブックマークとは

    メリット・デメリットの判断はお任せします(おぃ
    私も導入したばかりで、これから使っていくところなので(^-^;)
    以下が参考になると思います。
    参考1:はてなブックマーク のメリットデメリット
    参考2:はじめてのはてなブックマーク(はてブ)特徴とメリット[PC]: 子供二人と猫一匹
    活用法の一例:はてなブックマークの「インタレスト」は情報を集めたいならぜひ使うべき - 高橋暁子のソーシャルメディア教室

    一応ユーザー登録が必要ですが、必要なのはメールアドレスと認証用の誕生日だけ。
    この手のソーシャルネットワーク系のものには抵抗があるんですが
    これなら個人情報流出の心配も少なそうです。

    それに、自分のブログに実装すればブックマークされた数が分かるので、
    記事の善し悪しの目安になるかも。
    害はなさそうだし、当ブログでも実装してみることに。

    単にブックマークとして使うだけなら


    見ているサイトをはてブに簡単に登録するための拡張機能が用意されています。

    Safariの場合、こちらをご覧下さい。
    hatenabookmark.safariextzというファイルがダウンロードされます。
    そのファイルをダブルクリックすると以下のような表示が出てきます。

    Picture pop-up on Click!

    インストールボタンを押せばSafariにインストールされ、
    こんな感じ(B!)というツールが表示されます(下の図)。

    Picture pop-up on Click!

    このボタンを押してブックマークを登録していくわけです。

    注意:この拡張機能、当方では正常動作していません!
    (環境:Mac OSX 10.6.8 + Safari 5.1.10、ダウンロードした拡張機能1.2.4)
    インストールはできたものの、ログインしてもボタンを押しても
    「コメントをロードしています...」のまま進まない。。 Safariを再起動しても改善せず。

    この記事では、拡張機能1.2.4ではSafari 6.1/7.0での不具合を修正と書いてあるだけ。
    最初のリリースではSafari 5.0.1で確認とありましたが、今のバージョンの動作環境が不明です(汗)
    使えなかったらアンインストールして下記のブックマークレットを使いましょう。



    Chromeの場合、拡張機能のインストールはブラウザ上でシームレスにできます。
    シークレットウィンドウでも使えるようにするには、以下の様に設定してみて下さい。

    メニューのChrome>環境設定より「拡張機能」を選択して
    「はてなブックマーク GoogleChrome 拡張」の
    シークレットモードでの実行を許可する」にチェックを入れる(下図)。

    Picture pop-up on Click!

    またはブックマークレットを利用する方法もあります。
    参考:はてなブックマーク - はてなブックマークをはじめる (セットアップ)

    ブログにはてブのボタンを設置


    はてブのボタンをブログに設置しておけば、上記のような設定をしていないブラウザでも
    ボタンクリックだけではてブに登録してもらえて便利です。
    (1) 基本的なhtmlコードの作成方法

    はてブの以下のページでhtmlコードを作成できます。
    はてなブックマークボタンの作成・設置について - はてなブックマーク

    Picture pop-up on Click!

    言われるままに当ブログのコードを作ってみたらこんな感じになりました。

    <a href="http://b.hatena.ne.jp/entry/http://w6o6n.blog.fc2.com/" class="hatena-bookmark-button" data-hatena-bookmark-title="ちまちまとMacをいじるブログ" data-hatena-bookmark-layout="standard-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加">
    <img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" 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>

    でも、これをテンプレートhtmlに貼付けてもトップページ用のはてブボタンしかできません
    (2) FC2ブログの各エントリに個別のはてブを設定

    個人的には各エントリ毎に個別のはてブを設定したかったので、
    さっきのコードの一部に以下のような変更を加えて使っています。

    http://w6o6n.blog.fc2.com/ → <%topentry_link>
    ちまちまとMacをいじるブログ → <%topentry_title>:<%blog_name>

    こちらがとても参考になりました!というかそのまんまです(汗)
    参考:はてブ、Twitter、Facebook、Google+の各ボタンを横一列に並べる : Web Memo.SE

    この書き方ならエントリーのタイトルだけでなく、ブログ名も一緒に入るので助かりました♪
    他にもソーシャルボタンを綺麗に並べるためのCSSの設定なども解説されていて一見の価値ありです!

    で、最終的にできたhtmlコードがこれ。

    <!-- はてなブックマーク -->
    <a href="http://b.hatena.ne.jp/entry/<%topentry_link>" class="hatena-bookmark-button" data-hatena-bookmark-title="<%topentry_title>:<%blog_name>" data-hatena-bookmark-layout="standard-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加">
    <img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" 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>
    <!-- はてなブックマーク END -->

    このコードをFC2ブログの「テンプレートの設定」にあるHTML編集画面でペースト。
    ペーストする場所は<!--topentry-->から<!--/topentry-->の範囲で。
    でないとリンクやタイトルがきちんと反映されません。
    (3) おまけ:ボタンのスタイルを変えてみる

    はてブのボタンのスタイルは
    data-hatena-bookmark-layout=“standard-balloon
    の部分に記述されています。

    ●2014.1.8現在、(1)の方法で選べるスタイルは以下の3通りです。

    simple-balloon (吹き出しの無いバージョン=simple)


    standard-balloon (吹き出しの無いバージョン=standard-noballoon)


    vertical-balloon


    ●この部分を書き換えることで、過去に使われていたスタイルで表示させることもできます。
    参考:ソーシャルボタン設置のソースコードサンプルあれこれ。 | バシャログ。

    standard


    vertical



    standard-balloonの「ブックマーク」の文字を英語にするには
    data-hatena-bookmark-lang="ja"
    data-hatena-bookmark-lang="en"に変更



    テンプレートhtmlへの仕込みが終わったら作業終了!
    以後は何もしなくていいです(^-^)

    はてブを通じて意外な連鎖反応が起きたらいいんですけどねー
    まずはブックマークしてもらえるような記事を書かないと(^-^;)
    関連記事

    このエントリーをはてなブックマークに追加
    トラックバックURL
    http://w6o6n.blog.fc2.com/tb.php/100-d4361d73
    トラックバック
    コメント
    管理者にだけ表示を許可する
     
    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。