Skip to main content
IUP artmark

Social Media Callout Box: Create and Add to a Page

  • Social media callout box icon example Social media callout box icon example

    The Social Media Callout Box (examples shown, right) will allow you to display one or more of your department's social media network links on your homepage, and other pages in your site.

    Setting one up is easy. There are two steps:

    1. creating the Social Media Callout Box, and 
    2. adding it to a page layout.

    You just need your department’s social media links (it might be helpful to have them in a Word document before you start), and the page you want them to display on. The social networks available are: Facebook, Twitter, LinkedIn, Vine, Instagram, Google+, Pinterest, Tumblr, YouTube*, the IUP Blog, and an External Blog.

    *If your department has video(s) on the IUP YouTube channel, talk to the Web Team about getting a link to the video or to a playlist of your videos for use in your callout box.

    Step 1: Create a Social Media Callout Box

    1. In the CMS workarea, go to the folder that contains that page you will add the callout box to.
    2. In that folder go to New > SmartForm > Social Media Callout: Depts. (If this is not listed, contact web-team@iup.edu to have it activated for your folder)
    3. In the form, choose Columns to Span. The standard size is Span-6. The actual width of the callout box will be determined by the column width within your page layout.
    4. In the Position dropdown, set your callout box to Normal.
    5. Enter your Department Name, which will appear in running text in the box. (ie: Connect with Department Name on Social Media). What you enter in this field will appear between the words “Connect with” and “on Social Media.”
    6. Add your social networks.
      • Choose the network name from the dropdown.
      • Copy your URL address for that network. (Note: Make sure you copy the full address, ie: http://www.facebook.com/name)
      • Add in the URL address by clicking on the Link icon.
        • Paste the URL address in the URL field, AND the Link Text field (if on a Mac you might instead have a Description field).
      • Click OK
    7. To add another social network, click the blue and white rectangle to the left of the words Social Media Network, and choose Insert Below (or Insert Above to add it above) and follow the same process for each additional network.
    8. When you are done, click Submit.

    If your website has been converted to the new, responsive design, you may now edit the page layout in the web browser and add the new social media content.

    Step 2: Adding your Social Media Callout Box to Your Page

    To add your callout box to your page:

    1. From the staging web browser, open your page layout for editing.
    2. Add a new content widget to the page layout.
    3. Edit the content widget, and choose the social media callout box that you created.
    4. Submit the page layout.

    After your page and content are both published, you will see the Social Media Callout Box on the page.