Auto-Matic-Marketing

How to add your inventory to Facebook

There are a few steps to adding inventory to Facebook. The video covers all the steps from beginning to end. Once you have gone through the video, we have added animated gifs below so you can get through the steps quickly.

NOTE: This tutorial assumes that you are using the Auto-Matic-Marketing Dealer Network. If you are using your own hosting it will be up to you to add the https certificate for the shortcode page.

Create inventory shortcode page
Generate a Facebook App
Add Platform Type & Add inventory URL
Assign App to your Page

Step 1: Create inventory shortcode page

You first need to determine what you want to display in the Facebook page. All of the inventory for a single dealer? Maybe just a selection of inventory that the dealer has marked as special? How about all of the inventory on your portal website?

Using the CarDealerPress 'inventory_detail' shortcode. Filter the data that you want to display on the page.

If you need a refresher on how the CarDealerPress shortcodes work, checkout this article.

NOTE: Make sure and change the 'form_id' to be the correct GravityForm ID that you wish to use.

After adding your shortcode, make sure that the page type is 'Landing'. This removes the header and footer from the page. You will also want to hide the page title and adjust your colors with some CSS.

Step 2: Create a Facebook App

Make sure and be logged into Facebook for the account you want to add the tab to. If you are using Facebook's Business Manager then you will need to gain access to your clients account.

Go to: https://developers.facebook.com/apps

Step 3: Add Platform Type - Page Tab. Insert Inventory

Now that you have created a Facebook App, you need to give it the 'Platform Type' of Page Tab. Insert your secure page URL that has the inventory. Then add an icon, this icon will need to be 111 x 74 pixels exactly.

Step 4: Assign your App to the desired page

If you use Facebook Business Manager you will eventually have multiple apps and access to multiple dealer Facebook Pages, so make sure and name these so you know what they are later.

CSS to change inventory colors

/* OVERRIDES */
header.entry-header {
display: none;
}

input, select, textarea {
background-color: #fff;
border: 1px solid #ddd;
color: #000;
font-size: 17px !important;
font-weight: 400;
padding: 16px;
width: 100%;
}
/* END */

/* COLOR CHANGE TO FACEBOOK BLUE*/

/* Dropdown background */
#sc-detail-search-container {
background-color: #365899 !important;
}

/* 'Show Details' & 'Request Info' buttons */
.sc-detail-button {
background-color: #365899 !important;
}
.sc-detail-button:hover {
color: #FFF !important;
border-color: #000 !important;
}
.sc-detail-item:hover {
border-color: #365899 !important;
}
/* End */

/* Price text */
.sc-detail-main-price {
color: #981E2A !important;
font-size: 170% !important;
}

/* Vehicle details border */
.sc-detail-bottom-container.active {
border: 2px solid #365899 !important;
}

/* Information button graphic */
.bottom-button.active {
background-color: #365899 !important;
}

/* 'Comments' & 'Dealer Options' tab backgrounds */
.bottom-tab-buttons-wrapper .tab-button.active {
background-color: #365899 !important;
}

/* Thumbnail (image) border */
.sc-detail-photo-container a {
border: 2px solid #365899 !important;
}

/* Form border */
.list-form-wrapper {
border: 2px solid #365899 !important;
}

/* END */