4 Easy Ways to Add Your Facebook Pixel to Your Website

Business + Marketing, Facebook Ads

April 13, 2017

4 Easy Ways to Add Your Facebook Pixel to Your Website

We are firm believers that Facebook is one of the best big data companies in the world.

And as much as we love unplugging and encourage everyone to scroll a little less, we also know how powerful Facebook (and social media) is when it comes to growing your business.

After working with dozens of entrepreneurs over the past few years and we can honestly say that advertising on Facebook is one of the best ways to strategically grow your business online.

Whether you are looking to build a local presence, drive foot traffic to your brick-and-mortar store, promote a new sale or event, or increase the number of inquiries for your services, Facebook is our go-to solution.

We’ve seen it work over and over again not just for ourselves but for all of our clients in a wide range of industries.

Point being: Facebook ads can work for you too.

We could go into lots of details on why we love Facebook ads, but for the sake of not making this post crazy long, I’d encourage you to download our Facebook Ads Bible. It’s a 22-page guide that walks you through everything you need to know to get started!

The Importance of the Facebook Pixel

If you are running Facebook ads and you are not using your Facebook Pixel, you are missing out on an enormous opportunity.

We cannot stress this enough: your Facebook Pixel is your secret weapon when it comes to advertising4 easy ways to add your facebook pixel to your website

Your Facebook Pixel allows you to create custom audiences for targeting, run dynamic ads for products and pages, track conversions, and optimize for your ideal customers.

And yet as powerful as this tool is, so many of our clients were running ads for months or years without ever putting it to use.

Today, we want to make sure you don’t make that same mistake.

We’re breaking it down and sharing 4 easy ways for you to add your Facebook Pixel to your website (and start putting it to work!).

Creating Your Facebook Pixel

Before you can add your Pixel to your website, you need to create your Pixel. If you already have a Pixel, you’re ahead of the game + you can scroll down to the next section!

First, go to your Ad Account. From the dropdown menu on the top left-hand side, click on the Pixels menu.

Find your facebook pixel

If you have never used a Pixel before, you will need to create one. Your screen should look like the one below.

Creating a facebook pixel

Click on the green “Create a Pixel” Button. You will now need to name your pixel and agree to Facebook’s Terms of Service.

Creating Facebook Pixel - name your pixel-compressed

Once the Pixel has been successfully created, you can start to install it on your website.

facebook pixel setup

installing facebook pixel

Finding Your Facebook Pixel in Your Ad Account

If you already have a Facebook Pixel created, you can go to the Pixels menu of your ad account.

Click on Set Up Pixel and Copy and Paste the Code.

View Pixel Code from ad account

 

You will see your code in section 1.2. I’ve covered our unique Pixel ID in the screenshot below, but yours will be highlighted in blue in the code. You will need to copy this entire code.

copy and paste facebook pixel code-compressed (1)

Now that you’ve created and/or found your Pixel code, you’re ready to install it on your website.

We’re going to share 4 of the most popular + easiest solutions below, but if you have a questions as you work through it, feel free to leave a comment below and we’ll do our best to help 🙂

1. Adding Your Facebook Pixel to Your WordPress Code

We love WordPress. It’s the only platform we ever recommend and the one we build all of our client’s websites on.

If you want to learn more, we wrote an entire article about how to build your own website on WordPress (without breaking the bank or pulling your hair out)!

For those who already have a WordPress site and are comfortable with code, this option could be for you. If the words “code” or “html” make you cringe, see the next option below.

Essentially, to install your pixel on your WordPress site with code, you want to enter in the Pixel Code in your website’s theme. Since there are so many themes to choose from, it’s going to differ a lot depending on what theme you use.

Many themes give you a space to enter code before the closing HEAD tag of your template. This is where you want to enter your Facebook pixel code. By installing it this way, the code will appear on every page of your website.

You can usually find this option in your theme settings, often time under a Header/Footer option.

If you are comfortable editing your theme file itself (not recommended) you can go to your Dashboard and under Appearance click Editor. There you can edit the code itself for your theme and insert your pixel before the </head>.

2. Adding Your Facebook Pixel to Your WordPress Site with a Plugin

This is usually the way we recommend our clients to add their pixels (and our personal preference).

If your website is built on WordPress, then you are probably familiar with using plugins. There are a few that we have used and would recommend for installing your pixel:

Tracking Code Manager Plugin

Tracking Code Manager is the plugin we currently have running on QFYC and it’s been the perfect solution for us. You can not only add in your Facebook Pixel, but you can add in other pixels for things like your Google Analytics or affiliate accounts.

Once you install and activate the plugin, go to the settings. Click “Add New Tracking Code”

You will then check off the “Active” Box, name your pixel (we recommend keeping it simple, so “Facebook Pixel” will do!) and then pasting the code you copied from Facebook into the grey box.

Tracking Code Plugin

You have some additional options below.

Make sure that you choose “Before </HEAD>” as the position for your code. We recommended showing the code on all devices and placing it on the entire website.

Facebook Plugin Tracking Code Manager Settings

 

Facebook Conversion Pixel Plugin

We’ve used the Facebook Conversion Pixel plugin for many of our clients. It’s worked great, and it’s super easy to add in the code and choose which posts or pages you want to be pixeled.

Once you install and activate the plugin, you can choose the type of settings/pages you’d like the option to add in your Facebook pixel. From your Dashboard, you will find the Facebook Conversion Pixel settings under Settings.

facebook conversion pixel settings

Once you check off the options you want to enable, you can go to the post or page that you want your pixel to be active on.

The main difference between this plugin and the first one is that the Facebook Conversion Pixel plugin requires you to enter the pixel on each and every page or post you want it to be active on.

For instance, say you have a blog post that you are running traffic to and you want to be able to track visitor traffic. When you are editing the post in WordPress, you can scroll to below the editor and you will see the Facebook Conversion Pixel plugin options. Simply check off the box and enter your Facebook Pixel code below.

Facebook Conversion Pixel Plugin enable

 

3. Adding Your Facebook Pixel to Your Shopify Website

While Shopify isn’t our go-to solution as web designers, we know it’s a very popular option for entrepreneurs who want to be able to build their own sites without knowing any code.

Shopify also make it very easy to add in your Facebook pixel. When you’re logged into your store, you will want to go to your Settings and then click Online Store. Then click on the Preferences menu item and scroll down to the Facebook Pixel section.

You will then enter your Pixel ID into the box for your Facebook Pixel.

Adding Facebook Pixel to Shopify

**The key here is to enter in only your Pixel ID and not the entire pixel! As we mentioned above, the Pixel ID is the longer number that is highlighted in blue when you are copying from Facebook.

Since Facebook copies the entire code, you will just want to paste it in a note or word doc and then copy only the Pixel ID for the Shopify option.

4. Adding Your Facebook Pixel to Your Squarespace Website

When you log in to your Squarespace site, click on Settings and navigate to the Advanced option under the Website menu.

From the Advanced menu, click on Code Injection and paste your entire Pixel code under the Header section.

adding facebook pixel to squarespace site

Other Ways to Add Your Facebook Pixel

There are, of course, many other options for your website, which means there are other ways to add in your Facebook Pixel to that site. Most options should allow for you to enter in your Pixel whether through a settings option or by manually entering the code before the closing </HEAD> tag.

If your website was custom built and you cannot edit the code (or do not feel comfortable doing so), we’d recommend asking your web developer to add in the code for you. It’s a very simple process and shouldn’t require too much time (so please don’t pay an arm and a leg for the help!).

How to Check if Your Facebook Pixel is Firing

Last but not least, we want to make sure your Pixel was added correctly and is active on your website.

If you use Chrome, it’s super easy to do this with the Facebook Pixel Helper extension.

Once you enable this extension, you can pull up your website (or any website for that matter) and check to see if there is an active Facebook Pixel.

Facebook Pixel Helpder extension

You can see the blue icon “</>” with a green number. This means your Pixel is active! If you click on the button it will confirm that your Facebook Pixel is active along with any settings you have for the Pixel, like tracking custom events.


Now it’s your turn.

If you own a business, you need a website. And if you drive traffic to that website (which we hope you do!), then you need to have your Facebook Pixel on it.

Which method works best for you? Do you have any other plugins or options that you love?