For CMS Plugin Editors and Website Builder Editors
A the editor of a CMS plugin or a web suite builder, you let your users design their own websites, blogs or online stores. They can make a choice among many themes, create pages, link their site to their analytics system...
Among all the aspects that need to be addressed, two are always overlooked:
All platforms support these two topics. A favicon.ico
is created.
A title is provided. However, this support is always minimalist, well behind
what website designers are entitled to expect nowadays.
What your users have | What your users deserve | |
---|---|---|
Basic Facebook metadata | ||
Advanced Facebook metadata | ||
Image to illustrate the shared page | ||
Image width and height | ||
Image complies to Facebook requirements | ||
Manual image resizing and cropping | ||
Enforce page sharing format | ||
Live preview |
What your users have | What your users deserve | |
---|---|---|
Favicon for desktop browsers | ||
Favicon for iPhone & iPad | ||
Favicon for Android | ||
Favicon for Windows 10 | ||
Favicon for Mac OS | ||
Icon designed platform-per-platform | ||
Live preview | ||
Permanent preview |
Creating a compelling editor is a tedious task. You need to:
RealFaviconGenerator already did the hard work by implementing the ultimate favicon generator. Good news: your users can benefit from the same experience and features.
You can embed RealFaviconGenerator's components in your own website builder solution and customize it to offer your users the ultimate, seemless experience they deserve.
As a website builder editor, you already provide a consistent experience to your users. This UX relies on a UI and techologies you have chosen with care.
RealFaviconGenerator provides the components and sample code you need to easily create the favicon builder that suits your existing solution.
The favicon generation itself is triggered by a simple JavaScript call and performed by our infrastuctures. No complex image manipulation for you.
When it's done, you receive the files and HTML code you will inject in the built website pages.
In addition to the favicon material itself, you get sample screenshots showing how the generated images look like on iOS, Android and others. You can present them to your users as a reference.
Components are still under development. Although the overall API should not change much, some non-backward compatible changes might occur.
If you want to be notified when the components become production-ready, please subscribe to the mailing list.
In order to build the full solution, including the actual image and code generation, you need an API key. However, if you only want to see the editor in action, you can skip this step.
To use the component demo, clone the demo project
and open index.html
.
The following scripts must be loaded, preferably at the bottom of the page:
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://realfavicongenerator.net/web-components/js/core.min.js"></script>
<script src="https://realfavicongenerator.net/web-components/js/facebook.min.js"></script>
The editor itself can be initialized via a simple line:
var fb = new RFGFacebook({
element: $('#facebook-editor'),
master_image_src: 'sky.jpg',
format: 'wide',
title: 'Default title',
description: 'Default description',
url: 'http://www.example.com/a_page'
});
The rest of the code is about creating the surrounding UI. Most likely,
a form where the user can type the post title and description, etc.
Look at index.html
in the demonstration for an example.
Once the user has designed his Facebook metadata and image, the final picture and markups must be generated. This is done with the help of RealFaviconGenerator API, which handles all the nitty gritties:
var request = fb.getApiRequest();
It is up to you to get this request server-side, where you will be able to run it, handle the response and store the generated markups and image. You can achieve this with an Ajax call or a classic form hidden field.
Server-side, you will want to inject your own RFG API key. You can do
this by searching RealFaviconGenerator_API_KEY_Placeholder
in the request and replace it with your API key.
Once the request is ready, post it to https://api.realfavicongenerator.net/v1/social
and
handle the response (ie. store the HTML fragment and generated image).
This feature is still under development. If you are interested, please fill the form below. We will drop you an email as soon as it is ready.
Of course, you can unsubscribe anytime. And you will receive only emails about web components.