Web Components

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:

Facebook metadata

When a visitor browses a website and shares a page on Facebook, the social network fetches the page and looks for various metadata (title, description...) to show the page to the visitor's FB friends.

Favicon and related icons

The favicon is that small icon to the left of the page title in browsers tabs. Although they are not called "favicon", there are other icons such as the one used when a visitor adds a page to the home screen on his Android phone, or the icon that appears in the Touch Bar of the recent MacBook Pro.

The problem

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.

We can help

Creating a compelling editor is a tedious task. You need to:

• Provide a comprehensive UI to your users
• Provide live feedback so your user can design their icons and understand how they will look like
• Build preview images so anytime your users can find out how their icons look like
• Implement not-that-obvious image manipulation. No, it's not only a matter of scaling down an image
• Reverse engineer the Facebook algorithm which present shared pages in its newsfeed (no, this is not documented).
• ...

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.

The components

Our components, your User Experience

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.

Facebook

Favicon

Transparent API

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.

User feedback

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.

Tutorial

Get an API key

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.

Set up the component

Get the demo

To use the component demo, clone the demo project and open index.html.

How it works

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.

Generate the image and code

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).

Beta registration

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.