Stories on facebook with Swift 2 and imgur API

Hi there, long time no posts on my behalf… I do apologise! But before we get to swift-ing, let me overshare 🙂

I did some freelancing for my last employer, I also published my app Plan D and even released two more versions with bug fixes. This being my first time, it was a journey. But it was worth it 🙂

So, now I am working on my next project and past few days I’ve tackled social network image sharing. It’s been… character building, to say the least!

As all my 5 readers know, I code for iOS and use Swift as a language of choice. Apparently nobody in Instagram or Facebook or pretty much any other social network ever thought that someone might develop for iOS using Swift, not knowing Objective C. When I opened the Facebook developers’ docs, I found everything I needed, in a language I do not use. I know, there are a few translators available, but Swift is evolving so fast, that half the methods you can find in ObjC tutorials for facebook posts are deprecated already. It took me 2 days to figure out a practical way, so I am putting it up here, for your viewing pleasure.

What was the goal?

In my app users have the option to post their generated images in various social media. In facebook I wanted to have it presented like a story.

Screen Shot 2016-03-23 at 3.14.47 PM

That’s how it was supposed to look from the beginning. Later I researched the fb docs and SDK and learned that this is called a custom story. First I want to mention that to use custom stories, you have to go through hell with setting up your app in facebook, also providing privacy policy, icons and even a simulator build that they can use to see how does your story work. I will not be focusing on those in this post. It’s all in the facebook docs, very well explained. The idea is that they have predefined actions and objects, that you can use in your stories (e.g. Albert Einstein read a book on Goodreads). If you want your custom story, you first define custom action and object and then the story itself. It’s pretty straight forward, but horribly time-consuming.

After that comes the search for the code. It’s all explained in ObjC and after a thorough stackoverflow and google research, I managed to implement the facebook ShareKit and CoreKit SDK’s, which were required to use the sharing option. Also, I figured that if I use the new facebook ShareDialog class I don’t have to ask users to authorise my app to use their facebook accounts. Which is something that I was looking for actually.

Ok, but let’s start creating our application.

We open Xcode and create a new Swift project and save it somewhere convenient, as shown below:

Screen Shot 2016-03-23 at 3.22.47 PM

Screen Shot 2016-03-23 at 3.23.11 PM

After that it’s time to set up our app.

I pretty much want to add an image to my assets, add a UIImageView in my Main.storyboard and add a button to post the image from the UIImageView to facebook.

Screen Shot 2016-03-23 at 3.28.35 PM

After we’ve setup those (you figure out the constraints, etc.), let’s create an outlet by Ctrl-dragging the Button to the code and start coding our functionalities.

So, our code should now look like (in ViewController.swift)

Oh, you remembered to add an outlet for the UIImageView and to create an IBAction for the button, not an outlet… Great, you are smart!

Now, I have to state something. As much as I tried I was never able to post an image to facebook directly without requesting the user to authorise the app. It only worked if I linked the image from the web. However, my app generates images, but I don’t want to be responsible for keeping them available online. Therefore I decided to use a service that already exists, a great service actually – IMGUR. They also have an awesome API, that not only supports OAuth2, but also is available for anonymous uploads. Which is perfect for our case.

So, we can go HERE (https://api.imgur.com/oauth2/addclient) and register our app (after creating our own account). We do this to get the Client Key, which is our personal key for the API. Please, keep in mind that as of the date of this post, Imgur API services are absolutely free for non-commercial apps. I am pretty sure apps that include ads are considered commercial, so be careful where you use their services or review the commercial app API (I think up to ~1000 of uploads per day were still free). Anyway, after we have our API key, let’s add it to our code. And also, let’s add the URL where the Imgur API tells us we need to send our Image Upload POST requests.

Please, check if this is still the valid address when you start your app (if you use the commercial API, they’ll give you a different address).

You can always find your Client ID (API Key) if you go to your account in Imgur and go to Applications then.

Screen Shot 2016-03-23 at 3.46.07 PM

 And now let’s add our long method that uploads the image to Imgur and returns a url for it. Read the comments within the method, it’s quite straight-forward.

Hopefully you got what is happening above… We upload the image and then get back the url of the uploaded image. After that we’ll upload it to Facebook.

Let’s try it out.

Ok, I built it and clicked the button and got this in the Console:

Screen Shot 2016-03-23 at 4.03.32 PM

And, the link even works – http://i.imgur.com/wwgMdvz.jpg.

OK, now it’s time to actually upload this image to Facebook using our custom story. First, go to facebook developers’ site and download their most current SDK. You will need to get an app ID first and set-up your project to work with it. However, I won’t cover this as it is covered in much detail in the API docs, and there’s also a lot info on this online.

After you download the SDK and drag and drop the FBSDKShareKit and FBSDKCoreKit to your project, it’s time to import them in our ViewController.swift and write our facebook posting method.

Do not forget to go through the facebook Quick Start Guide for iOS, which will guide you through the process of adding some required lines to your plist, etc. Otherwise it simply won’t work! The code will include your facebook app ID, so you will have to copy it from there to work (now, this is located HERE).

So, after we cleared this, here’s our method to post to facebook.

And that’s pretty much it. The code uploads the image to Imgur and then links it in facebook, which actually downloads it and posts it as part of the user’s albums. And it shares it as your story that you defined earlier. Ain’t that awesome 🙂

Screen Shot 2016-03-23 at 4.20.00 PM

The only thing left now is to go through the App Review process and get your app approved from facebook. A journey they say might take up to 5 days, but took only 2 for me 🙂

Do not forget to fully set up the facebook page for your app, otherwise it will still appear as misconfigured should someone click on it.

You can download the project on my github account -> https://github.com/ddikov/facebookimageshare/

Be safe and till next time!

If you have any comments or questions, either post them below, or drop me a line at i@brotherlemon.com.

P.S. Don’t forget to share all these test posts by selecting visibility “Only Me“, no need to annoy all our fb friends 🙂

2 thoughts to “Stories on facebook with Swift 2 and imgur API”

    1. It’s kinda outdated with Swift 3 and all, but the principle should be the same. Glad it was helpful for someone 🙂

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.