blogメディア運営や請負ウェブ制作などを通して得た経験や情報をその場で消費せずアウトプットするための場としてのブログ。この記事は書いてから1年以上経過しました。FacebookシェアFbTwitterTwGoogle+G+HatenaHaPocketPkLINELI備忘録です。最近はやりのpJaxですが、とにかくグズグズな印象を受けます。jsの組み方をうまくやらないと全然動かないということにもなりかねません。今回はそんなpJaxでよくある「SNSボタンの再構築」のtipsです。Facebookいいね!、Tweet、Google+この3つだけです。他は検証してないけどたぶん同じような感じ?だと思います。data-size="medium"></div></li></ul>各項目にIDを振ります。Facebookだけwrapしている<li>にIDが振られてますね。FBのいいねボタンはIDを直接指定するのではなく、引数に指定したIDの子要素から見つけるという仕様になっているようです。今回は上記のように***BtnというIDをつけましたが、なんでもいいです。次にJSですが、動的にHTMLを読み込んだあと、以下のように実行します。動的に読み込んだ後なので、pjaxなら以下のようになりますね。wrapする要素(親要素ならなんでもOK。検索範囲が狭いほうが若干処理早い)にIDを振る。data-urlを指定。?>、MovableTypeなら<$MTentryPermalink$>とかかな。ボタンのサイズとかのオプションも明示的にjs側で指定すること。てきとうにググって試した結果なので、情報の正確性は保障できかねます。【追記】あんなに頑張って検証したのに、実際3行でできることが判明。ソースを書き換えました。はいまったく無駄なエントリーになりました。最近こういうことが多い。関連記事MovableTypeで非同期にアーカイブリストをページングiScroll4にて、safariでトラックパッドの二本指スクロール効かないときの対応方法ウェブ制作請負事業を開始しました。弊社のエース営業マン石田純也が11月いっぱいで退職いたしました。システムに関するお問い合わせをお待ちしています。(1)株式会社p.c.c.フロントエンドの下請け・請負制作をはじめ、多数のウェブコンテンツを自社で企画・制作・運営している会社です。企業の外部ウェブ担当として顧問契約も行っています。