
Giphy Keyboard
Bring a Giphy keyboard to your app!
$3.00
Details
Giphy Keyboard for Ionic
What?
If you want to let your users directly use Giphy amazing gifs, this plugin is what you need. Simply connect your app with the Giphy database by automatically show the gifs referring to what your users are looking for!
With the Giphy keyboard you can:
- show trending gifs by default;
- show gifs matching the user's search;
- easily change a display limit for gifs;
- easily integrate a cool keyboard for your users (for a chat, tinder-style!);
- keep control of your workflow: edit callbacks when gif is tapped, when the keyboard is closed, ...
If you run into any issues, feel free to get in touch with me, I'll give you help asap! :)
(and the most important thing: enjoy coding with both ionic and giphy!)
Try using ionic View, app ID: E9E3119F.
Installation
1 - If you're not using angular-resource
for your project already, insert it after importing ionic.bundle.js
file:
```
```
NB: We need angular-resource
as it is a giphy-keyboard
's dependency.
2 - Copy the giphy-keyboard
directory inside /www/lib/
. You'll now have access to /www/lib/giphy-keyboard/giphy-keyboard.css
and /www/lib/giphy-keyboard/giphy-keyboard.js
files.
3 - Insert giphy-keyboard.js
before loading your app.js
file.
```
```
4 - Insert giphy-keyboard.css
(and eventually edit it), inside the head
tag. I'd personnaly recommend this configuration:
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="lib/giphy-keyboard/giphy-keyboard.css" rel="stylesheet">
5 - Inject giphyKeyboard
dependency inside your application module:
angular.module('myApplication', ['ionic', 'giphyKeyboard'])
You're now ready to use the giphy-keyboard
magic!
giphy-keyboard
brings you now one ready-to-use <giphy-keyboard>
tag, and a Giphy
service inside your controllers to interact with the plugin!
For an application example, simply refer to this archive /demo
directory (js/app.js
and index.html
are the only files you'll need to give a look at). The minimum JavaScript code necessary to run this can be found inside the HomeCtrl
.
If you want to make it live, copy/paste the /demo/www
directory and replace your www
directory inside your project with these files (or execute $ ionic start giphy-keyboard-test
then do the same replacing operation with the new www
directory just created).