Integrate Twitter with SharePoint

In this post I will explain different approaches that can be used to display Twitter feeds in SharePoint.

Using Twitter embed code

This approach is based on getting twitter embed code of twitter widget from twitter and using that code in SharePoint Content Editor WebPart or Html Form webpart.
Step 1 Create a User widget in Twitter
1) Login to www.twitter.com
2) Login in to the user account (create one if doesn’t exist)
3) Navigate to Settings -> Widgets.
4) To create a user widget (such as @username)

  • Click on ‘User timeline’ tab and then click ‘Create Widget’. This will generate the twitter embed code.
  • Copy the twitter embed code and paste it in a new html file

To create a Search widget (such as #sometag)

  • Click on ‘Search’ tab and then click ‘Create Widget’. This will generate the twitter embed code.
  • Copy the twitter embed code and paste it in a new html file

Step 2 Add Content Editor Webpart in SharePoint site
5) Upload the html file, which was created in above step, in ‘Site Assets’ document library.
6) Edit and add the content editor webpart to the SharePoint page where twitter feed needs to be displayed
7) Edit the webpart and add a link to the html file.
8) Save the page and done!!

Approach 2 – Using JQuery plugin

This approach uses JQuery plugin that displays twitter feeds.
Step 1 – Download JQuery plugin from https://github.com/philipbeel/Tweetable .
Step 2 – Upload tweetable.jquery.min.js file to ‘SiteAssets’ document library.
Step 3 – Create a new html file and add the code shown below – (Replace the username with the actual user, see highlighted)

<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js”></script>

<script type=”text/javascript” src=”../SiteAssets/tweetable.jquery.min.js”></script>

<script type=”text/javascript”>

$(document).ready(function () {

         $(‘#tweets’).tweetable({ username: ‘username’, time: true, limit: 10, replies: false, position: ‘append’ });

     });

 </script><div id=”tweets”></div>

Step 4 – Upload this html file to ‘SiteAssets’ document library.
Step 5 – Edit and add the content editor webpart to the SharePoint page where twitter feed needs to be displayed.
Step 6 – Edit the webpart and add a link to the html file.
Step 7 – Save the page and done!!

Leave a Comment

Your email address will not be published. Required fields are marked *