The following consists of examples of social media feeds with various configurations. The formula for generating a feed is rather simple:

  1. Near the top of the page, include a shared content reference to /content/shared/www/eub/tlw-prototypes/social.
  2. Below this, include any number of HTML Snippets that consist of:
    • A div HTML element with a unique ID.
    • A script tag that invokes the socialFeed() jQuery plugin on the div.

Each call to socialFeed may take an optional configuration object as its argument. The object may contain any of the follwing properties:

  • apiHost: A string containing a custom API endpoint. Defaults to
  • clive: A string containing the name of the collection to include feed items from. Can have values 'social-facebook', 'social-instagram', or 'social-twitter'. Defaults to an empty string, meaning that items will be included from all collections.
  • collection: A string containing the meta collection from which social feed items will be queried. Defaults to 'meta-social'.
  • maxHeight: An integer that specifies the max height of the social feed in pixels. Defaults to undefined.
  • mobileMaxHeight: An integer that specifies the max height of the social feed in pixels when the window width is less than 720px. Defaults to maxHeight.
  • mobileNumRanks: The number of results to query in mobile screen size. Defaults to numRanks.
  • numRanks: The number of results to query. Defaults to 10.
  • profile: A string containing the profile used for the query. Defaults to '_default'.
  • query: The query string used for filtering. Defaults to '!showall', which will bring back any available results.
  • slimTweets: Wether or not Twitter tweets should display in slim mode - with a mobile font size of 12px. Defaults to false. 
  • sort: A string containing the sort method to use for the query. Defaults to 'date'.
  • startRank: A number that signifies the amount of results to skip during a query. If non-zero, then (numRanks * startRank) results will be skipped. Defaults to 0.


Featured Instagram Post

  <div id="featured-instagram-post"></div>

      query: '+B6YKic1nYni',
      clive: 'social-instagram',
      numRanks: 1

Post ID obtainable by hovering over embedded post's like or comment buttons.

Featured Twitter Post

  <div id="featured-twitter-post"></div>

      query: '+1211864326337912832',
      clive: 'social-twitter',
      numRanks: 1

Tweet ID obtainable by hovering over embedded tweet's like or comment buttons.

Featured Facebook Post

  <div id="featured-facebook-post"></div>

      query: '+10157549273232860',
      clive: 'social-facebook',
      numRanks: 1

Post ID obtained by either hovering over the comment button of an embedded post, or going to the facebook page hosting an embedded video and viewing the full post.




Mixed Bag

Facebook Events

  <div id="social-feed-events"></div>

      sort: 'adate',
      query: 'feedItemType:EVENT'

Engineering & Architecture

  <div id="architect-engineer"></div>

      query: '[Architect Engineer]'

Empty Search Results

Error - Incorrect API Host