How to Embed Custom X Content Using ShortPoint Code Design Element

Using the ShortPoint X Design Element will successfully integrate an X profile feed to your SharePoint sites. However, X has other display options you may want to take advantage of.

Here is an example of an X Embedded Post added to a SharePoint page:

We will discuss how you can get embed codes for these X display options and insert them into your intranet pages using the ShortPoint Code Design Element. There are two parts to the process.

TABLE OF CONTENTS

• Prerequisites
• Part 1: Prepare X embed code
  • Step 1: Go to the X publishing site
  • Step 2: Select a display option
  • Step 3: Copy the embed code
• Part 2: Add custom X content to your SharePoint page
  • Step 1: Insert the Code Design Element
  • Step 2: Add the copied embed code
  • Step 3: Save and publish your page

Prerequisites

• You have the latest ShortPoint SPFx version installed for your environment 
• You are a ShortPoint Designer with an active license

Part 1: Prepare X embed code

Here are the steps you need to follow to create and retrieve an X embed code.

Step 1: Go to the X publishing site

• There are two ways to open the X publishing site. [1] You can open the X publishing site on your browser and enter your X URL, or [2] Open the More ellipsis on an X post and hit embed post.

Step 2: Select a display option

• In the publishing site, you can choose to enter an X URL on the What would you like to embed field and then see the available display options or scroll down to see all the available display options.
• Select the display option you want to present on your site.
• (Optional) Click on the set customization options link to configure other settings of your X content.

Note:
Some X display options may require the user to be logged in to X in the same browser to view the content. In these cases, users might see a ‘Nothing to see here - yet' error message if they are not logged in. This is a current limitation set by X.

Step 3: Copy the embed code

• Once you are satisfied with how your X content looks, you can click the Copy code button. A pop-up window will confirm that you have successfully copied the embed code and you can proceed to the next step. 

Part 2: Add custom X content to your SharePoint page

Now that you have an X embed code, let us insert it into your SharePoint page. Follow the steps below:

Step 1: Insert the Code Design Element

• Edit the SharePoint page where you want to embed your X content.

• Select the ShortPoint web part and enter edit mode by clicking the pencil icon.

• The Code Design Element is currently only available in Grid Mode. Hit Switch to Grid Mode in the Action Toolbar.

• In the space where you want to add your X content, click the plus icon. This will open the Page Builder window.

• Scroll down or search for the Code Design Element and select it. It will be inserted and its settings window will appear.

Step 2: Add the copied embed code

• Paste the copied embed code into the HTML field.
• You can view how the widget will look like in the Preview section.

• Scroll down and disable Sandbox Mode.

• Hit Insert to apply your changes.

Step 3: Save and publish your page

• You can click the Preview icon on the Action Toolbar to check how the added X content displays on the page.
• Click Save to ensure your edits are retained.
• Hit Republish when you are ready for your users to see your updates.

That is all it takes to present custom X content on your SharePoint page.

Related articles:

• Introducing ShortPoint Code Design Element
• Known Issue: X Timeline Displays 'Nothing to see here - yet'
• Introducing ShortPoint X Design Element