Adding a Find Us on Facebook Icon to a Web Page

Adding a Find Us on Facebook Icon to a Web Page
Page content

As websites become more socially focused, more and more of them have links to social networking and bookmarking services, such as Facebook, Twitter, Digg and many others.

Whether your web page has its own community or not, you might consider adding a page on Facebook into the mix, enabling you to position your website as an entity that can be interacted with.

There are considerable benefits to this. If your website has a growing community developing around it, you might like to let them know that you have a Facebook presence. A “Find us on Facebook” icon would be ideal to let your visitors know where to contact you on Facebook, and by extension, any interactions they make with your page will be communicated to their friends, giving you some useful publicity!

Finding a Suitable Icon

Before you can start adding an icon, you need to find one. This might prove difficult – while the most obvious place to find one might be Facebook itself, they provide Like and Recommend buttons only.

Instead, third-party web sites must be used to source a Find us on Facebook icon, unless you have the resources to have a custom icon created.

There are many examples of such an icon available for download from various image repositories online. One such website is which provides a selection of four high-resolution icons that should prove useful.

All you need to do is download the icons, unzip the contents of the folder and then upload the icon of your choice to the images folder on your webpage.

Providing Code for a Find Us on Facebook Icon

In addition to an icon you will also require suitable code – otherwise you’ll just be displaying a suggestion to your readers, rather than enticing them to perform the action of clicking the icon.

As such you will need to add the correct code to accompany the icon in order to make it “clickable”, and this can easily be done as follows:

<a href=”” target=“_blank”>

In the above example you will see some bold type – these sections of the linking markup need replacing with your specific instructions.

To find your Facebook profile ID, open the Facebook page you are linking to and look at the browse address bar. For instance in this Facebook URL:!/profile.php?id=5066271574

…the numbers 5066271574 should replace PROFILEID.

Positioning Facebook Icon Shortcuts

In order to place your Find us on Facebook icon correctly, you should add the code into your HTML page with the appropriate additional HTML such as a set of tags which can then be manipulated in the CSS.

The instructions above are intended mainly for a static website, although they might also be used in the sidebar of a popular blog application such as WordPress or Blogger.

For instance the Find Me On plugin for WordPress will enable the above process to be largely automated, requiring only the URL of your Facebook page; no such tool is available for Blogger, although the above code can be pasted into a HTML/JavaScript gadget in Dashboard > Design > Add a Gadget.

Meanwhile if your website or blog is more personal, you might opt for a Follow Me on Facebook button.



Image credit: Fourten Creative,