Basic Facebook Guide: Facebook Login Sdk

Upload HD Photos

How to upload HD photos and videos on Facebook
One of the more annoying things about Facebook has got to be the diminished quality of photos and videos you upload to the service, be it via iOS’s Facebook integration integration or through the official mobile app for the iPhone and iPad, a free download in the App Store.

For whatever reason, Facebook’s mobile app defaults to low-resolution photo and video uploads, likely in an effort to minimize bandwidth usage in this digital age of capped cellular data.
Fortunately, there is an easy yet not immediately obvious way to configure Facebook for iPhone and iPad to record and upload videos and photos in glorious high-definition.
How to enable HD uploads for video through iOS
Step 1: Launch Settings on your device and tap on Facebook in the section with Twitter, Flickr and Vimeo integration.
Step 2: On the next screen, hit the Settings button below the Facebook logo and just above your account name.
Tip: If the Setting option is not present there, you must download the official mobile app, launch it and log in to Facebook within the app.

Step 3: Toggle the Upload HD button in the Video section to the ON position. Both iOS and the mobile app will now default to uploading high-definition video. Again, that toggle won’t be visible if you rely on iOS’s built-in Facebook integration but don’t use the official app.
Sadly, iOS’s Facebook integration doesn’t allow you to enable high-definition photo uploads through the Settings app. For that, you must use Facebook’s official mobile app, as described further below.
How to enable HD uploads for video and photos through mobile app
Step 1: Launch Facebook for iPhone and iPad.
Step 2: Tap the More button in the bottom right corner of the interface.
Step 3: Scroll all the way down and tap on Settings.
Step 4: A sheet pops up asking if you’d like to access your Account Settings, News Feed Preferences or Activity Log. Tap on Account Settings to continue.
Step 5: Tap on Videos and Photos on the next screen.

Step 6: Flip the Upload HD button in both the Video Settings and Photo Settings sections to the ON position.
That’s it. You’ve now ensured that posting photos/videos through the mobile app happens in high-definition so your snaps and videos will look sharp to others on Facebook.
Tip: If you disable the Upload HD option for video in iOS’s Settings app, its counterpart in the mobile app gets flipped to the OFF position, too, and vice versa.
HD uploads and bandwidth concerns
Needless to say, HD videos produce larger file sizes so you’ll wait longer for the transfer to finish. More importantly, HD upload might be particularly concerning for people who are on a metered cellular plan.
To avoid unwanted charges on your monthly wireless bill, ensure that you’re on Wi-Fi before posting high-resolution video on Facebook.
Also, consider temporarily disabling iOS 9’s new feature called Wi-Fi Assist that automatically switches to your carrier’s data network if your Wi-Fi connection is poor, even if cellular data is disabled in Setting.
Recommended video settings

If you’re planning on exporting your video from editing software such as Final Cut Pro X or iMovie, Facebook recommends the following custom settings for best results:
H.264 video with AAC audio in MOV or MP4 format
An aspect ratio no larger than 1280px wide and divisible by 16px
A frame rate at, or below, 30fps
Stereo audio with a sample rate of 44,100hz

Related Posts:

Videos shared on Facebook must be less than 45 minutes long and smaller than 1.75 gigabytes. The longer your video is, the larger its file size will be and this “may affect the quality of the video,” according to Facebook.
Go here for the complete list of supported video formats on Facebook.
And as mentioned before, iOS’s Facebook integration lacks the option to turn on high-resolution photo uploads so best thing you enable HD uploads for both photos and video directly in the mobile Facebook app.
Posting photos and videos to Facebook through mobile app
To upload a photo or video to Facebook, open the mobile app and tap Photo at the top of your News Feed, or Share Photo at the top of your Timeline.

Select the videos and photos you want to upload and tap Done. Optionally choose who can see your post, tag friends, add a location and write a custom message.
Hit the Post button to publish your media on Facebook.

Facebook Login Sdk

Facebook API – Login with the JavaScript SDK
I´ve seen a lot of weird coding happening around Login with the Facebook JavaScript SDK, so here is one good solution with explanation.
HTML (just a login button and a div for the response)

Of course there is room for improvement (there always is), but i am just trying to explain when (and how) you should use FB.login and FB.getLoginStatus. For example, you should hide the login button with CSS, right now it shows up for a short time and disappears if the user is authorized already – because it takes some time until the callback function of FB.getLoginStatus gets called. You could also use the Social Plugin for the Login Button, but i guess you want to use your own design so that´s not an option in most cases.

FB.login: FB.login opens the authorization window where users can authorize your App. It must get called directly on user interaction (mouse click), you can´t call it right after FB.init and you can´t call it in the asynchronous callback function of FB.getLoginStatus either. Make sure you understand what asynchronous means, it´s very important to know for a web developer. If you don´t call it on user interaction, it may get blocked by popup blockers. The benefit of using FB.login for authorization is that you don´t need to redirect the user to a login screen – the PHP SDK does not offer that kind of usability.

Related Posts:

FB.getLoginStatus: This function should get used on page load, right after FB.init. The major advantage of using this instead of a server side login process (with the PHP SDK, for example) is that it will refresh the User Token without page refresh. That is another benefit of using the JavaScript SDK, and it´s a pretty important one.

FB.api: This is actually not about the login process anymore, it´s just a basic API call to get the basic user data in the example. FB.api can only be used after FB.init. Should be obvious though, you can´t use the API before initializing the SDK.

return_scopes: Asking for permissions in the authorization process is not a sure thing. The user can just deselect the email permission in the authorization popup, for example. It´s quite easy to check for the authorized permissions by setting return_scopes in FB.login, as you can see in the code. If you add that parameter, you will get a list of all granted permissions in the grantedScopes field of response.authResponse.

That´s it, if you got any improvement tips or find any errors, feel free to comment – here are some links to the Facebook docs, if you need more information:

Blog Archive