Social Media

Creating a Content Item for Social Media Linked Icons

Because the images to link to the “Big 3 Social Media sites” (Facebook, Linked In and Twitter) are already uploaded to the HL servers, it is easy to create a Content Item with icons directly linked to your pages in these communities.

 

Take the steps below to create a dedicated Content Item dedicated to linked icons for Facebook, LinkedIn, and Twitter.

Social Media Linked Icons Content Item

Instructions

See below for an illustration of the areas where these steps are taken on the Enter/Edit Content Page of the Content Item.

  1. On Navigation Page, create a new Content Item for the page where you wish these links to show. Title the new Content Item what you wish, and then uncheck the "Show" box for the title.
  2. Still on the Navigation Page, scroll to the bottom to access the html editor area. Click the HTML Tab under the HTML Editor (at the very bottom of the page) to expose the raw HTML code. In the HTML field, paste in the following code (between the "###" and not including the "###"):

    ###
    <h2>Follow Us On</h2>
    <div class="Content" style="text-align: center;"><a href="http://www.facebook.com/speusc" target="_blank"><img alt="Find Us on Facebook" src="http://cloudfront.higherlogic.com/App_Themes/Common/images/FaceBook.png" /></a> &nbsp; <a href="http://www.linkedin.com/groups?gid=1845838" target="_blank"><img alt="Join Us on LinkedIn" src="http://cloudfront.higherlogic.com/App_Themes/Common/images/LinkedIn.png" /></a> &nbsp; <a href="http://twitter.com/speusc" target="_blank"><img alt="Follow Us on Twitter" src="http://cloudfront.higherlogic.com/App_Themes/Common/images/Twitter.png" /></a> </div>
    ###
  3. Place your organization's LinkedIn, Facebook, and Twitter codes in the corresponding areas highlighted above. Copy the code/direct URL from your organization's hubs on these sites. These will generally appear in the URL, but will also be showing in page content on some pages.
  4. Put "HLLandingControl" in the Optional CSS field above the HTML Editor.
  5. Click "save".

 
The linked icons will appear in the Content Item. This looks best in a Content Item in a page layout column with a width of 50% or less.