2014年1月22日にA8.netのファンブログはSeesaa Blogのシステムをベースにして生まれ変わりました。よってファンブログ関連の記事は今では当てはまらない可能性があります。新しいファンブログのカスタマイズは別ブログ「ファンブログ テック」で詳しく書いていますので、そちらをご覧ください。
「忍者おまとめボタンをファンブログで」の続きです。
「忍者おまとめボタン」はSNSボタンを表示する中では、なかなか速いと思います。
ただ、トップページやアーカイブページに10個も記事があるとさすがに少しもたつく気がします。
原因はdocument.writeです。
SNSボタンの表示箇所があるたびにdocument.writeの描画が行なわれ、そのたびにHTMLのレンダリングが止まります。1記事ページにだけ使うのならば全く気にならない程度なのですが。
画面の描画がすべて終わるのを待ってからSNSボタンの書き込みを行なったらいいのではないか？ということで、addEventListenerとattachEventを使ってソースを書きかえてみました。
ただし、表示箇所が10箇所に分かれるので、DOMでページ内を走査することになります。結果的に途中で待つか、後で待つかの違いだけかもしれません。
今回やりたかったのは、もうひとつの理由があってトップページですべての記事にSNSボタンをつけるとウザい。というのがありました。長い記事ならいいのですが、短い記事の度にボタンが付くのはいかがなものか？
短い中には、「続きを読む」の前までで切れている記事があります。そこで「続きを読む」がある場合はSNSボタンを表示しないが、全文が表示されている場合には表示するというルールを作りました。
そして、今まで「ポチッとボタン自動挿入モジュール」で書き込んでいたランキング投票ボタンも一緒に表示することにしました。
さらに、ボタンの中にはブックマークされた数を表示するものがありますが、複雑になるほど遅くなるという都合上、すべてのボタンは数字を表示しないものにしました。いずれにしてもゼロの連続ではみっともないですし。