 |
| credit: Margareta Jungerth Boo |
Embedding a public Twitter timeline to your SharePoint 2010 online website has never been easier. It only takes one line of code to make it work.
Similar to timeline feeds on twitter.com, integrated data feeds are dynamic, real-time, interactive, and allow your guests to easily reply, favorite and retweet directly from your SharePoint pages. Web page visitors unfold Tweets to see details. The embedded Twitter widget includes a text box which encourages visitors to tweet a response, or to begin a new conversation. Additionally, there is an option to automatically show media like photos and video, so when expanded the content is highly visible and shown centered and in front.
Widgets for timelines are created at Twitter.com and are designed to work for all devices and web pages. Timeline data loads fast and scales with web traffic and updates in real-time so you visitors always see the latest information.
Accessible Twitter Timelines
Any public timeline can be embedded based a user’s favorites, twitter lists, or any search, or hashtag query.
Interactive User Timelines
The example posted below is the timeline for @mypmbot. Every timeline comes with a button to follow at the top, which encourages SharePoint visitors to follow with just a simple click. There’s a box in the footer for tweeting, so users don't have to leave the page.
Here’s @mypmbot’s twitter timeline embedded directly into this Blogger page:
Create a User Timeline
To begin, log into twitter.com and navigate to the widgets area of your personal settings page. Once there, you are allowed to create and configure new timelines. Start by clicking the button called “Create new” timeline to build custom code for your SharePoint 2010 web page.
Fill in the fields listed on the form, all are optional except for ‘domains’ which is required.
The configuration you create is stored on the twitter server, and once you've saved the timeline JavaScript code is generated to paste into your SharePoint page, which will load the timeline.
The following is example code. It will not work on your website if you copy and paste it, for reasons described in the “domains” section documented here.
<a class="twitter-timeline" href="https://twitter.com/mypmbot" data-widget-id="YOUR-WIDGET-ID-HERE">Tweets by @mypmbot</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
Add Twitter Timeline to SharePoint 2010
After creating the twitter widget, log into SharePoint 2010, then select a page where you want to add the twitter timeline. In the example below, the widget is being added to the top-right corner of the web page.
Inset the "Web Part" into the top-right corner
To inset the web part, use the ribbon bar at the top of the web page like shown below. Select "Inset" from the menu, and then click on "More Web Parts".
Next, choose the "Content Editor" web part
Add the web part to the web page, and then save all changes.
Open the web page in SharePoint Designer
After adding the web part using a simple web browser, open the web page in SharePoint Designer. In SharePoint Designer, hover over the area where the web part was added, and then select the newly added web part feature. Make sure SharePoint Designer is in split preview mode, so the code can be viewed at the top portion of the editor.
Next, Insert the Twitter Code into the web page using SharePoint Designer
Insert the twitter code created at twitter.com, between the brackets as shown below.
<![CDATA[ INSERT CODE HERE ]]>
After inserting the code, save the web page. You are finished.
SharePoint 2010 web page with embedded twitter timeline
No comments:
Post a Comment