Code Samples: facebook app

Showing posts with label facebook app. Show all posts

Friday, February 1, 2013

Remove horizontal and vertical scrollbar from facebook apps

Set scroll=no and overflow:hidden to your body and use FB.Canvas.setAutoGrow() to remove the scrollbar.

<body scroll="no" style="overflow:hidden">
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function () {
    window.setTimeout(function () {
        FB.Canvas.setAutoGrow()
    }, 250)
};
(function () {
    var e = document.createElement('script');
    e.async = true;
    e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e)
}());
</script>

Follow the link.

Remove-horizontal-and-vertical-scrollbar-from-facebook-apps

Tuesday, May 15, 2012

Create a facebook apps and page tab

go to facebook developers area for apps: https://developers.facebook.com/apps
create a app.
set app display name
set app namespace
click tab app on facebook, give a url to view the page under apps home page, as iframe
select page tab and give your site url to visit from facebook apps as facebook iframe
get app id and secret from the app page
done,

Configuring a Page Tab

In order to enable this feature, you need to specify a Page Tab Name and a Page Tab URL (much like you provided a Canvas Page and Canvas URL previously) that is loaded when the user selects your Tab on a given Facebook Page. You must also specify aSecure Page Tab URL which is the HTTPS address of your content. Users browsing Facebook who have HTTPS enabled will be unable to use your tab if this URL is empty. Note that SSL support for your page tab app has been mandatory since October 1, 2011.

You can find these settings in the "Basic" section of your app's settings in the Developer App under 'Select how your app integrates with Facebook'. Click 'Page Tab' to expand the Page Tab settings, and the Page Tab fields will appear

Page Tab Width

The amount of space available to your tab app is bounded by the outer context of Facebook. It may be configured to display with a width of 520 pixels (default) or 810 pixels.

Adding an App to a Page

As a Page Tab App developer, you can prompt users to install your Page Tab App by including an "Install this Page Tab App" link that explicitly directs the user to the /dialog/pagetab endpoint, either within your Page Tab App or Website:

https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

where YOUR_APP_ID and YOUR_URL can be found in your app settings.

This URL brings up the Add to Page Dialog:

Integrating with Facebook APIs

When a user navigates to the Facebook Page, they will see your Page Tab added in the next available tab position. Broadly, a Page Tab is loaded in exactly the same way as a Canvas Page. Read more about this in the Canvas Tutorial. When a user selects your Page Tab, you will receive the signed_request parameter with one additional parameter, page. This parameter contains a JSON object with an id (the page id of the current page), admin (if the user is a admin of the page), and liked (if the user has liked the page). As with a Canvas Page, you will not receive all the user information accessible to your app in the signed_request until the user authorizes your app.

In addition, your app will also receive a string parameter called app_data as part of signed_request if an app_data parameter was set in the original query string in the URL your tab is loaded on. It could look like this: "https://www.facebook.com/YourPage?v=app_1234567890&app_data=any_string_here". You can use that to customize the content you render if you control the generation of the link.

Integrate facebook apps with facebook pages

At first download facebook sdk for php from here:
https://docs.google.com/file/d/0B5nZNPW48dpFbjZiSHNybEh0czg/edit?usp=sharing

App id and secret code goes here as
$this->facebookObject = new Facebook(array(
            'appId' => $this->appId,
            'secret' => $this->secret,
        ));
this will return facebook object.

To get signed request by pages,
$this->signedRequest = $this->facebookObject->getSignedRequest();

If signed request dont come from a page you can die immediately
if (!isset($this->signedRequest["page"]["id"])) {
                die();
            }
Get facebook user id if need
$this->facebookUser = $this->facebookObject->getUser();

If user is not logged in then retrieve login url
$loginMainUrl = $this->facebookObject->getLoginUrl();

** retrieve login return url
$loginReturnUrl = $this->getLoginReturnUrl($this->signedRequest["page"]["id"]);
            $loginReturnUrl = urlencode($loginReturnUrl."?sk=app_".$this->appId);

            $loginMainUrls = explode("&", urldecode($loginMainUrl));
            $loginMainUrlNew = "";
            foreach($loginMainUrls as $temp) {
                if($loginMainUrlNew != "") {
                    $loginMainUrlNew .= "&";
                }
                if(substr($temp, 0, 12) == "redirect_uri") {
                    $loginMainUrlNew .= "redirect_uri=".$loginReturnUrl;
                } else {
                    $loginMainUrlNew .= ($temp);
                }
            }
<a target="_parent" href="<?php echo $loginMainUrlNew; ?>"><img src="<?php echo Router::url('/', true); ?>img/fb_login.jpg" alt="Login With Facebook"></a>

Get facebook pages link by implementing this function:
function getLoginReturnUrl($pageId) {
$url="https://graph.facebook.com/".$pageId;

        $ch = curl_init();
        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
        curl_setopt($ch,CURLOPT_URL,$url);
        curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
        curl_setopt($ch,CURLOPT_CONNECTTIMEOUT,2);
        $content = curl_exec($ch);
        $content = json_decode($content);
        if(isset($content->link) && strlen($content->link) > 0) {
            return $content->link;
        }
return "";
}

When anyone add this apps to his/her page then do the following:
foreach($_GET as $key=>$value) {
            if($key == "tabs_added") {
                if(count($value) > 0) {
                    foreach($value as $key2=>$value2) {
                        if($key2 != null && strlen($key2) > 0) {
                            $url = $this->getLoginReturnUrl($key2)."?sk=app_".$this->appId;
                            if($url != null && substr($url, 0, 4) == "http") {
                                header("Location: ".$url);
                            }
                        }
                    }
                }
            }
        }
this will redirect you to proper application page under the page which you add add this apps.

Add this html to your page to make user to add the apps to there pages

<?php
$urlToAddThisApp = "http://www.facebook.com/dialog/pagetab?app_id=".Configure::read("facebookAppId")."&next=".urlencode(Router::url("/", true)."apps/facebook/thank_you");
$urlToAddThisApp .= "&skip_api_login=1&display=popup";
$urlToAddThisApp .= "&cancel_url=".urlencode(Router::url("/", true)."apps/facebook/cancel");
?>
<div>
    <a href="javascript:void(0);" onclick="open_win();">Add this app</a>
</div>
<script>
    function open_win() {
        var width = 500;
        var height = 350;
        var left = (screen.width/2)-(width/2);
        var top = 50;
        myWindow=window.open('<?php echo $urlToAddThisApp; ?>','','width='+width+', height='+height+', top='+top+', left='+left);
        myWindow.focus();
    }
</script>

Pages