wanichanの日記

ちょっとした技術メモ。Microsoft中心。Webサイト管理等にまつわるネタ、サイトの更新情報等を発信中。最終版はwanichan.comに掲載していきます。

ソーシャルボタンの設置とサイトのメンテ

うんと、あれからソーシャルボタンのスタイルをボックスカウントスタイルに変更し、リストの横並び配置にして、記事下のFacebookコメントボックスプラグインの上に移動作業を行っています。

っていうか、そのソーシャルボタンは、Expression Webでページ挿入機能を使用してページ上に貼り付けているので、そのページ挿入部分を検索することができないのです。これは困ったことです。

ページ挿入は、できればダイナミックWebテンプレートの編集可能な領域外に配置すべきかと思うんです。

ちなみに、ページ挿入については以下の記事を見てくださいです。


Expression Web Tips:ページ挿入を利用するには

そんなわけで、かれこれ5300ページを超える記事を一つ一つ開いてチマチマと移動作業…。

ちなみに、現在使っているソーシャルボタングループは以下の手順で実装しています。

CSSはこんなかんじ。!important を付けているのは、うちのサイトのCSSでページコンテンツ内のリストのマージンとパディングを記述してるからです。普通は!importantは要らないと思います。HTML 5サイトで、すでに全部リセットするためのCSSを導入している場合もマージンとパディング、リストスタイルタイプの記述も不要かと思われます。ネット上の関連記事にはその記述がないってことは、そのCSSが導入されていることが前提ではないかと推測します。

で、リスト全体の高さも指定しないとうまくいかないです。

/* Social bottons */
.social-buttons{margin:0 !important;list-style-type:none; padding:0 !important;height:60px}
.social-buttons li{
float:left;margin-right:0.5em;vertical-align:bottom;
}

んでもって、現在のURLを取得するために、Javascriptで括ってます。要らないかもしれないですけど。外部JSファイル内に追加。

function facebook_like(){
var url = location.href;
document.write('<div class="fb-like" data-href="' + url + '" data-send="false" data-layout="box_count" data-show-faces="false"></div>');
}

function google_plus(){
var url = location.href;
document.write('<div class="g-plusone" data-size="tall" data-href="' + url + '"></div>');
}

ページ挿入するためのbookmark.htmlの<body>内には以下のように記述しています。

<ul class="social-buttons">
<li>
<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="vertical-balloon" data-hatena-bookmark-lang="ja" title="この記事をはてなブックマークに追加">
<img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="この記事をはてなブックマークに追加" width="40" height="40" style="border: none;"></a></li>
<li>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="wanichan" data-lang="ja">Tweett</a></li>
<li style="width:70px"><script>facebook_like();</script></li>
<li><script>google_plus();</script></li>
</ul>

 なぜか、Facebookの「いいね!」ボタンだけ、リストの横並びにすると消えちゃうので、幅を指定してます。