QuickBlox Developers (API docs, code samples, SDK)

From QuickBlox Developers (API docs, code samples, SDK)

Jump to: navigation, search

QuickBlox MapChat embedded into Facebook application -- http://apps.facebook.com/mapchat_facebook/
Git Repository -- https://github.com/QuickBlox/MashApp-location_users-mapchat-facebook
Clone the latest code -- git@github.com:QuickBlox/MashApp-location_users-mapchat-facebook.git

If you want to embed MapChat into Facebook application, take following steps

Create Facebook application in your Facebook Developers panel
1. App Namespace parameter will generate canvas page URL
2. See point 5 below

Login into QuickBlox Panel and register new application for your MapChat
Copy application parameters

Go to MapChat Code Generator and put application parameters into corresponding fields
Copy generated code and put into simple HTML page

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>QuickBlox MapChat integrated into Facebook application</title>
	<style type="text/css">
		#qb-mapchat {
			height:600px;
			width:600px;
		}
	</style>
</head>
<body>
	<h1>QuickBlox MapChat integrated into Facebook application</h1>
	<p>Hi, it is simple Facebook application that contains integrated QuickBlox MapChat.</p>
	<div id='qb-mapchat'><div id='qb-powered-by-quickblox' style='font:11px/12px Arial, Helvetica, sans-serif !important; height:18px !important; position:relative !important; margin-bottom:-18px !important; top:2px; padding-right:5px !important; text-align:right !important; margin-left:130px !important;'>Powered by <a href='http://quickblox.com' title='QuickBlox is a cloud hosted PaaS, collection of universal APIs, for mobile / web / Facebook apps. It also provides back end (admin panel), libraries and code samples.' style='color:#3B5998 !important; text-decoration:none !important;'>QuickBlox</a></div><iframe src='http://quickblox.com/apps/mapchat/app.php?key=4f0d03b7e2976a710579e50fb8a49b9c' frameborder=0 height=100% width=100%></iframe></div>
</body>
</html>

Put that page to your website and get url, e.g. http://example.com/mybestmapchat/ (in our case it is http://samples.quickblox.com/mapchat-facebook/), then put this URL as Canvas URL parameter in Facebook application settings.
Profit!! =)