University at Buffalo - The State University of New York
Skip to Content
UB Web Management

Transforming UB’s digital communications through process and tools

HTML Snippet Component

Embed HTML code into your page.

For developers only!

The Help Desk does not support third party code.

Be sure to carefully test your code for major bowsers (i.e. Firefox, Internet Explorer, Safari, Chrome) before uploading to the UBCMS. Poor coding may break your page unexpectedly.

Using a Formstack form?

Try our custom Formstack Component.

The component as it first appears on the page.

The component as it first appears on the page.

Using This Component

Add the component to the page. There are two tabs: HTML and Options.

HTML Tab

Write or paste in your custom HTML code. Be sure to turn the HTML filter off so that your HTML is used (see Options tab).

The component opened for editing showing the HTML tab.

The component opened for editing showing the HTML tab.

Options Tab

Description: Enter a descriptive label for the component that will be shown on your page in Author (recommended).

  • In our example below, we have inserted "Put some useful descriptive text here...". The phrase "HTML Snippet" is prepended automatically.  

HTML filter: Choose between:

  • Filter HTML (default) - No HTML will be used.
  • Off - Apply your HTML code to the page. Normally you will choose Off

Component handle - Choose to display the component's gray bar and descriptive label in Author (recommended).

The component opened for editing showing the Options tab.

The component opened for editing showing the Options tab.

Screenshot of the HTML Snippet description on a page in author.

HTML Snippet as displayed on a page in author. Description is circled in yellow.

Adding a Twitter Feed

Proceed with caution. These instructions may be dated.

  • You need a specialist, who can add an HTML Snippet to the page. 
  • Be sure to adjust the settings in that component so HTML Filtering is OFF. Otherwise nothing will show...
  • You'll be pasting in some code, a lot like this...
    <a class="twitter-timeline"  href="https://twitter.com/hashtag/ubdancing" data-widget-id="578950080390172673">#ubdancing Tweets</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
             
  • To get that code, you'll need to go into Twitter.  Log in, then go into Settings and Widgets
  • There you will need to build the feed you want. It can be someone's entire feed, or a hashtag, or a search...  Just click 'create new' and it will ask you what you want, with examples.
  • You can adjust a couple of settings, not much. It will show you a preview of the feed.
  • Then save it, so you can get the code again later.
  • And then copy the long line of embed code from the little box under the preview.
  • Paste that code into your HTML Snippet.
  • Save the Snippet, and after a little, maybe refresh a couple of times, the feed should show on your page.

Restrictions

  1. Only experienced developers should handle this component.
  2. Be sure to carefully test your code for major bowsers (i.e. Firefox, Internet Explorer, Safari, Chrome) before uploading to the UBCMS.

Was this page helpful?

(Required)
(Required)
(so we can thank you or request more details)
(Required)
(buffalo.edu addresses only please)

On this page:

See an Example:

Below is an example of an embedded Twitter Widget. In this case the Description field is NOT shown. (Instructions are below.)

Last Reviewed:

November 22, 2017