How To Add Twitter Widgets

 

Twitter Feed

Find the Twitter information of the account you want to post (For Single Account Only)
  • Navigate to Twitter and to the page of the account whose feed you want to import.
  • Note the account name.  For example, SkidmoreCollege, or SkidmoreITHelp, at the top of the posting timeline.
  • Decide what you will want to name this feed on the page.  Tweets by @SkidmoreCollege, for example.


Add a Simple Text Block Element to the page

  • Click the Click to insert new element link on the page where you want the Twitter Feed widget.
  • Select Text Element from the list of categories when the Element Gallery window appears.
  • Choose Simple Text Block (without header) from the list of items under Text Elements.
  • The page will refresh to include the link, Click here to define the Simple Text Block (without header).


Add the Twitter Script to the Simple Text Element

  • Click on the link to open the Simple Text block for editing.
  • Hit enter twice, and paste in the following code.  You must include the entire code block!

<a class="twitter-timeline"  href="https://twitter.com/SkidmoreCollege"  data-widget-id="348164889820418048" width="300" height="425" data-screen-name="SkidmoreCollege" data-chrome="transparent" >Tweets by Skidmore</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>

  • Click Finish to save your work.  The Skidmore twitter will display temporarily on your page.

 

Customize the Custom Script Element and Publish

There are relatively few variables to use in the Twitter api at this time.  Follow the bullet points to adjust the standard settings for your chosen Twitter feed, and then choose from among the optional variables below.

  • First, replace the URL in bold with the URL for your chosen Twitter feed. Do not erase the quotation marks!
  • Next, replace the screen name in bold with the screen name of your chosen Twitter feed.
  • Next, change the display title of your widget, also shown in bold (Tweets by @Skidmore in this example).  This display title does not display in all browsers or in all sizes.
  • Choose any optional variables and insert them after    data-chrome="transparent"  and before the closing   >  . 
  • Once your settings are made, click Finish.
  • Publish your changes.

Common Optional Variables
  • width="xxx"  (min 180, max 520)
  • height="xxx"  (min 200, no max)
    • width and height both refer to pixels
  • data-link-color="#hex"- changes the link color, and the color of some icons
  • data- chrome="______________________"  (choose from the variables below, can insert more than one option)
    • noheader - hides the timeline border
    • nofooter - hides the timeline footer and tweet box
    • noborders - removes all borders within the widget (see also border-color)
    • noscrollbar - crops and hides the main scrollbar (not recommended)
    • transparent - sets the background of the twitter feed to transparent (used by default)
  • data-border-color="#hex" -- changes the border color
  • data-tweet-limit="5" -- number of tweets to display, between 1 and 20, which forces the height of the widget to whatever is needed to display that number of tweets.  Will not poll for updates when using this option.
  • data-show-replies="true/false" -- show or hide replies

 


Hashtag Feed Widget

You may create a search timeline for any #hashtag. Searches for a single #hashtag feature a simplified header section, and a “Tweet #hashtag” Tweet box in the footer so that visitors can easily contribute to the conversation directly from your page. Clicking on the #hashtag in the header will open twitter.com search page for that #hashtag.

1)  Note the hashtag that you want to search for, and do a test search on Twitter to make sure that items do show up using that hashtag.

2) Decide what you will want to name this feed on the page.  Tweets about Skidmore , for example.  This does not show on all displays.

3) Follow the directions above to insert a Simple Text Block on your page. Hit enter twice, and then copy/paste to insert the following code:

<a class="twitter-timeline"  href="https://twitter.com/search?q=%23skidmore"  data-widget-id="362995609311010816">Tweets about "#skidmore"</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>

4) Click finish to temporarily save your work.  A hashtag of #skidmore will temporarily display on your page.

Customize Your Script Element and Publish

There are relatively few variables to use in the Twitter api at this time.  Follow the bullet points to adjust the standard settings for your chosen Twitter feed, and then choose from among the optional variables below.  Change the variables for your department - the sections of the code above that are shown in red are what are changed, and only those sections. Be very careful with your punctuation - removing anything from the script will break it.

  • First, replace the first hashtag in red with the hashtag you have chosen. Do not include the #, or erase the quotation marks!
  • Next, replace the second hashtag in red with the your chosen hashtag, this time including the #.  You can change the entire wording of "Tweets about #hashtag", as long as you do not erase the quotation marks.
  • Choose any optional variables and insert them before    data-widget-id=   without erasing any punctuation.


Common Optional Variables

  • width="xxx"  (min 180, max 520)
  • height="xxx"  (min 200, no max)
    • width and height both refer to pixels
  • data-link-color="#hex"- changes the link color, and the color of some icons
  • data- chrome="______________________"  (choose from the variables below, can insert more than one option)
    • noheader - hides the timeline border
    • nofooter - hides the timeline footer and tweet box
    • noborders - removes all borders within the widget (see also border-color)
    • noscrollbar - crops and hides the main scrollbar (not recommended)
    • transparent - sets the background of the twitter feed to transparent (used by default)
  • data-border-color="#hex" -- changes the border color
  • data-tweet-limit="5" -- number of tweets to display, between 1 and 20, which forces the height of the widget to whatever is needed to display that number of tweets.  Will not poll for updates when using this option.
  • data-show-replies="true/false" -- show or hide replies

7) Once your settings are made, click Finish.

9) Publish your changes.


Other Possible Examples

Favorites

<a class="twitter-timeline"  href="https://twitter.com/SkidmoreCollege/favorites"  data-widget-id="363000033521590272">Favorite Tweets by @SkidmoreCollege</a>

List

<a class="twitter-timeline"  href="https://twitter.com/SkidmoreCollege/alumni"  data-widget-id="363000390637199360">Tweets from @SkidmoreCollege/alumni</a>

Embed single tweets

Single tweets are embedded with code directly from the Embed button on that tweet, but will still require either the HTML button or a code snippet.


Twitter API Links

  • https://dev.twitter.com/docs/embedded-tweets
  • https://dev.twitter.com/docs/embedded-timelines