Skip to main content
Feature Guides

Social Feeds

Show your recent Twitter, Facebook, and Instagram posts.

If you want to add social media posts to a page, there are a couple of options.

  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 in 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 you to publish a feed from one of your social channels on your site.

Get Embed Code

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

Twitter

How to embed a timeline
Timeline embed tool

Facebook

All social plugins
Page Plugin

Add code to Brightspot

Once you have the embed code you want, add it to the main column in a page by pasting the code into a Raw HTML Module.

This can appear in the main content column:

Screen Shot 2020-09-25 at 5.36.13 PM.png

or in a sidebar:

Screen Shot 2020-09-25 at 5.37.38 PM.png

You can also add it to a container module if you don't want it to take up the whole width of a column.

Import a Social Feed

Social Feeds have been created in order to allow CMS users to display posts from varying social channels within the Brightspot theme. Currently social feeds are supported for Facebook, 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 instructions provided by Facebook, 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, within Admin > Social Services.

Screen Shot 2020-05-28 at 6.36.16 PM.png

Then choose the appropriate service: Facebook, 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 you will need to copy/paste into Brightspot.

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

Screen Shot 2020-05-28 at 6.37.17 PM.png

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

List Module: Dynamic Social Feeds

Social Feeds can be added to pages using the the List Module. The list style “List - Social” was intended for use for 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 you set the maximum number of posts the module should display on the front end.
    2. Feed Providers: This is where you select the social account you 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 your social media platforms. You 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 you log into the Facebook/Instagram/Twitter app, you may notice a request for additional information (such as a privacy policy page). If all information is complete and up-to-date, we recommend confirming that the API key and secret still correct. One of these steps resolves the vast majority of issues we come across.

Related Training

data-content-type="video"

Social Media Feeds

Initial demo from the June 2020 user group meeting.
overrideBackgroundColorOrImage= overrideTextColor= overrideTextAlignment= overrideCardHideSection= overrideCardHideByline= overrideCardHideDescription= overridebuttonBgColor= overrideButtonText= overrideTextAlignment=
overrideBackgroundColorOrImage= overrideTextColor= overrideTextAlignment= overrideCardHideSection= overrideCardHideByline= overrideCardHideDescription= overridebuttonBgColor= overrideButtonText=

Questions & Answers

data-content-type="article"
Q&A

Can I add a new platform to the social links offered on Brightspot?

October 12, 2020 04:26 PM
No. However, some social links can be added using embed codes. For example, tiktok videos can be embedded under the “Twitter” social link. First, click on the “Tweet” button on RichText, then select “Twitter Embed” and copy and paste the embed code from the social link to link onto the page. You can also use an external link to other platforms as needed.
overrideBackgroundColorOrImage= overrideTextColor= overrideTextAlignment= overrideCardHideSection= overrideCardHideByline= overrideCardHideDescription= overridebuttonBgColor= overrideButtonText= overrideTextAlignment=
overrideBackgroundColorOrImage= overrideTextColor= overrideTextAlignment= overrideCardHideSection= overrideCardHideByline= overrideCardHideDescription= overridebuttonBgColor= overrideButtonText=