faviconにまつわるエトセトラ

2012/03/06

ってことで、faviconです。

まずfaviconに使うのは、基本的にico形式です。gifやpngを指定すると、IE系列で表示できないので気を付けましょう。

ico形式は、複数の解像度、色深度(色数)を併せ持つ形式にできる。一般的なfaviconで使われる形式は下記の4種類。

  • 16 x 16
  • 32 x 32
  • 48 x 48
  • 64 x 64

色深度は、4ビット16色、8ビット256色、32ビットTrue Color+の3種類、それに24bitを加えたぐらい。

faviconの場合は、16 x 16 は必須になる。ブラウザによってはこれがないと正常に表示できない場合がある。

タブやバーに表示される 16 x 16、デスクトップやエクスプローラで表示される 32 x 32があるとよい。また、IE9は64 x 64をサポートしているらしいので、余裕があれば、カバーしているといいだろう。

色深度は、8ビット256色が推奨だが、32ビットTrue Color+でも概ね問題ないようだ。

求める解像度色深度がない場合は、近いものをリサイズしたり減色したりして使用するため、そこまで気にすることはないかもしれない。

マイクロソフトがIE9用に提供している x-icon editor を使用すれば、16 x 16、24 x 24、32 x 32、64 x 64の32ビット色のアイコンが簡単に作成できる。

 


google mapでiframe使用で吹き出しを出さない方法

2011/10/26

&iwloc=B
をembedの最後に追加する


ソーシャル系のボタンについて

2011/06/30

何かいろいろありますが、順番に

  • facebook いいね
  • tweet
  • mixiチェック
  • mixiイイネ!
  • +1
  • はてなブックマーク
  • Yahooブックマーク

facebook いいね

http://developers.facebook.com/docs/reference/plugins/like

で作成可能。ログインしてると、アカウントと関連ずけがされるっぽい。あと、貼られているページのアドレスがURLエンコードされて含まれるので、各ページに貼るような場合はjavascriptやcmsの変数でアドレスを渡してやる必要がある

tweet

http://twitter.com/goodies/tweetbutton

どこでもコード貼るだけでok。らくちん

mixiチェック・mixiイイネ!

開発者登録を行って、認証キーを作成する必要があり、かなり面倒。あと、xmlns:mixiを追加しなければいけない。

あと、ページアドレスを含んでるので、何らかの手段で渡してやる必要がある。

+1

http://www.google.com/webmasters/+1/button/index.html

で作成。アドレスは含まないので、どこでも貼れる。head領域にスクリプトを1つ記述する必要がある。

はてなブックマーク

http://b.hatena.ne.jp/guide/bbutton

で作成。アドレスを含む。

Yahoo!ブックマーク

http://bookmarks.yahoo.co.jp/settings/tools/savelink

で作成。アドレスは含まない。ブックマーク人数表示は別のコードを生成して合わせて貼る必要がある


Google Analyticsのイベントトラッキング

2011/06/30
 onclick="_gaq.push(['_trackEvent','カテゴリ', 'アクション', 'ラベル', 'イベント値']);"

をaタグに追加する。

掲載するページが1つであれば、

onclick="_gaq.push(['_trackEvent', '識別用文字列', this.href]);"

とすれば、大体ok

掲載するページが複数にまたがる場合は、

onclick="_gaq.push(['_trackEvent', '識別用文字列', this.href, location.href]);"

として、ラベルに現在のアドレスを指定してみるといいんじゃないかと思う。


mixiチェックとイイネ!ボタン

2011/06/17

どちらを使うにしても、とりあえず、mixi チェックキーが必要になるため、mixi Developer Centerでデベロッパー登録が必要です。

登録したら、タグ取得で

<iframe scrolling=”no” frameborder=”0″ allowTransparency=”true” style=”overflow:hidden; border:0; width:450px; height:80px” src=”http://plugins.mixi.jp/favorite.pl?href=http%3A%2F%2F~~~~&service_key=xxxxxxxxxxxxxxxxx&show_faces=true&width=450″></iframe&gt;

みたいなタグがもらえます。

これを貼ればイイネ!ボタンはOKです。

mixiチェックについては、技術仕様に説明がありますが、サンプルにはdata-keyが入っていないけど、必須なので忘れず追加しましょう。

<a href="http://mixi.jp/share.pl">mixiチェック</a>
    <script type="text/javascript" src="http://static.mixi.jp/js/share.js" data-key="xxxxxxxxxxxxxxxxx"></script>

mixiチェック

両方とも、mixi Developer Centerの方の許可するドメインの影響を受けるので忘れず追加しておきましょう。サブドメインも1つずつ登録しないと通りません。
また、表示しているurlが、パラメータ付きの場合、ブラウザにもよるかもしれませんが、データがないとエラーになるっぽいです。
data-url=”http://www.daisenking.net/tozan/&#8221; で指定すると吉。google analyticsでドメインが違う時なんかは便利です。
ボタンの画像が、pngなので、ie6だと透過しません。data-button=”button-1.gif” とすれば、gifで表示されるので、透過します。


twitterのtweetボタンのウィジェット

2011/06/15

twitterのtweetボタンの公式ウィジェットでは、

<a href=”http://twitter.com/share&#8221; data-count=”horizontal”>Tweet</a><script type=”text/javascript” src=”http://platform.twitter.com/widgets.js”></script&gt;

のようなタグを生成するけど、ある時からIEやfirefoxでスクリプトエラーが出るようになった。

コードを貼るところが、utf-8でない場合は、

<a href=”http://twitter.com/share&#8221; data-count=”horizontal”>Tweet</a><script type=”text/javascript” src=”http://platform.twitter.com/widgets.js&#8221; charset=”utf-8″></script>

とcharsetを入れてやらないといけなくなったらしい。