To embed LiftIgniter recommendations in Facebook Instant Pages all of the elements of the widget must be included within <figure> and <iframe> tags

<figure class="op-interactive">
<iframe class="no-margin">

... Widget Code...

</iframe>
</figure>

This allows our code to fetch and render recommendations. However, it is currently not possible to track recommendation performance via LiftIgniter's $p("track") function in Instant Articles.

Widget Code

The code here is a very simplified sample. You will want to customize it with the following:

1) A modified template containing placeholders for all of the fields you will want to display in the recommendations and the CSS classes and styling which should be applied to them. By default we will return the URL, title, and image for the item. You can use $p("setRequestFields") to include any additional fields available for your inventory items. (See this article for more information on returning additional fields).

2) Your own account's JS key. The key included in the sample below (f7tsbsle43k5irci) is for demonstration only. To use with your own account, be sure to add your own key in lines 13 and 15.

<figure class="op-interactive">
<iframe class="no-margin">
<script>
        (function(w,d,s,p,v,e,r) {w['$igniter_var']=v;w[v]=w[v]||function(){(w[v].q=w[v].q||[]).push(
        arguments)};w[v].l=1*new Date();e=d.createElement(s),r=d.getElementsByTagName(s)[0];e.async=1;
        e.src=p+'?ts='+(+new Date()/3600000|0);
        r.parentNode.insertBefore(e,r)})(window,document,'script','//cdn.petametrics.com/f7tsbsle43k5irci.js','$p');

        $p("init", "f7tsbsle43k5irci");
        $p("send", "pageview");

            // Renders the recommendations and overwrites innerHTML of area marked with 'li-widget-item'.
          //---------- WIDGET CODE START------------

//-- 1. Define Rendering Area --
//$p('render') uses the template defined in the HTML to overwrite the target area with the items recommended by LiftIgniter.
var rendering_callback = function(resp) {
  var els = document.querySelectorAll('#li-recommendation-unit > div.li-widget-item');
  var template = document.querySelector('#recommended-item-template').innerHTML;

  for (var i = 0; i < els.length &amp;amp;amp;&amp;amp;amp; i < resp.items.length; ++i) {
    // Basically Mustache.render(template, resp.items[i]); 
    els[i].innerHTML = $p('render', template, resp.items[i]);
  }
}

//-- 2. Define Items to be Tracked --
//$p('track') attaches event listeners and query string parameters to each URL in the recommendation area.
var trackAlgo = function(algorithm) {
  $p('track', {
    elements: document.querySelectorAll('#li-recommendation-unit > div.li-widget-item'),
    //make sure that the "name" value selected here matches the value of "widget" in the $p("register") function. This allows us to match recommendation requests to the widget activity reported in our dashboard.
    name: 'fb-instant-articles',
    source: algorithm
  });
}

//-- 3. Request Recommendations --
$p('register', {
  max: 4,
  widget: 'fb-instant-articles',
  callback: function(resp) {
    // You might wish to wrap the code in this callback inside jQuery, to handle load order issues
    // See code above
    rendering_callback(resp);
    // track overwritten areas as 'LI' slice.
    trackAlgo('LI');
  }
});


$p('fetch');
</script>

//---------- WIDGET CODE END------------
  

//------The Recommendation Area ----

<span class="li-widget-item">
</span>
<span class="li-widget-item">
</span>
<span class="li-widget-item">
</span>

//------ The Template-----
<span id='recommended-item-template' style="width:150; display: none; ">
    <a class='thumbnail' href='{{url}}'>
        <img alt={{title}} height="150" src='{{thumbnail}}' width="150">
    </a>
    <a class='headline' href='{{url}}' style="display: table-caption; caption-side: bottom;">{{title}}</a>
</span>
</iframe>
</figure>

If you'd like to use only LiftIgniter recommendations on your Instant Articles, you can also disable the related content items automatically shown by Facebook.