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 then 2) adding it to a page. 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 to have it activated for your folder)
    3. In the form, choose Columns to Span. The standard size is Span-6 (6 columns / 271 pixels wide), which is half of a regular page. If you are in doubt, choose Span-6. If your page has a different layout, you can choose 3, 4, or 5 columns wide; whichever suites your layout best.
    4. In the Position dropdown, set your callout box to display on the right or the left side of the page.
    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:
      • 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.

    If your website has not yet been converted, please  Go to Step 2 (below).

    On-Page Placement Set Up Guide
    Page Type Position Position Setting Needed
    Placement in Metadata
    Home Page Bottom Left Normal
    Learn More
    Home Page Top Right Normal
    Extra Content
    Regular Page Bottom Left Normal Extra Content
    Regular Page Bottom Right Float Right
    Extra Content
    Regular Page Top Right Float Right
    Learn More

    Note: If there are other pieces of content in your Learn More or Extra Content fields, the position of the Social Media Callout Box on the page may change. Contact for assistance.

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

    To add your callout box to your page:

    1. In the CMS Workarea, open your page for editing.
    2. Click on the Metadata tab. See the On-Page Placement Set Up Guide (table above) for Position Setting Needed options.
    3. Look for ExtraContentBlock (or Learn More) and click the “Edit” button underneath. (If you do not see either choice, please contact the Web Team and we will add that option for you.)
    4. In the window that opens, navigate through the folders to the section you put the callout box in.
    5. Double-click on the title of the Callout Box so the title appears in the lower box, and then click the Save button located just above it.
    6. The ExtraContentBlock (or Learn More) in your Metadata tab will now show the content title.

    After your page is published, you will see the Social Media Callout Box.