How to Add GIFs to Your App with the Gfycat API or SDK

Written by Gfycat | Published 2018/02/09
Tech Story Tags: gif | tutorial | ios-sdk | android-sdk | add-gifs-to-app

TLDRvia the TL;DR App

If you are considering developing a feature for GIFs in your app, you’ve come to the right place. There are a few ways that we suggest developers use GIFs to increase engagement. We’ll highlight three of them: GIF keyboard, GIF feed, and GIF creation.

Getting Started — API tokenBefore getting underway, be sure to register for a Gfycat API token. You’ll need to create a Gfycat account if you don’t have one already, and then register for a key here. This is important because use of the Gfycat API requires authentication. A client_id and client_secret will be emailed to you — be sure to store these in a secure location.

If you plan to add functionality from Gfycat to your iOS app, Android app, and website, register for three API keys — one for each app. Also, to better keep track of your Gfycat API keys, input a descriptive app name.

Requesting and Managing Your Gfycat API Keys

GIF KeyboardAlong with texting, emojis, and stickers, GIFs are de rigueur when it comes to instant digital communication. Adding a GIF button to a chat or messaging feature in your app or to a social posting feature is a quick and easy way to boost engagement in your app with exciting GIF content. This includes GIF search and GIF reaction categories.

A few great use cases are messaging apps, dating apps, or workplace collaboration apps. The iOS SDK (GfycatKit) and Android SDK (Gfycat Picker Fragment) were developed for these use cases and have UI elements and analytics already included. To use the Gfycat “GIF” button icon, you can find a .svg here. The SDKs are also ad-enabled (off by default). If you’d like to plug this in as well, send us a note to api@gfycat.com during your development process.

The Gfycat SDK in the Tango app and the textPlus app

If you have a standalone desktop app or desktop web version of your app, we also have a custom webview available that you can easily implement. It is a similar webview to what we use in the Gfycat Outlook Add-on and the Gfycat Skype Add-on. Send us a quick note to api@gfycat.com and we can help you get that set up in less than a day.

Gfycat in the Skype Desktop App

The iOS and Android SDKs are built on top of the Gfycat API. For an implementation using the API, these are the important endpoints to use (if you do use SDKs, you don’t need to worry about this because it is already built in).

GIF Search: More information can be found here in our documentation.

Trending GIFs: This specific endpoint for trending GIFs is designed and curated for the mobile messaging experience with relevant trending content.

Reaction GIFs list: This endpoint is a curated list of reaction GIF categories ideal for messaging experiences. More information can be found here.

Impressions: This allows us to better track views for the content so that we can share vanity metrics with our viewers and content creators. More details on the Impressions Endpoint can be found here.

Shares: When a user selects a GIF to send in a chat, that counts as a share. This data is helpful to measure the shareability of different GIFs, as well as to report back to the creator on Gfycat how many times their content is shared. More details can be found here for the Analytics Endpoint and Send Video event.

GIF FeedIf you have an app where users submit content links for articles, videos, GIFs, etc. we advise that you implement the Gfycat API to best display that content in your app. An example of an app like this would be Reddit on iOS or Android or one of the Reddit 3rd party apps.The important endpoints to use are:

Getting Gfycats: This endpoint returns a JSON object with all the information for a particular Gfycat. ‘gfyid’ is the unique identifier so in the case of https://gfycat.com/vibrantuniquekiwi, ‘vibrantuniquekiwi’ is the ‘gfyid’. More information can be found here.

Impressions: To reiterate from the GIF Keyboard section, this allows us to better track views for the content so that we can share that with our viewers and the content creator. More details can be found here for the Impressions Endpoint.

If you have an app that functions as a news reader or news aggregator, you may want to bring in a feed of timely and relevant GIF content from trending topics or keywords. An example of an app like this would be Topbuzz. The most relevant endpoints to use are:

Trending Gfycats: This endpoint returns all the trending GIFs that you see playing on the Gfycat homepage. This trending content is trending as a result of pageviews on gfycat.com and other sites like reddit.com.

Trending Tags: The two endpoints for trending tags return a list of trending #tags as well as the same list populated with Gfycats for each #tag. More information and additional parameters can be found here.

Impressions: Please see further above.

In all cases, ‘mobileUrl’ from the JSON object corresponds to a mobile-optimized .mp4 which is often the best format for viewing on mobile.

Trending Gfycats in the Topbuzz app

GIF CreationCreation can take many forms. You could let users make a GIF from a longer video. You could let users make a GIF from their camera or something from their photo/video library on their device. You could give users GIFs that they could add captions or emojis to. There are many possibilities.

XboxDVR allows users to make Gfycat HD GIFs from longer video clips on XboxDVR.com. Bad Panda makes Gfycat HD GIF clips of goals and saves from their users’ longer gameplay session videos.

Create GIF from URL: This endpoint allows you to send a link to a video or .gif for us to retrieve (e.g. from YouTube, Instagram, etc. or any url end in ‘.gif’, ‘.mp4’ or some other video extension).

Create GIF from file upload: This endpoint allows you to send a file directly to us (e.g. your user selects a camera roll video and you pass that to us).

Upload and Creation Status: Is your Gfycat ready? That’s what this endpoint is for.

Creation Parameters: Add captions, select a start time and duration to cut your video, add a title (what is happening in your GIF?), and add tags (lol, happy, Barack Obama, Overwatch, Game of Thrones, etc.) as just a few of the things you can do. Learn how to use these parameters and more here.

As you consider the many options available to you either with the Gfycat SDK or the Gfycat API, please let us know what your plans might be. We’re happy to provide a direct line of support and we’re always looking to highlight different uses of Gfycat that developers are using in their apps. Technical inquiries can be directed to api@gfycat.com.


Published by HackerNoon on 2018/02/09