blog@nero-8

ソーシャルブックマークリンクを設置してみました。

こちらのサイトを参考にさせて頂き、リンクを設置しました。
・ Movable Typeでソーシャルブックマーク
ちょっと修正して新規ウィンドウが開くように、また、FC2ブックマークを追加しました。

また、上記で設置したダイレクトリンク以外への対応は、
AddThis というサイトのサービスを使いました。
海外のサービスですが、日本語表示してますね。お手軽設置できました。

追記：20090929

こちらを参考に、AddThis をカスタマイズしてみました。
変更点は以下のとおりです。

・ アイコンを 16px x 16px の小さなものに変更
・ マウスオーバーでのポップアップを、クリックに変更
・ ポップアップ表示時の表示項目を指定
・ ポップアップ時の右肩にネーム表示

古い MovableType なので Plugin は使えず、
addthis:url と addthis:title は TypePad の設定を流用です。

<!-- AddThis Button BEGIN -->
<a
    class="addthis_button"
    href="http://www.addthis.com/bookmark.php?v=250&amp;pub=hoge"
    addthis:url="<$MTEntryPermalink encode_url="1"$>"
    addthis:title="<$MTEntryTitle encode_html="1"$>"
    title="More BookMarks"
    target="_blank"
>
<img src="http://s7.addthis.com/static/btn/sm-plus.gif" width="16px" height="16px" style="border: 0;" alt="More BookMarks" />
</a>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js?pub=hoge"></script>
<script type="text/javascript">
var addthis_config = {
    ui_language: "ja",        // 日本語表示
    ui_cobrand: "hogehoge",   // ポップアップ右肩にネーム表示
    ui_click: true,           // 表示を onmouse → onclick に変更
    services_compact: ' google, live, delicious, technorati, twitter, tumblr, facebook, myspace, email, gmail, favorites, more ',
    services_exclude: ' print '
                              // ポップアップ内の表示項目指定及び非表示指定
}
</script>
<!-- AddThis Button END -->

ブログ記事内の画像や動画サービスの映像などを、ブラウザウィンドウ内にオーバーレイ表示させる jQuery.lightpop.js を導入してみました。

当初、LiteBox で画像のみ実現しようとしてたのですが、動画も出来ないかな？と検索かけたら lightpop に行き着き。。
サンプルページで試してみていたところ、LiteBox からも簡単に移行できてしまう様子で、もう入れるしかないでしょ！！…と、Script 関連の経験値はとっても低いのですが、テストページを作って遊んで、一気に導入してしまいました。

こんな画像の表示とか…

YouTubeの動画もオーバーレイでしかもお好みサイズで。 → 大きなサイズ(853x480：YouTubeHDサイズ)で見る
→ もっと大きなサイズ(1024x576)で見る ※ディスプレイ解像度注意です。
→ YouTubeHD原寸(1280x720)で見る ※ディスプレイ解像度注意です。
※HD表示にならないときは切り替えてください。

このような感じでキレイに表示されるようになりました。
記事カラムの幅に縛られず、見栄えもとっても良くなりました。これは嬉しいです。
作者さま、感謝・感謝・感謝であります。

以下、初心者目線の導入手順です。

• jquery-x.x.x.min.js → jquery.min.js
• jquery.lightpop-x.x.x.min.js → jquery.lightpop.min.js
• ftpでファイルを転送 jquery.min.js と jquery.lightpop.min.js、そして images フォルダごと /js ディレクトリへ。

<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.lightpop.min.js"></script>

<script type="text/javascript">
//<![CDATA[
// jQuery Lightpop
$(function(){
$('a[rel*=lightbox]').lightpop({overlayBgColor:'#333',overlayOpacity:0.9,contentBorder:'1px solid silver'});
$('a[href^=http://www.youtube.com/watch]').lightpop({overlayBgColor:'#333',overlayOpacity:0.9,contentBorder:'1px solid silver'});
});
//]]>
</script>
</body>

• lightpop作動時の背景色：#333 で、透過10% (overlayOpacity:0.9) としてみました。
• <a>タグ内に「rer=lightbox」がある場合に lightpop 適用(画像用)
• <a>タグ内に「http://www.youtube.com/watch」がある場合に lightpop 適用(YoutTube用)
• 画像とYouTubeしか入れてありませんが、他にも様々な機能があるようですので、詳しくは lightpop のページやサンプルのページを参照ください。

<a href="http://www.youtube.com/watch?v=xxxxxxxxxxx&hl=ja&autoplay=1&width=xxx&height=xxx" title="hogehoge"> imgタグや文字など </a>

• http:// ～ v=xxxxxxxxxxx ： YouTube の URI
• hl=ja ： 日本語表示
• autoplay=1 ： lightpop 起動で自動再生
• width=xxx/height=xxx ： 動画表示サイズ。(高さは動画+25px)
• title= ： lightpop画面左下にタイトルが表示されます。
• 画質指定の fmt=xx は試してみましたが、反映されませんでした。

<a href="/hoge/hoge.jpg" rel="lightbox" title="hogehoge"><img src="/hoge/hoge-thumb.jpg" border="0" alt="hogehoge" /></a>

• <a>タグ指定の画像 ： lightpopで表示する画像
• rel="lightbox" ： このタグでlightpop適用
• title= ： lightpop画面左下にタイトルが表示されます。
• <img>タグ指定の画像 ： 元から表示させるサムネイル画像

ローディング中のアニメGIFを改変しましたので、その画像のみ置いておきます。
lightpop-ico-loading.zip

過去記事の対応…どうしましょ。。。（汗