ソーシャルメディアボタンの追加
まず、Twitterのツイートボタンの追加
追加するための必要なタグは
https://about.twitter.com/resources/buttons
で作成可能
ただし、モバイルからでは無理て
PCから行う
生成されたaタグを張れば
tweetリンクができる
ただし、これだとリンクだけなので
Twitter公式の外部jsファイルを読み込むことで
画像つきのtweetボタンになる
Twitter公式の外部jsファイルは
widgets.js
これを読み込むには
$(document).on("pagebeforecreate",'[data-role=pager]',function(e){
$.ajaxSetup(cache:true);
$.getScript('http://platform.twitter.com/widgets.js');
$.ajaxSetup(cache:false);
});
これは、Twitter公式の外部jsファイルの
widgets.jsを
pagebeforecreateイベントの発生時に
$.getScript()で読み込んでいる
widgets.jsの処理は
HTMLの要素が読み込まれる前に実行する必要があるため
pagebeforecreateイベントで実行している
本来、外部jsは、src を指定したscriptをheadに埋め込むけど
jQueryMobileでは、画面遷移後のページでは
head要素が読み込まれない
もし、ページが1つだけなら
src付きのscriptでいいけど
複数の画面でtweetボタンを付けることで使っているなら
pagebeforecreateイベントで
意図的にjsファイルを読み込む必要がある
$.ajaxSetup(cache:true);
$.ajaxSetup(cache:false);
で一時的にjsファイルのキャッシュ機能を有効化している
デフォルトでは
$.getScript()
のキャッシュ機能は無効化されているけど
これだとページ遷移が発生するたびにTwitterのJavascriptを読みに行ってしまう
つまり、通信に時間がかかる
このため$.getScript()のキャッシュ機能を有効化することで
すでにJavascriptを読み込んでいるなら
Webサイトへアクセスせずに
キャッシュされたJavascriptを使う
こうすれば通信量削減もできる