Lets have a look at a simple way to make images scale responsively in a webpage in response to the device on which the webpage is viewed. In the example considered below, the image will scale responsively to the required dimension, stay aligned to the center and will maintain its aspect ratio. If you are viewing this page on a desktop / laptop, try to resize the browser to smaller dimensions and you can see that the image will resize to the browser's width. In fact, all elements including the images on this site is designed to resize (i.e., show a responsive behavior) keeping in mind the responsive web design techniques.
Demo
(Resize your browser window)
This is achieved by wrapping the img element into a div section with style containing the property 'display' with value 'table' and for the property 'margin' we provide a value '20px auto' signifying that we need a margin of 20px on the top and bottom of the div section and let the browser calculate the left and right margins automatically so as the keep the div section centered horizontally. In the img tag make sure the width property is specified with a value set to 100%.
Here is a simple way to generate a web form which has default values loaded into the text fields without actually using a placeholder tag. A placeholder tag is only supported by few browsers. This form uses javascript to achieve the same functionality and works with all browsers having javascript enabled.
This is how the signup form behaves in action.
Demo
Given below is the code to create the above signup form, without using placeholder tag.
In the next window, click on "Skip Quickstart" as you don't have anything existing to be configured. Type in the name of your application as desired, select an appropriate category below and click on Create App.
Now you have your App ID and App Secret which you will be making use to initialize the Facebook PHP SDK and get the user information.
Once downloaded, unpack the contents. Rename the folder "facebook-php-sdk-v4-4.0-dev" to "facebook-php-sdk" for the sake of simplicity. Make sure you move this folder to the same directory which contains your website's index.php i.e., your website's root folder.
Authentication , Authorization and Making requests to the Graph API to obtain the required facebook user information
Facebook login in simple terms can be stated as follows:
Create a helper object, which will help you in generating 'Login URL' and 'Logout URL'.
Login URL will take a new user to facebook login page for authentication and redirect to a page as specified by redirectUrl of getLoginUrl() on successful authentication.
Logout URL will take an signed in user to facebook's logout page and redirect to a page as specified by redirectUrl of getLogoutUrl().
Do a bit of session management.
Retrieve user information from Facebook's Graph API.
Also note that you will be taken to the page as specified by redirectUrl only after you make an entry of the absolute path name of the redirect page in your facebook's app. This can be done as follows:
Go to Dashboard >> Settings >> Advanced >> Valid OAuth redirect URIs
Make the entry and save changes.
In the code shown below I have considered two files:
index.php
fbhome.php
The code is run on xampp local host and the project is named as 'floginproj'. index.php contains the login link which when pressed takes you to facebook login page, after authentication you are redirected to 'fbhome.php'. In fbhome.php you can retrieve the necessary user information obtained via the graph API and store them in the database or use them further as required in your website.
Here is the code:
index.phpfbhome.php
Common Errors:
In this section, I've listed down the most common errors you might come across while performing the above steps. Most of the errors given below might happen if you are using a php version lesser than php 5.4. Facebook documentation already mentions that. But in case you are using a lower version you might come across these errors and I have provided a fix.
Parse error: syntax error, unexpected T_OBJECT_OPERATOR in
C:\xampp\htdocs\floginproj\facebook-php-sdk\src\Facebook\FacebookResponse.php
on line 137
change this >>>
public function getGraphObject($type = 'Facebook\GraphObject') {
return (new GraphObject($this->responseData))->cast($type);
}
to this >>>
public function getGraphObject($type = 'Facebook\GraphObject') {
$GraphObj1=new GraphObject($this->responseData);
$GraphObj=$GraphObj1->cast($type);
return $GraphObj;
}
Parse error: syntax error, unexpected T_OBJECT_OPERATOR in
C:\xampp\htdocs\floginproj\facebook-php-sdk\src\Facebook\FacebookResponse.php
on line 154
change this >>>
$out[] = (new GraphObject($data[$i]))->cast($type);
to this >>>
$GraphObjData1=new GraphObject($data[$i]);
$GraphObjData=$GraphObjData1->cast($type);
$out[]=$GraphObjData;
Parse error: syntax error, unexpected T_OBJECT_OPERATOR in
C:\xampp\htdocs\floginproj\facebook-php-sdk\src\Facebook\FacebookRedirectLoginHelper.php
on line 146
Parse error: syntax error, unexpected T_OBJECT_OPERATOR in
C:\xampp\htdocs\floginproj\facebook-php-sdk\src\Facebook\GraphObject.php
on line 111
change this >>>
return (new GraphObject($value))->cast($type);
to this >>>
$GraphObjProp1 = new GraphObject($value);
$GraphObjProp = $GraphObjProp->cast($type);
return $GraphObjProp;
Parse error: syntax error, unexpected T_OBJECT_OPERATOR in
C:\xampp\htdocs\floginproj\facebook-php-sdk\src\Facebook\GraphObject.php
on line 147
change this >>>
$out[$key] = (new GraphObject($value))->cast($type);
to this >>>
$GraphObjProp1 = new GraphObject($value);
$GraphObjProp = $GraphObjProp->cast($type);
$out[$key] = $GraphObjProp;
Fatal error: Call to undefined function Facebook\session_status() in
C:\xampp\htdocs\floginproj\facebook-php-sdk\src\Facebook\FacebookRedirectLoginHelper.php
on line 189
Fatal error: Call to undefined function Facebook\session_status() in
C:\xampp\htdocs\floginproj\facebook-php-sdk\src\Facebook\FacebookRedirectLoginHelper.php
on line 218
change this >>>
protected function loadState()
{
if ($this->checkForSessionStatus === true
&& session_status() !== PHP_SESSION_ACTIVE) {
throw new FacebookSDKException(
'Session not active, could not load state.', 721
);
}
if (isset($_SESSION[$this->sessionPrefix . 'state'])) {
Fatal error: Uncaught exception 'Facebook\FacebookSDKException' with message 'Session not active, could not load state.' in C:\xampp\htdocs\floginproj\facebook-php-sdk\src\Facebook\FacebookRedirectLoginHelper.php:228 Stack trace: #0 C:\xampp\htdocs\floginproj\facebook-php-sdk\src\Facebook\FacebookRedirectLoginHelper.php(132): Facebook\FacebookRedirectLoginHelper->loadState() #1 C:\xampp\htdocs\floginproj\fbhome.php(22): Facebook\FacebookRedirectLoginHelper->getSessionFromRedirect() #2 {main} thrown in
C:\xampp\htdocs\floginproj\facebook-php-sdk\src\Facebook\FacebookRedirectLoginHelper.php
on line 228
Catchable fatal error: Method Facebook\Entities\AccessToken::__toString() must return a string value in
C:\xampp\htdocs\floginproj\facebook-php-sdk\src\Facebook\FacebookSession.php
on line 85
Parse error: syntax error, unexpected '[' in
C:\xampp\htdocs\floginproj\facebook-php-sdk\src\Facebook\HttpClients\FacebookStreamHttpClient.php
on line 143
change this >>>
public function compileHeader()
{
$header = [];
foreach($this->requestHeaders as $k => $v) {
$header[] = $k . ': ' . $v;
}
to this >>>
public function compileHeader()
{
//$header = [];
foreach($this->requestHeaders as $k => $v) {
$header[] = $k . ': ' . $v;
}
Fatal error: Uncaught exception 'Facebook\FacebookSDKException' with message 'You must provide or set a default application secret.' in C:\xampp\htdocs\floginproj\facebook-php-sdk\src\Facebook\FacebookSession.php:340 Stack trace: #0 C:\xampp\htdocs\floginproj\facebook-php-sdk\src\Facebook\FacebookRequest.php(283): Facebook\FacebookSession::_getTargetAppSecret() #1 C:\xampp\htdocs\floginproj\facebook-php-sdk\src\Facebook\FacebookRequest.php(204): Facebook\FacebookRequest->getAppSecretProof('149425558081437...') #2 C:\xampp\htdocs\floginproj\facebook-php-sdk\src\Facebook\FacebookRedirectLoginHelper.php(146): Facebook\FacebookRequest->__construct(Object(Facebook\FacebookSession), 'GET', '/oauth/access_t...', Array) #3 C:\xampp\htdocs\floginproj\fbhome.php(32): Facebook\FacebookRedirectLoginHelper->getSessionFromRedirect() #4 {main} thrown in
C:\xampp\htdocs\floginproj\facebook-php-sdk\src\Facebook\FacebookSession.php
on line 340
This is achieved by wrapping the img element into a div section with style containing the property 'display' with value 'table' and for the property 'margin' we provide a value '20px auto' signifying that we need a margin of 20px on the top and bottom of the div section and let the browser calculate the left and right margins automatically so as the keep the div section centered horizontally. In the img tag make sure the width property is specified with a value set to 100%.
Creating a facebook login for a website involves the following 3 activities on a high-level. Each of these have been explained in detail below.
