[Tutorial] Show Your Trending Products On Your Facebook Page

This tutorial will show you all the steps needed to add trending products powered by AddShoppers Discovery Wall app. It's a great way to add products to your Facebook Page and drive people back to your eCommerce site. There's no need to manually update, add, or remove products -- it's all automatically powered by AddShoppers!

Check out a live example here, then put one on your own site using the quick instructions below!

*Important - Some pre-requisites:

  • You will need access to modify/edit your Facebook page.
  • Install this app in Facebook: https://apps.facebook.com/static_html_plus/
  • You need a free AddShoppers account.
  • You need to install AddShoppers Social Analytic and Sharing Buttons. If you haven't yet installed these 2 things, find instructions for your platform here.

Step 1.

  • Go to your Facebook page (typically http://www.facebook.com/yourCompanyName) and find your "Favorites" tiles on the page and click the little down facing arrow. Then, click on the + icon on one of the blank tiles to add a new page.

Step 2.

  • Select "static HTML - iframe for Pages" .
  • Then click on the newly created page.

Step 3.

  • Click on the "edit tab" button at the top of the page.

Step 4.

  • A. Paste this code into the content box: <div id="AddShoppersWall"></div>
  • B. Copy and paste your AddShoppers Social Analytics code right after the code above. You can get this code in your AddShoppers dashboard under Apps > Measure > Social Analytics.

Once you've added the 2 code snippets, you should have something like this:

Step 5.

  • Facebook requires all links to open in a new tab so paste this code underneath the code you just added in step 4 and click "save & publish":
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
window.setInterval(function(){
newwin();
}, 1000);

function newwin(){
$('a').attr("target","_blank");
}
</script>

Once you're done, add the URL to your Facebook page in the comments so we can see your Facebook Trending Wall!

FAQ

There are no products in my Discovery Wall.

If you have recently installed AddShoppers, you won't have many (or no) products in your Discovery Wall. It takes some time to populate your Discovery Wall with products because products are only added when they are shared. (That's why it's a social trending page).

How do I customize the colors or sorting order on my Discovery Wall?

You need an AddShoppers Pro account in order to customize your Discovery Wall. Once you're Pro, you can customize:

  • Sorting order (Most Shared or Last Shared)
  • Column width
  • Background color
  • Font
  • Individual item background/border color
  • Show/Hide product name, price, description, stock status, and/or share count.