Oliver Heeger
Senior Web-Entwickler & Teamleiter
denkwerk GmbH
denkwerk.com
twitter.com/echt
fb.com/oliver.heeger
FB.ui is a generic helper method for triggering Dialogs that access the Facebook Dialog API endpoint.
FB.ui({method: 'feed', ...}); // Deprecated
FB.ui({method: 'share', ...});
FB.ui({method: 'stream.share', ...});
FB.ui({method: 'friends', ...});
// Initial call on load
FB.getLoginStatus(function(response) {
/*
response = {
status: 'connected',
authResponse: {
accessToken: '...',
expiresIn:'...',
signedRequest:'...',
userID:'...'
}
}
*/
if (response.status === 'connected') {
// logged in to this page!
} else if (response.status === 'not_authorized') {
// Not logged in to this page!
} else {
// Hey, you arent even on fecebook!
}
});
<div class="fb-login-button"
data-show-faces="false" data-width="200" data-max-rows="1"
data-scope="friends_likes,publish_stream">Login</div>
// subsription to a login change!
FB.Event.subscribe('auth.login', function(response) {
// same as left
});
Log window
Read more:
Technical Guides: Login
Available permissions
App Settings on facebook
Auth SDK Reference
// Initial call on load
FB.getLoginStatus(function(response) {
/*
response = {
status: 'connected',
authResponse: {
accessToken: '...',
expiresIn:'...',
signedRequest:'...',
userID:'...'
}
}
*/
if (response.status === 'connected') {
// logged in to this page!
} else if (response.status === 'not_authorized') {
// Not logged in to this page!
} else {
// Hey, you arent even on fecebook!
}
});
$('#logmein').on('click', function() {
FB.login(function(response) {
if (response.status == 'connected') {
window.top.location.href = 'http://oliver-heeger.de/facebook101';
}
},{scope:'email'} );
return false;
});
Log window
Read more:
Login with Javascript SDK
Available permissions
App Settings on facebook
Auth SDK Reference
The following slides need a logged in user to use the graph API. You should log in to proceed to the next slides.
You can use the graph API to get almost any information on facebook.
https://graph.facebook.com/4 Mark Zuckerberg
https://graph.facebook.com/4/picture Mark Zuckerberg's Picture
https://graph.facebook.com/me/feed Actual user's Timeline
https://graph.facebook.com/search?q=sushi&type=place¢er=50.945882,6.957779&distance=10000 Search Sushi Places in Cologne
https://graph.facebook.com/?ids=http://www.heise.de/ Get graph information from any Website
https://graph.facebook.com/138566186213770/members Members of the Group Facebook Developers Germany
Read More: https://developers.facebook.com/docs/reference/api/
Use the php API to get information about the logged in user (/me)
require_once("php-sdk/facebook.php");
$config = array();
$config['appId'] = $appId;
$config['secret'] = $appSecret;
$facebook = new Facebook($config);
// Get the user id:
echo $facebook->getUser();
// 0
// get the /me object (if we have an user id)
if ($facebook->getUser()) {
try {
$me = $facebook->api('/me');
echo $me['name'];
} catch (FacebookApiException $e) {
echo $e->getMessage();
}
}
// Oops, you're not logged in!
Always use try...catch if you use the php API.
if ($facebook->getUser()) {
try {
$liked = $facebook->api('/me/likes/116757168425');
if (isset($liked['data'][0]['name'])) {
echo 'great, you like ' . $liked['data'][0]['name'] . ' since ' . $liked['data'][0]['created_time'];
} else {
echo 'Oops, try again dude!';
}
} catch (FacebookApiException $e) {
echo $e->getMessage();
}
}
// Oops, you're not logged in!
Use the js API post a status to facebook.
(if you click here you will post a Message to facebook without confirmation.
$("#fb_api_post").click(function(){
var data=
{
name: "Facebook 101",
caption: "Facebook 101 for developers",
message: "The ultimate 101 for beginnig and advanced facebook developers.",
link: 'http://oliver-heeger.de/facebook101/',
picture: 'http://oliver-heeger.de/facebook101/img/share.jpg',
description: "The ultimate 101 for beginnig and advanced facebook developers.",
actions: [{ name: 'Go to the Facebook 101', link: 'http://oliver-heeger.de/facebook101/' }]
};
FB.api('/me/feed', 'post', data, function(response) {
if (!response || response.error) {
alert(response.error.message);
} else {
alert('Post ID: ' + response.id);
}
});
return false;
});
Evaluates an FQL (Facebook Query Language) query.
$fql = '
SELECT name, pic_square,music
FROM user
WHERE (
uid IN (SELECT uid2 FROM friend WHERE uid1 = me())
)
AND music != '' order by name';
$param = array(
'method' => 'fql.query',
'query' => $fql,
'callback' => ''
);
$fqlResult = $facebook->api($param);
Oops, you're not logged in!
To add an application to a facbook Page you have to call the following url with your Parameters:
https://www.facebook.com/dialog/pagetab?app_id={APP_ID}&display=popup&next={NEXT URL}
Add this bookmarklet to your bookmarks to open a popup with the right Parameter.
javascript: var d = document,f = 'https://www.facebook.com/dialog/pagetab?app_id=',l = d.location,e = encodeURIComponent,
p = '&display=popup&next=http://www.facebook.com';1;a = function(){
var appid = l.href.match(/\d{10,30}/);if (!window.open(f + appid + p, 'linter', 'toolbar=0,status=0,resizable=1,width=400,
height=200')) l.href = f + appid + p};if (/Firefox/.test(navigator.userAgent)) setTimeout(a, 0);else {a()}
To debug the current page in the Facebook debugger, add this bookmarklet to your bookmarks to open a popup with the right Parameter.
javascript:var d=document,f='http://developers.facebook.com/tools/debug/',l=d.location,e=encodeURIComponent,
p='og/object?q='+e(l.href);1;a=function(){if(!window.open(f+p,'linter','toolbar=0,status=0,resizable=1,
width=1050,height=800'))l.href=f+p};if(/Firefox/.test(navigator.userAgent)) setTimeout(a,0);else{a()}
Remove overflow hidden & redirection in development.
If you develop apps on different staging server, you can use this snippet to enhance your debugging capatibilities.
<script type="text/javascript">
try{
if (window.location.hostname === 'liveserver.com' && top === self) {
top.location.href = 'http://www.facebook.com/YOURPAGE?sk=app_YOURAPP';
}else if(top === self){
document.getElementsByTagName("body")[0].style.overflow = 'visible';
}
}catch(e){}
</script>
This redirects direct calls to your app to your Facebook page and removes the overflow:hidden if you are developing.
We are currently looking for:
Frontend-Entwickler (m/w) Köln
TYPO3 –Integrator (m/w) – Freelancer (Darmstadt)Darmstadt
JavaScript-Entwickler (m/w)Köln
Senior Java Entwickler (m/w)Köln
Web-Entwickler (m/w) – Schwerpunkt PHP/JavaScriptKöln
TYPO3-Extension-Entwickler (m/w) – Festanstellung und FreelancerDarmstadt, Köln
TYPO3-Entwickler (m/w)-Festanstellung und FreelancerDarmstadt, Köln
Software Entwickler/in (PHP)Köln
Senior Software-Entwickler (m/w)Berlin, Köln
PHP-Entwickler (m/w)Köln
www.denkwerk.com/category/de/jobs/