Social

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

Near the top of the page, include a shared content reference to /content/shared/www/eub/tlw-prototypes/social.
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 https://search.buffalo.edu.
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'.
errMsg: The message that is to be displayed when an unexpected error occurs. Defaults to "Something's gone wrong!".
loadingMsg: The message that is to be displayed when feed items are loading. Defautls to "We're just collecting our thoughts...".
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.
noResultsMsg: The message that is to be displayed when no results can be found. Defaults to "Whoops! There's nothing here".
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.
sort: A string containing the sort method to use for the query. Defaults to 'date'.
sourceLink: The href to use for linking to the social feed's source on its respective social media platform. Defaults to the university's social media page associated with the clive social collection type (e.g. if clive is 'social-twitter', then https://www.twitter.com/UBuffalo will be used). Can also be set to null or '' to exclude the source link.
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.

Resources

Query Syntax Help

Sort Options

Featured Instagram Post


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

  <script>
    $('#featured-instagram-post').socialFeed({
      query: '+B6YKic1nYni',
      clive: 'social-instagram',
      numRanks: 1
    });
  </script>

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

Featured Twitter Post


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

  <script>
    $('#featured-post-3').socialFeed({
      query: '+1211864326337912832',
      clive: 'social-twitter',
      numRanks: 1
    });
  </script>

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

Featured Facebook Post


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

  <script>
    $('#featured-facebook-post').socialFeed({
      query: '+10157549273232860',
      clive: 'social-facebook',
      numRanks: 1
    });
  </script>

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.

Facebook

Twitter

Instagram

Mixed Bag

Facebook Events


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

  <script>
    $('#social-feed-events').socialFeed({
      sort: 'adate',
      query: 'feedItemType:EVENT'
    });
  </script>

Engineering & Architecture


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

  <script>
    $('#architect-engineer').socialFeed({
      query: '[Architect Engineer]'
    });
  </script>

UBCMS Demo Site