Lovely Logos & Pretty Profile Pics

Introduction

Contacts. Almost every FileMaker solution has them. Contacts can be people, companies, suppliers, friends or colleagues, and the list goes on. Almost every Claris FileMaker developer who has been in the game for more than 5 minutes has most likely built a solution that contains contacts.

In terms of database sexiness, contacts can be pretty boring. They usually have a name, phone number, email address, website for starters. Where's the pizzaz, the bounce, the pop?

Contacts can be spiced up by adding a bit of imagery to help represent them. This can come in the form of a company logo, or a profile picture (if our contact is a person).

In fact, a lot of CRM solutions will have the ability to upload a picture of the contact, but let's be honest, how many people actually do this?  All too often you see a silhouette where a picture should be.

What can we do about this?

Fortunately we live in the age of the API. A lot of the time API's are thought of as boring text input/output tools: pass an API a request, and get a bunch of JSON data back. But not all API's are so textual. There are hundreds of awesome design based API's out there for image manipulation and retrieval.

We're going to pick a select bunch for this article that specialise in returning either a company logo from a website URL, or a user profile picture using a supplied email address.

Note that for specific code examples and content, we encourage you to download the example file at the end of this article - there you will find everything we discuss in the article and it is completely unlocked for you to explore and learn.

Company Logo Retrieval using Clearbit

For company logo retrieval we use the ClearBit Company Logo API.  This is a free API and will return the logo for any website, providing that website has used the Open Graph meta-tags og:image or og:logo as part of their page metadata. ClearBit will cache these images and serve them up super-fast to you via CDN.

Making the API call couldn't be simpler as it is a straightforward get request:

https://logo.clearbit.com/DOMAIN

where DOMAIN is the websites domain name. That's it!  You can also specify the size or format you wish to have returned by using some additional parameters, or specify whether you wish the image to be greyscale, e.g.

https://logo.clearbit.com/filemakerhacks.com?size=512&format=png&greyscale=false

Most websites you'll find have this meta-tag provided because it is the image that is used by various social media networks when a post is made linking to that website.

ClearBit also has other APIs that they offer (both free and paid) to retrieve even more information about a company or person using their website URL or email address. If you wanted to supercharge your CRM you could utilise these APIs to attempt to auto-complete a bunch of information about your contacts - how cool would that be!

Profile Picture Retrieval using Gravatar (and others)

Profile pictures of people - while likely far more common than company logos online - are actually a little harder to obtain.  You'd think with everybody having profiles in facebook, linkedin, instagram, twitter etc, that these would be easy to get. But these images are largely protected from API's gaining access and unless you know specific profile usernames, they cannot be readily retrieved using information such as an email address.

This is where Gravatar comes in handy.  Gravatar is a service created by wordpress where users can sign up for an account and create a globally recognised avatar and profile. These can then be used on sites that support gravatar, without the need for recreating your profile across multiple sites.

While Gravatar is getting more popular, it has not had huge uptake and for that reason it can be a little hit and miss getting a profile picture from it.

Fortunately for us though the Gravatar API is free to use, and so use it we shall.

https://www.gravatar.com/avatar/HASH

This is the basic GET request to obtain a profile picture.  HASH is actually the MD5 hash of an email address. We can easily calculate the MD5 hash in Claris FileMaker using the GetContainerAttribute function. Here is how I would get my email address as MD5:

GetContainerAttribute ( Lower ( "daniel@teamdf.com" ) ; "MD5" )

Somewhat odd that we use a container function, but this works fine on text also.

Gravatar can accept size parameters also. It can even generate for you a unique avatar using one of 8 different generators if a profile picture cannot be found.

Gravatar is also able to retrieve profile information for an email address, and we have utilised this in our example file to extract usernames of profiles also as a nice added bonus.

Additional APIs for Retrieval

If Gravatar or ClearBit cannot retrieve the correct image, there is a possibility one of these two other APIs can do it: AvatarAPI and Libravatar.

AvatarAPI queries google profiles to retrieve a profile picture based on email address. It works best with gmail addresses but can work for others if the user has established a google profile using a non-gmail address.

Libravatar is a similar service to Gravatar in that you sign up for an account and add your avatar & profile, which can then be served up to other websites that wish to utilise the service to populate profile information.

Both of these APIs have been integrated into our example as fallbacks in the event Gravatar is unable to successfully retrieve a profile picture.

Removing Backgrounds from Images

Just cos APIs are so cool we thought we would throw in this little gem. Let's say you receive a company logo or profile picture which has an annoying, distracting or otherwise offensive background? Wouldn't it be nice to get rid of that? 

Well, there are APIs for that too! In fact there are quite a number of APIs providing this service. Out of all of them, most will cost you per removal (around 1-4 cents on average).

In order to illustrate the removal however we have used in our example file two free APIs - each come with restrictions on using the free service but the point here is to show that this is achievable and what the results can look like.

The two free APIs we have explored are Imagezerow and PixMiller.

The APIs' use machine learning and are pretty darn good at knowing what to remove, as demonstrated by Mini-Weet above.  Images are returned with transparent background which is perfect for you to then provide your own desired background colors. (perhaps you could combine this with some techniques in our previous article for background colors!).

Still Can't Find an Image for Your Contact?

Fear not. Just because API's may not be able to locate an actual logo or profile picture, this doesn't mean you need to present the contact with bland text. There are heaps of other Avatar generating APIs out there that can produce a nice unique image for your contacts.

In our elemental_ux solution we have over 20 different avatar generating APIs, all with working examples - you just need to copy/paste the script you want and specify your parameters.

Here at Digital Fusion we utilise avatars along with profile pictures and logos to produce a rich contact experience:

All contacts are generated an avatar via API. We use the UI-Avatars.com API (which can also be found in elemental_ux) to achieve this. In addition we also utilise the above APIs for logo and profile picture retrieval.

Logos and profile pictures can often be inconsistent in their size and ratio and so aren't suitable for display in portals and lists. This is where the consistently sized avatar is perfect.

The logos are used only in a large container space where ratio is not an issue. For years we struggled trying to display logos beside a company name nicely, before biting the bullet and going with avatars instead - and we have never looked back!

Example File

What FileMaker Weetbicks article wouldn't be complete without an example file? All the main APIs featured in this article have been integrated into our example file so you can copy and use in your own solutions. We hope you enjoy it. 

Click here to download the example file

We love feedback so please leave a comment if you have anything to say - even if you don't it would be nice to hear from you :)