ソーシャルメディアボタンの追加

ソーシャルメディアボタンの追加

まず、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を使う

こうすれば通信量削減もできる

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です