Introduction

The social media banner is a page element that includes links to your social media accounts, and displays your latest tweets. An RSS feed is also linked, allowing visitors with an RSS reader to stay up to date on your latest announcements and activities. This tutorial explains how to integrate your social media accounts with the Digital Bell, and add the social media banner to a page.

Social Media Banner

Note: For your Tweets to be displayed, you must first complete the Twitter API 1.1 tutorial.

Enter your Social Network Links

To enter your Facebook, Twitter, and YouTube links, first mouse over the "Tools" link, located in the menu at the top of your Digital Bell Dashboard. From the drop-down menu, click the "Site Settings" link. 

Site Tools link

In the "Site Settings" section, click "Social Network Links," located in the right margin.

Social network links

This will bring you to a page with fields for your Facebook, Twitter, and YouTube URLs. Enter the URLs (ex. http://www.facebook.com/myschool) for your social media pages in their respective fields, then click the "Submit" button to complete the process.

enter social media urls

Integrate your Twitter Feed

The social media banner displays your latest tweets to the right of the link buttons. To do add the feed to the banner, you will first need to follow the steps in the Twitter Feed Integration tutorial. Once the integration process is complete, proceed to the next step.

Create a Social Media Banner

Once you have integrated your Twitter account and entered the links for you social media pages, you can add a social media banner to any page, using a Developer Action.

Begin by editing the content of the page you wish to add the banner to. To edit a page's content, first click the "Pages" link, located in the menu at the top of your Digital Bell Dashboard. Locate the page you wish to edit on the list that appears, then click the Edit button (pencil icon) to the left of the page title.

edit button

In the content editor, click the "Developer Actions" link, located in the right margin, under the "Add Content" heading. This will add a "Developer Action Group" to your page.

Developer action link

At the bottom of the new group, click the "+New Developer Action" button to display the "Add Developer Action" form.

new developer action button

After clicking the button, a form will appear. Add the following information to the form's fields:

Title: Social Banner

Action: Modules.Load

Attributes: Leave blank.

FAVs: "module" = "social-banner"

developer action form

Once you have filled out the form, click the "Submit" button to create the banner. The banner should now display your latest Tweets, along with buttons that link to the social media pages you entered in the previous step.