2013年7月30日火曜日

ソーシャルボタンをjavascriptで動的に配置する際の注意点

フェイスブックのいいね!や google+の+1ボタンなど、ソーシャルプラグインを
javascriptで動的に生成してみるというヘンタイなことをやってみた。

ひとつつまづいた点があったので記事にしておく。


【方針】
div要素をdocument.createElementで生成、そのdiv要素にソーシャルボタンを追加する。

div要素に対して ソーシャルボタンを追加する細かい作業は前記事参照。

【つまづいた点】
div要素を作成し、DOMツリーにぶら下げないまま
ソーシャルプラグインを読み込もうとすると、twitterとgoogle+でエラーが起きる。

特にエラーが吐かれるわけでもなく、ただ単純にボタンが表示されない。
2~3時間悩みました。

【結論】
ソーシャルプラグインを読み込む前に、createElementで生成したdiv要素を必ず
appendChildでDOMツリーのどこかにぶら下げる。

そのあと、前記事のソーシャルボタン読み込み関数をcall

動的にソーシャルプラグインをいじりたいということは、
ユーザーの操作にあわせてイイネ!ボタン等を表示したり、非表示にしたり。。。
そのときはこうする。
非表示にする   プラグイン要素.style.display = "none"
  表示にする   プラグイン要素.style.display = "block"

0 件のコメント:

コメントを投稿