From Lacoste to Puma, animal logos are quite popular. The great variety that can be accomplished by using different types of animals, different colors and so on, makes this a very fun and creative side-niche in logo design. This time we’ve hand-picked 75 of the coolest ones we found over at Logopond. We hope these can amaze and inspire!

Animal logos are more than just picking an animal and a color. Many of these will show you that the designers have been thinking of many different aspects, and also some times implemented the animal in a great way to make it fit in with the font and/or the message.

Enjoy!

1. Albino Rhino

2. BowesPigs

3. Creative dog

4. Pixie studio

5. Toadprint

6. Tuscan style

7. Lee Jackson

8. El-paca

9. Dent cats

10. Rocket dog

11. Redibex

12. Elephant talk

13. Wicked elephant

14. Monkey business

15. Shleep

16. smArtfox

17. Spear nose

18. Xerxes

19. Girafrica

20. Rhino life

21. Sketchy cat creative

22. Jaguar ecological reserve

23. BrainTrust

24. Koloroo

25. Spots

26. Elephruit

27. Snuffsta

28. Brokers

29. Burnt finger BBQ

30. Telezoo

31. Boswick

32. Okapi

33. Xerxes

34. Timberwolves

35. Wyldlyfe

36. Texas longhorns

37. Chihuahua

38. Scared client

39. Volos

40. MonKey

41. IronHorse

42. Wool online

43. Pacer

44. Cowbra

45. Rusty T Ranch

46. Giraffe

47. Bluegiraffee

48. EvolutionNet

49. Literate frog

50. Pandabanda

51. Toro

52. Office pet

53. PaperFox

54. Serdar Aslan

55. Fricker

56. Nahlik

57. Kamaq

58. Deer valley

59. Giraffeo

60. White pony

61. Hedgehog solutions

62. eQuest

63. Heather Mulholland

64. AM studio

65. Kenya

66. Cultures east

67. Someday

68. FundRival

69. Al-Kaabi

70. Juiced

71. Cheetah

72. Lion Bird

73. Stingmaster

74. PunchyTime

75. Kodiak

Those were our picks this time. We hope you’ve enjoyed the selection!

We’d also love to hear your comments; tell us which is your favorite – or share other logos that you think we should have included in this collection.

And don’t forget to share this article if you liked it. Thanks!

The Facebook JavaScript SDK, the one we will be using for our app, enables us to access all of the features of the Graph API via JavaScript, and it provides a rich set of features like authentication and sharing. In this tutorial I'll show you how to use this SDK in your site. I'll show you how to add some features to an application we built-in my previous tutorials, the distance finder (part1 of the tutorial, part2). As you might remember, we've also added twitter @anywhere features to the app (the tutorial), now it's time to add Facebook as well!

What are we going to build?

We already have a distance finder, an app the uses the google maps api to find the distance and route between two locations. The results of the search can be shared on twitter. In this tutorial, I'll show you how to share your results on Facebook!

You can check out the demo here, and also download the source code.

Prerequisites

To be able to use the Facebook JavaScript SDK, we will need an application ID. To get one, we have to register a new app. We can do this here. We will need to fill in the following info correctly to be able to use our new app:

• in the 'website' tab, at 'site url' we must write the url where the app will be stored
• in the 'facebook integration' tab, we must fill in 'Canvas URL', also our app's url

A Facebook page will be generated for our app, here it is. We can personalize that by adding a description, a photo, etc.

When a user will post on his wall from an app, Facebook will write the name of the app which was used to post that message. When someone clicks on that link, they will be sent to the app's page.

Our app's page will also have a 'Like' button, if people click it, we will know who liked our app. I will also show you how to add a similar like button on the site, a button that will be connected to our app's Facebook page.

Changes to the previous version of our app

In this tutorial I will only explain the Facebook related changes we made to our app. If you have questions regarding the rest of the code, check out the previous tutorials or drop me a message.

Including the script

To use the JavaScript Facebook SDK, we will first have to load the SDK in our site. We will do this asynchronously so it does not block loading other elements of our site. We have to add the following code after the tag:

 <div id="fb-root"></div> <script type="text/<span class="><!--mce:0--></script> window.fbAsyncInit = function() {    FB.init({appId: 'ADD_APP_ID_HERE', status: true, cookie: true, xfbml: true}); }; (function() {    var e = document.createElement('script');    e.type = 'text/javascript';    e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';    e.async = true;    document.getElementById('fb-root').appendChild(e); }()); </script> 

Don't forget to fill in the API key!

What are we going to do with the script?

We are going to give our users to possibility to login to Facebook directly from our app and post their search results there.

We will first add a Facebook login button. Here's the code from Facebook to add such a button:

 <fb:login-button autologoutlink='true'  perms='email,user_birthday,status_update,publish_stream'></fb:login-button> 

We will then have to register the login and logout events and also add a function to check if the user is logged in (when someone visits our site). We will add the following lines to the fbAsyncInit function:

 FB.Event.subscribe('auth.login', function(response) {    login(); }); FB.Event.subscribe('auth.logout', function(response) {    logout(); }); FB.getLoginStatus(function(response) {    if (response.session) {       greet();    } }); 

We have added an event for when a user logs in the Facebook from our app, when they do, the login() function will be called.

When the user logs out, we'll call the logout() function.

We've also added a function for checking the user status: getLoginStatus(). This will be called when the SDK is loaded, to check if the user is already logged in their Facebook account. The text on the Facebook button we added will change from "Login" to "Facebook logout" according to the user's status. The greet() function will be called when the user is already logged in. Let's see how the login (), logout() and greet() functions look like:

 function login(){    FB.api('/me', function(response) {       alert('You have successfully logged in, '+response.name+"!");    }); } function logout(){    alert('You have successfully logged out!'); } function greet(){    FB.api('/me', function(response) {       alert('Welcome, '+response.name+"!");    }); } 

The login function saves the user's name from the response it got from facebook and displays a message on the screen. The logout and greet button are also just used to show messages on the screen.

After adding these, our user will be able to log in to their facebook account directly from our app! If the user is logged in their facebook account when they visit our app, they will be greeted.

Now let's see how to help them share their search results!

Adding the share box

We will add a comment box similar to the one added for twitter, next to that one.

In the continueShowRoute() function we will add some more code, to also add a facebook comment box to our 'share' div:

 var twitter = "<div class='comments' style='display: inline-block;'></div>"; var facebook = ""; document.getElementById("share").innerHTML = twitter+" "+facebook; 

As you remember, we used the share_twitter() function to create the link to share and show the comment box with the message. We will be adding there the code to also show the facebook box.

var code = "<span style="font-size: large;">Share with your facebook friends!</span>"; code += "  <input id="status" size="60" type="text" value=" My search on <span class=&quot;hiddenSpellError&quot; pre=&quot;on &quot;>distancefinder</span>: &quot;+response+&quot;" />"; code += "<br/><a href='#' onclick='setStatus(); return false;'>Share!</a>"; document.getElementById('facebook').innerHTML = code; 

The facebook box will have an input field with the text and link to be shared and a 'Share!' link. As you can see, when the users click on the 'Share!' link, the setStatus() function will be called. Let's see what it does:

 function setStatus(){    // check if user is logged in:    FB.getLoginStatus(function(response) {       if (response.session) {          new_status = document.getElementById('status').value;          FB.api(          {             method: 'status.set',             status: new_status          },          function(response) {             if (response == 0){                alert('Your facebook status was not updated.');             }             else{                alert('Your facebook status was updated');             }          }      );      } else {         alert('please log in first :)');      }    }); } 

It first checks if the user is logged in. For this, it uses the getLoginStatus() function from the javascript SDK. If the user is not logged in, we'll show a message informing them that they must login in order to share the search results.

If the user is logged in, we get the message to share from the input field called 'status', and use the status.set method from the SDK to set the user's status to the new value. After setting the status, we will show a message to the user.

And that's it! Our users can now share their search results on facebook!

Adding the 'Like' box

You might have noticed there's a like box in our app, below the map. It shows the users that have liked our facebook app. To add one of those, all you have to do is go to the app profile page, at the "get started" tab. There you will find a link to create a like box. You can choose some options for your box and facebook will generate the code for you. The code for the box from our app looks like this:

 <fb:like-box profile_id="APP_ID_IS_HERE" stream="false" header="false"></fb:like-box> 

It really simple, isn't it?

I hope you enjoyed this tutorial and don't hesitate to ask if you have any questions.

Warning

This might not work well with internet explorer. I’ve tested with chrome, firefox and opera and it works great on those!