Problem


Embedding Twitter timeline into SharePoint's Script Editor Web Parts using an auto generated code from Twitter APIs may not always work, as your Script Editor Web Part might get broken if you edit the page for multiple times.


Solution


A workaround solution to make the Twitter timeline work always is by loading Twitter javascript file dynamically instead of embedding the script tag using HTML. The following steps explain the solution in details:


Step 1: Get Your Twitter Timeline Embed Code

  1. Go to Twitter Publishing tools.
  2. Type the Twitter timeline you would like to embed. For example, this is the embed code for our Twitter timeline: https://twitter.com/shortpoint_tw
  3. Then click on Copy code.


Watch this recording: https://cl.ly/kqyR


You can find details on how to create embed code for your Twitter timeline from here.


Step 2: Create New ShortPoint


Go to Site Settings > ShortPoint Dashboard > ShortPoint Generator



Type the name of the generated ShortPoint ( e.g: twitter )



In the rich text editor, switch to the code view and paste the Generated HTML from Twitter APIs excluding the script tag,
Your code will look similar to the following:



You can change the height using the data-height property:



Important: 

When you paste the Twitter HTML into the editor, make sure to remove the <script> tag, as we're going to load that JavaScript file in a different way next.


Now Save the Generated ShortPonit



Step 3: Add Twitter Script


Edit the page where you want to add the Twitter Timeline and add a Script Editor Web Part ( anywhere in the page )




Note: 

It does not matter where you actually place the Script Editor Web Part, as it will be invisible to end users, and it's only required to load Twitter's javascript file dynamically.


Click on Edit Web Part



Click on Edit Snippet



On a new browser tab, open the link ( load-twitter.js ) and copy the content of the Script File




Now paste the copied content into the Embed dialog, and click Insert




Step 3: Insert the new Twitter ShortPoint


We're almost ready, the only thing that is left, is to place the new ShortPoint we just created in the place that we would like the Twitter Timeline to appear.


On the same page, Open the ShortPoint Insert Button 



Search for the Generated ShortPoint we created in Step 1 ( e.g: we named it here twitter ), and Click on it



Then Click Insert to add it to the page




Save the page, and you are done.




You can add your new ShortPoint into other ShortPoints as well, like Panel for example.


Soon, we will release Twitter ShortPoint that should make it much easier to add and control twitter timeline and also tweets.


Happy Twitter :)