Linking a Website to Facebook With an Icon

Facebook helps you promote your content and engage friends and fans on a regular basis; if you're not linking your website visitors to your Facebook page, you're missing an opportunity to generate more involvement or drum up more business. To link to your Facebook page from your website, you can use either Facebook's social plugins or a basic HTML link with a Facebook or other icon.

Facebook offers several social media plugins that integrate your Facebook page into your website. These social plugins include (but are not limited to) a Like button, a Follow button and several plugins for sharing content. These plugins, available on the Facebook Developers page, allow visitors to interact with Facebook without leaving your website. Once you've filled in the relevant details -- such as the URL of your Facebook page -- post the generated code into the right spot on your website. Many site owners choose to add social items to the sidebar or somewhere prominent in the header, but what works best varies depending on the site layout.

If you don't want to use Facebook's official social plugins, it's simple to use an icon and create a link to your Facebook page. This method gives you a bit more freedom; if you want to link to other social media services as well (such as Twitter or Instagram), you can choose a set of social media icons that match your websites. Another benefit of using icons with links is that they won’t slow down page load times like social plugins can. On the other hand, images don't offer the dynamic options of the social plugins. If you choose to go with icons, see the Mashable and Vandelay links in Resources for examples.

If you're planning to use a social media icon, you must know two basic bits of HTML coding: the link tag and the image tag. The basic HTML code for creating an image that links to your Facebook page would look something like this:

<a href="http://www.facebook.com/yourawesomepage"><img src="http://www.yoursite.com/images/facebook.png" alt="Facebook Social Icon"></a>

The "href" attribute of the a tag refers to your Facebook page's URL. The "src" attribute of the img tag refers to the URL of your social media icon. Img tags must include descriptive text for an image, using the "alt" attribute. If you're unsure of how to use image links, see the W3School tutorial links in Resources for further information.

Whether you use a social media icon or a social plugin, you need to include Facebook's open graph tags in your website's metadata to ensure the best possible results. These tags make sure that the right information (photos, names and descriptions, for instance) is presented when users share links to your website on Facebook. The Facebook “Using Self-Hosted Objects” page provides more information (see link in Resources).