Montgomery County Public Schools s2

MCPS Web Publishing System (Tron) Training

How to Add Twitter to Your Site

How to add a Twitter ‘Follow’ button or Embedded Timeline to your site

In this document:

A.  How to add a Twitter ‘Follow’ button to your site

B.  How to embed a Twitter Timeline on your site

A. How to add a Twitter ‘Follow’ button to your site

1.  Select the content block to which you want to add the Twitter Follow button and click “Edit”.
2.  Once you are in the content work area, click on the Code View “< >” option at the bottom of the screen.
3.  To insert a large ‘Follow’ button:
Once in Code View, copy and paste the following code for a large Twitter ‘Follow’ button. Replace “YourName” in the code below with your Twitter account name. Then click “Publish”.
<a href="https://twitter.com/ YourName " class="twitter-follow-button" data-show-count="false" data-size="large">Follow @ YourName </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.  Or to insert a medium ‘Follow’ button:
Once in Code View, copy and paste the following code for a medium Twitter ‘Follow’ button. Replace “YourName” in the code below with your Twitter account name. Then click “Publish”.
<a href="https://twitter.com/ YourName " class="twitter-follow-button" data-show-count="false" data-size="medium">Follow @ YourName </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>

B. How to embed a Twitter feed on your site

Important notice: Twitter retired support for their old Twitter feed widget in June 2013. The old widget allowed a user to embed a Twitter feed without authenticated access. They have replaced their old widget with a new embedded timeline widget that requires user authentication to create. To add the new embedded timeline, you must log into your Twitter account and create a new widget by going to https://twitter.com/settings/widgets/new. Only the Twitter account owner can use this tool to generate the embed code.

1.  Log into your Twitter account and go to https://twitter.com/settings/widgets/new.
2.  Enter your username, height, and theme, and select your options. For height, 300 is recommended. The width will adjust automatically to the width of its container.
3.  Click the blue “Create Widget” button.
4.  Copy and paste the code that is generated into a plain-text editor (e.g. Notepad) where you can later paste it into Tron.
5.  In Tron, select the content block to which you want to add the Twitter Timeline Widget and click “Edit”.
6.  Once you are in the content work area, click on the Code View “< >” option at the bottom of the screen.
7.  Once in Code View, copy and paste the code you saved in step 4. Then click “Publish”.
The Twitter Timeline Widget should automatically size to the width of the content block to which it was added.
8.  To customize the design of your new Twitter widget beyond the default theme, visit https://dev.twitter.com/docs/embedded-timelines#customization. Then modify your embed code accordingly.

Tron Training Materials: Basics of Content Blocks: Uploading & Including Images Page 4 of 8

June 18, 2010