KB User's Guide - Advanced HTML - Adding a Twitter Timeline to your Homepage (Classic Editor - Right Side Module)

Note

You must have full administrative permissions in your space to perform these steps. This means access to the Documents, Settings, and Users tabs.

This document will show you how to embed a public twitter timeline to your KB site.

Create a Widget from your Existing account on Twitter

1. Click on the Settings and help link.
2. Select Settings.
3. From the left navigation bar, click on Widgets.
4. Click on the Create New button.
5. You will see a screen entitled, "Tweets by YourTwitterUsername (@YourTwitterUsername)".
6. Go to the Configuration column on the left.
7. Choose the appropriate Height, Theme and Link color options.
8. Click on the Save changes button.
9. Go to the Preview column on the right.
10. Check if the preview of your public Twitter timeline is what you desired.
11. Underneath the preview window is a code that looks like this:

<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" class="twitter-timeline twitter-timeline-rendered" style="width: 1px; height: 0px; border: none; position: absolute; visibility: hidden;"></iframe><a class="twitter-timeline" href="https://twitter.com/YourTwitterUsername" data-widget-id="0123456789012345678" data-twttr-rendered="true">Tweets by @YourTwitterUsername</a>

<script id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script><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>

Embed public Twitter Timeline Widget into your KB front page

Create a KB document with the Twitter code in the Body field

1. In the KB Admin Tools, go to the Documents tab and click on New Doc link on the left navigation bar.
2. Enter information in the Title, Keywords and Summary fields.
   • Note: If you only want the document to show up on your homepage and do not want it to be searchable, set the Search Priority to Exclude from Search.
3. In the Body field, enter the code from Twitter.
4. Toward the bottom of the page, under the Status section, click on the Additional Fields +.
5. On the far right, click on the HTML only mode box and set your document to the status of Active. Write down the Document ID number, you will be needing it again shortly.
6. Click on the Submit button.

Updating the Site Pref Tab Modules

1. Go to the Site Pref tab and click on the Content Modules link.and create a new/Custom Content Module.
1. Enter a name in the Module Name field.
2. Do not check either Internal or External checkboxes.
3. Check the FullView box.
4. Check the MobileView box.
5. In the Limit/Doc ID(s)/URL* field, enter the first line of the Twitter code with YourTwitterUsername information

<iframe id="twitter-widget-1" scrolling="no" frameborder="0" allowtransparency="true" class="twitter-timeline twitter-timeline-rendered" style="width: 1px; height: 0px; border: none; position: absolute; visibility: hidden;"></iframe><a class="twitter-timeline" href="https://twitter.com/YourTwitterUsername" data-widget-id="0123456789012345678" data-twttr-rendered="true">Tweets by @YourTwitterUsername</a>
<li>Click the <strong>Update</strong> button</li>

2. Click on the Side Modules link and create a new/Custom Side Module
1. Enter a name in the Module Name field.
2. In the dropdown box in the Position field, choose menu  option Side Left or Side Right.
3. Check the Internal and/or External checkboxes.
4. Check the IndexPage box.
5. Check the DocPage box.
6. Choose a number to determine the order.
7. Click on the Update button.
3. Click on the Side Modules Links link and create a new/Link.
1. Select the Module name from the dropdown box in the Module Name field.
2. Enter a link name in the Link Name field.
3. In the Link URL field, enter the Document ID number of the document you created earlier with the Twitter code followed by a semi-colon and print.

01234:print

4. Click on the Update button.

Adjust your Side Module Widths to Compensate for Twitter Feed

In most cases, you will find that the default width of your side modules is not wide enough to fit the Twitter feed effectively. To correct this, you can modify your site CSS to adjust the widths as needed.

Instructions for modifying your side module widths can be found here: [Link for document 30020 is unavailable at this time]

• Note: The recommended width for the side module containing the Twitter feed is 27.5%.

See Also:

• KB User's Guide - Settings Tab - Side Modules and Side Module Links
• KB User's Guide - Settings Tab - Quick Search Options and Menus
• KB User's Guide - Settings Tab - Displaying KB Pre-defined Features via Side Module Links