Social feeds

Feeds for Instagram and TikTok are provided by the SynSocial plugin, included with the common www.min.js file via {{ content_for_header }}.

Options

Option	Type	Default	Required	Description
elm	HTMLElement	—	Yes	The element to render the feed into
limit	integer	12	No	Maximum number of feed items to render
template	function	(see below)	No	Function receiving a feed item and returning an HTML string
talent_id	integer	—	Only when rendering a talent feed	Scope the feed to a specific talent record
agency_id	integer	Syngency.agency_id	No	Defaults to the current agency
handle	string	—	No	Social handle to scope the feed

Usage

The default template renders a linked image, using a video thumbnail if the item is a video. Pass a custom template function to override the markup per item.

Example

Renders an agency feed on the page, with flexible JavaScript which supports agency or talent feeds:

{% for social in agency.social %}
  {% if social.service == 'instagram' and social.auth %}
    <div id="synsocialInstagram" class="synsocial-instagram pt-3" data-username="{{ social.profile_name }}" data-type="agency" data-id="{{ agency.id }}">
      <div class="row xs-gutters justify-content-center">
        <!-- Content of .row to be replaced when rendering feed with JS -->
        <div class="col text-center py-5">
          <i class="fal fa-spinner-third fa-spin fa-2x"></i>
        </div>
      </div>
    </div>
    {% break %}
  {% endif %}
{% endfor %}

// Instagram: SynSocial
if ( $('#synsocialInstagram').length ) {
  let $synSocialEl = $('#synsocialInstagram'),
      feedType = $synSocialEl.data('type') || 'agency',
      syngencyId = parseInt($synSocialEl.data('id'), 10),
      igUsername = $synSocialEl.data('username') || null,
      $synSocialFeedEl = $synSocialEl.find('.row').first()

  if ( syngencyId ) {
    // Clear loader content
    $synSocialFeedEl.empty()
    // Render feed into node (not $el)
    SynSocial.instagram.renderFeed($synSocialFeedEl[0], {
      agency_id: feedType == 'agency' ? syngencyId : null,
      talent_id: feedType == 'talent' ? syngencyId : null,
      handle: igUsername,
      limit: 12,
      template: (item) => {
        if ( item.image ) {
          return `<div class="col-4 col-md-2"><div class="ig-item mb-gutter" data-caption="${item.image.caption}"><a href="${item.image.permalink}" target="_blank" class="ig-image" style="background-image:url(${SynSocial.baseUrl}/${item.key})" title="Open in Instagram"></a></div></div>`
        }
        else if ( item.video ) {
          return `<div class="col-4 col-md-2"><div class="ig-item mb-gutter" data-caption="${item.video.caption}"><a href="${item.video.permalink}" target="_blank" class="ig-video" style="background-image:url(${SynSocial.baseUrl}/${item.key})" title="Open in Instagram"></a></div></div>`
        }
      }
    })
  }
}

Events

Events are fired on the container element passed to SynSocial's renderFeed() method.

Event	Description
feedRendered.synSocial	Fired after the feed object is populated and the container innerHTML is updated. Passes an object with count (the number of feed.items) and items (array of the feed.items).

Example

Initialize a slider once the feed container is populated:

synSocialFeedEl.addEventListener('feedRendered.synSocial', e => {
  console.log('SynSocial: Feed rendered', e.detail.count, e.detail.items)
  initInstagramFeedSlider()
})