ブログ BLOG Home Blog #javascript ajaxで動的にページを読み込んだ時、SNSボタンが崩れる対策 お久しぶりです。プログラマーのどっぴーです ^O^お盆休みに和歌山に帰省していました。ポケモンGOを試しに起動したところ、ポケストップの少なさにびっくり。そして、休日は家から出ることなくゴロゴロしていた親父がメガシンカしてました。ポケモンを捕獲するために長いときは１日8時間近く外出しているのだとか。スマホのアプリが生活リズムをも変える…ポケモン効果すごいですね。…今回はポケモンGOの話ではなく、以前に起こった「Ajax非同期のページのSNSボタンが崩れてしまう」現象の対策について備忘録がてら書いておきます。どうやってもSNSボタンのレイアウト崩れを解決することができずアレコレ試していたのですが、Google先生に頼ったところ即解決しました。なんでもSNSボタンを再構築するための専用のAPIが用意されているとのことで、上記のコードをページを読み込んだ後に走らせると、SNSボタンが再構築されます。ただ、$(document).ready(function(){～の直後に上記コードを読み込んだ場合、「Facebookのボタンがないよ！」とエラーが返ってきましたので、上記のようにsetTimeoutで遅延させてから再構築したところ、正常に動作しました。読み込みタイミングの問題かな？もう少し詳しく調べてみます。ではまた～(；´∀｀)ノ #javascript #SNS #jQurey 2016-08-19 記事をもっと見る
ajaxで動的にページを読み込んだ時、SNSボタンが崩れる対策 お久しぶりです。プログラマーのどっぴーです ^O^お盆休みに和歌山に帰省していました。ポケモンGOを試しに起動したところ、ポケストップの少なさにびっくり。そして、休日は家から出ることなくゴロゴロしていた親父がメガシンカしてました。ポケモンを捕獲するために長いときは１日8時間近く外出しているのだとか。スマホのアプリが生活リズムをも変える…ポケモン効果すごいですね。…今回はポケモンGOの話ではなく、以前に起こった「Ajax非同期のページのSNSボタンが崩れてしまう」現象の対策について備忘録がてら書いておきます。どうやってもSNSボタンのレイアウト崩れを解決することができずアレコレ試していたのですが、Google先生に頼ったところ即解決しました。なんでもSNSボタンを再構築するための専用のAPIが用意されているとのことで、上記のコードをページを読み込んだ後に走らせると、SNSボタンが再構築されます。ただ、$(document).ready(function(){～の直後に上記コードを読み込んだ場合、「Facebookのボタンがないよ！」とエラーが返ってきましたので、上記のようにsetTimeoutで遅延させてから再構築したところ、正常に動作しました。読み込みタイミングの問題かな？もう少し詳しく調べてみます。ではまた～(；´∀｀)ノ #javascript #SNS #jQurey 2016-08-19