How-To

Facebook with ABPro 3.0.3

Posted in How-To

Sorry, Facebook changed a bunch of rules and ABPro no longer works with it.

This How-To only apples to ABPro 3.0.3 and 3.0.4 (betas, prior to RC 1)

ABPro 3.0.3 and above make heavy use of jQuery for all AJAX server calls.

Facebook has specific requirements for apps that use JQuery. This How-To shows changes required to have ABPro meet Facebook's approval.

Booking screen

Edit the view file: \components\com_rsappt_pro3\views\booking_screen_gad\tmpl\default_fb.php

First change the JQuery that is loaded

Around line 517 look for:

<script language="JavaScript" src="/<?php echo JURI::base( true );?>/components/com_rsappt_pro3/date.js"></script>
<script language="JavaScript" src="/<?php echo JURI::base( true );?>/components/com_rsappt_pro3/script.js"></script>
<script language="JavaScript" src="/<?php echo JURI::base( true );?>/components/com_rsappt_pro3/CalendarPopup.js"></script>
<script language="JavaScript" src="/<?php echo JURI::base( true );?>/components/com_rsappt_pro3/jquery.validate.min.js"></script>

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.4/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

Change to:

<script language="JavaScript" src="/<?php echo JURI::base( true );?>/components/com_rsappt_pro3/date.js"></script>
<script language="JavaScript" src="/<?php echo JURI::base( true );?>/components/com_rsappt_pro3/script.js"></script>
<script language="JavaScript" src="/<?php echo JURI::base( true );?>/components/com_rsappt_pro3/CalendarPopup.js"></script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

Add script to call FB init after page is fully loaded

Around line 600 look for and add red code:

jQuery(document).ready(function () {
jQuery.ajaxSetup({ cache: true });
jQuery.getScript('//connect.facebook.net/en_UK/all.js', function(){
FB.init({
appId: 'YOUR APP ID HERE',
});
jQuery('#loginbutton,#feedbutton').removeAttr('disabled');
//FB.getLoginStatus(updateStatusCallback);
});

window.onload = function() {
if(document.getElementById("resources")!=null){
if(document.getElementById("resources").options.length==2){
document.getElementById("resources").options[1].selected=true;
changeResource();
} else {
changeResource();
}
}
<?php if($single_category_mode){ ?>
document.getElementById("category_id").options[1].selected=true;
changeCategory();
<?php } ?>
submit_section_show_hide("hide")
}
});

My Bookings screen

Edit file: \components\com_rsappt_pro3\views\mybookings\tmpl\default_fb.php

Around line 224 look for and add red code:

<script language="JavaScript" src="/<?php echo JURI::base( true );?>/components/com_rsappt_pro3/CalendarPopup.js"></script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script>
jQuery(document).ready(function () {
jQuery.ajaxSetup({ cache: true });
jQuery.getScript('//connect.facebook.net/en_UK/all.js', function(){
FB.init({
appId: 'YOUR APP ID HERE',
});
jQuery('#loginbutton,#feedbutton').removeAttr('disabled');
//FB.getLoginStatus(updateStatusCallback);
});
});
</script>

<script language="JavaScript">
var cal = new CalendarPopup( <?php echo $div_cal ?>);

Prev
Next