Social Feeds

This article talks about how to add recent X(Twitter), Facebook, and Instagram posts to a website.

There are a few options to add media posts to a website.

1. Embed a Social Feed - This may be the easiest approach for some social media sources (Twitter has a really easy embed widget, for example). It takes the code that is generated by the social media company and puts it on a Brightspot page.
2. Import a Social Feed - This involves having Brightspot actually import the feed data and display it on the front end. That means it uses Brightspot's styling for the display of the feed. It is more complicated to set up. It also relies on the social media company's APIs remaining the same, so it can break if the API changes at all.
   

Embed a Social Feed

Embedding a social feed allows a feed to be published from one of the relevant social channels on a site.

Get Embed Code

Social media companies will vary on how (or whether) they provide an embed code that can be added to a site. Below are links for X (Twitter) and Facebook. Twitter allows you to easily embed a timeline that shows the latest tweets. Facebook allows editors to add more things like share buttons or links to Facebook pages but not a dynamic feed like Twitter.

X (Twitter)

How to embed a timeline
Timeline embed tool

Facebook

All social plugins
Page Plugin

Add code to Brightspot

Once the desired embedded code is obtained, add it to the main column on a page by pasting the code into a Raw HTML Module.

This can appear in the main content column:

or in a sidebar:

The social feeds can also be added to a container module to reduce the space it takes up within a column.

Import a Social Feed

Social Feeds have been created to allow CMS users to display posts from varying social channels within the Brightspot theme. Currently, social feeds are supported for Facebook, X (Twitter), and Instagram.

In many cases, embedding a social feed will work as well (or better) and the setup is much easier. The biggest difference is that it will use the theme from the provider rather than the BYU Brightspot theme.

Social Feeds Setup

Setting up social feeds is a two-step process. First, a user must set up the social services. This requires setup on the social networks (outside of Brightspot), meaning an admin will need to create an app that will be used to power these feeds. Setup steps vary across social networks; please follow the instructions provided by Facebook, X (Twitter), and Instagram.

The second, easier, step is choosing which accounts should be made available.

Setting Up Services

First, a CMS user must set up the social media services inside the CMS. It can accessed by going to the hamburger menu on the upper left corner of the page, under the Social tab, click on Services.

Then choose the appropriate service: Facebook, X (Twitter), or Instagram, and follow the instructions to create the app and make it live. Generally, the app will provide two keys: a consumer API key and a consumer API key secret that needs to be copied/pasted into Brightspot.

Once the Service is configured, then add accounts from Social > Accounts. On the left side, select “Connect Account” under the appropriate social service.

For example, if you want to add X (Twitter) accounts, you would need to add them under the X (Twitter) service. Adding an account requires that the account owner authorize the relevant social app. The screenshot above is an example of the authorization step needed for Twitter.

List Module: Dynamic Social Feeds

Social Feeds can be added to pages using the List Module. The list style “List - Social” was intended for use in social feeds. Here’s how to publish the list:

1. Add a List - Social to a page
2. Under Items, select Social Feed
   
   1. Max Posts: This is where editors set the maximum number of posts the module should display on the front end.
   2. Feed Providers: This is where editors select the social account they want to display content from in this module placement. Once the setup of social services and accounts from the previous steps are complete, the feed should appear in this dropdown.
      

Notes

Social feeds bring in the most recent posts from the connected social media platforms. Editors cannot control what posts are pulled in. 

If a social feed has stopped working, the most likely issue is that the social provider has updated their app settings. If editors log into the Facebook/Instagram/X(Twitter) app, they may notice a request for additional information (such as a privacy policy page). If all information is complete and up-to-date, it's recommended to confirm that the API key and secret are still correct. One of these steps resolves the vast majority of issues.

Brightspot currently only supports the three social services mentioned above, and there is no way to add a new service platform. However, some social links can be added using embed codes. For example, TikTok videos can be embedded under the “X (Twitter)” social link. First, click on the “X (Tweet)” button on RichText, then select “X (Twitter) Embed” and copy and paste the embed code from the social link to link onto the page. An external link to other platforms can also be used as needed.