Involver Developer Network : open_graph

The open_graph_gallery feature block provides application code to display a gallery of Open Graph nodes. Currently only 'video' and 'page' node types are supported. Please note that the promotion_gallery feature block is a clone of open_graph gallery, created to power our standalone Promotion Gallery app. In SML the two feature block tags are identical with all the same attributes and variables.

Configuration

The settings for this feature take open graph URLs to video nodes and Facebook Fan Page nodes. You may paste in just the node id or the full url "http://graph.facebook.com/NODE_ID". Click the "Import Nodes" link when you are ready to import the list of nodes to display in the gallery. You may also remove any node any time in the settings.

We also have the ability to open a dialog containing a specific open graph node. To launch the dialog you can utilize the open_graph_gallery_dialog_link. To configure the content that is displayed in the dialog box, use the setting text area box "Dialog Box SML" under the "Additional Settings" section.

Caching Considerations

After the initial import in the settings, the nodes will be updated in the background automatically every 60 minutes.

Attributes

Context Variables

name	type	description
open_graph_gallery.nodes	array	Returns an array of elements of type ??open_graph_item
open_graph_gallery.title	string	Title of the gallery, configured in the settings
open_graph_gallery.headline	string	Headline to use for the gallery, configure in the settings

Examples

<p>My Videos</p>
{% open_graph_gallery %}
  <h1>{{open_graph_gallery.title}}</h1>
  <h3>{{open_graph_gallery.headline}}</h3>
  {% paginate open_graph_gallery.nodes per_page:9 %}
     {{ pagination_links }}
     <table>
        {% tablerow node in nodes cols: 3 limit: 9 %}
       <p>
       {% open_graph_gallery_dialog_link node %}
       <img src="{{node.default_image_url}}" alt="image" />
       {% endopen_graph_gallery_dialog_link %}</p>

       <h3>{{ node.title | truncate: 26 }}</h3>
        {% endtablerow %}
     </table>
      {{ pagination_links }}
  {% endpaginate %}
{% endopen_graph_gallery %}

<div class="popup-content">
  {% if node.embed_html %}
    <p>{{ node.embed_html}}<p>
  {% else %}
    <p><img src="{{node.default_image_url | resize_to: '400'}}" /></p>
  {% endif %}

  <h2>{{ node.title }}</h2>

  <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>

  <fb:like href="http://www.facebook.com/video/video.php?v={{node.origin_identifier}}" show_faces="true" width="420"></fb:like>

  <hr />

  <p><em>Support this advertiser:</em></p>
  {% if node.parent_origin_url %}
    <b>{{node.author}}</b>
    <fb:like href="{{node.parent_origin_url}}" show_faces="true" width="420"></fb:like>
  {% endif %}
</div><!-- /.popup-content -->

A modified version designed to show a set of facebook open graph nodes for application pages

{% open_graph_gallery %}
  <h1>{{open_graph_gallery.title}}</h1>
  <h3>{{open_graph_gallery.headline}}</h3>
  {% paginate open_graph_gallery.nodes per_page:9 %}
     {{ pagination_links }}
     <table>
        {% tablerow node in nodes cols:3 %}

       {% open_graph_gallery_dialog_link node %}
       {{node.default_image_url | img_tag:node.title }}
       {% endopen_graph_gallery_dialog_link %}
       <h3>{{ node.title | truncate: 26 }}</h3>
       {% facebook_like node width:160 %}
        {% endtablerow %}
     </table>
      {{ pagination_links }}
  {% endpaginate %}
{% endopen_graph_gallery %}

Overview

Configuration

Caching Considerations

Attributes

Context Variables

Examples

FAQ

Related Topics