How to Display Blog Posts on Your Page

This article will show you different ways to display blog posts on your SharePoint intranets using ShortPoint.

Here is an example of how it may look like:

TABLE OF CONTENTS

• Prerequisites
• Part 1: Set up your source library or list
  • Option 1: Create a custom SharePoint Site Pages view
    • Interactive Tutorial
    • Step-by-step Tutorial
  • Option 2: Create a SharePoint list containing blog post details
    • Interactive Tutorial
    • Step-by-step Tutorial
  • Option 3: Get the required information from your data source
• Part 2: Display your blog posts using ShortPoint Connect
  • Interactive Tutorial
  • Step-by-step Tutorial

Prerequisites

• You have the latest ShortPoint SPFx version installed on your SharePoint environment.
• You are a ShortPoint Designer with an active license.
• You have blog posts on your SharePoint site or external website that you want to display on your page

Part 1: Set up your source library or list

Depending on the source of your blog pages, you have three options for setting them up so that they can be displayed on your SharePoint page.

Option 1: Create a custom SharePoint Site Pages view

If you publish blog post pages within your SharePoint site, they will be listed on your Site Pages library. To display only blog posts, you can create a custom view with filtered content. You can then connect to this new view using any ShortPoint Design Element.

Here is an example of a custom Site Pages view listing only blog posts.

Interactive Tutorial

Check out an interactive tutorial on how to create a custom view for your Site Pages library.

Step-by-step Tutorial

Follow these detailed steps to create the custom Site Pages view:

Step 1: Open Site Pages

• From the SharePoint suite bar, click the cogwheel icon to open the settings window.
• Select Site Contents from the options.
• Open the Site Pages library.

Step 2: Add a new column that identifies blog posts

In Site Pages, different types of pages will be listed. You will need to create a new column that you can use to identify your blog posts from the rest of the pages.

• Start by clicking the Add column header.
• Select the type of content you want to add to the column. We recommend selecting Choice.
• Name your new column and add a selection of choices. In our example, we named the new column ‘Page Type’ and added ‘Blog’ as one of the choices.

Step 3: Identify your blog posts

Using the new column, identify the pages that are blog posts on your site. This can also be done as you create new blog posts to ensure that they are displayed on your SharePoint page as soon as they are published.

• Select a blog post page.
• Click the ellipsis icon beside the title.
• Select More options and open the page Properties.
• Click the new column field to show the choices and select ‘Blog”.

Once a selection is made, the property will automatically be saved.

Step 4: Create a custom view

Now you can filter the contents of your Site Pages and create a custom view that only contains blog posts.

• Click the wedge icon beside your new column header.
• Choose Filter by.
• Select only pages that are identified as a Blog.
• Then open the view options by clicking the wedge icon beside the current view name.
• Hit Save as.
• Enter a name for your custom view and click Save.

You have successfully created a custom view for your Site Pages library. Take note of your custom view name and proceed to Part 2 of this article.

Option 2: Create a SharePoint list containing blog post details

If your blog posts are in different site collections across your tenancy and you want to curate the content on your page, a SharePoint list where you consolidate information would be the best option. You can also do this for external blog pages that do not have an RSS feed.

Here is an example of a SharePoint list containing blog post data:

Interactive Tutorial

Go through this interactive tutorial on how to create a SharePoint list containing blog post data you want to display on your SharePoint page.

Step-by-step Tutorial

Here are the steps you need to follow to create a SharePoint list containing blog post details:

Step 1: Create a new SharePoint list

• On your site page, press the New button.
• Choose List from the options. You will be presented with an option to use available list templates. For our example, we will start from a Blank list.
• Name your list and hit Create. You will see a list with only one Title column.

Step 2: Add columns

Determine what categories of information you want to display on your SharePoint page and add them as columns on your list.

• Press the Add column header.
• Select the content type you will be adding to that column.
• Then hit the Next button.
• Enter a name for your column, adjust settings if required, and Save.

You have now successfully created a new column for your SharePoint list. Repeat these steps for the other columns that you want to add.

Step 3: Fill out blog post information

Once all columns have been added, you can start entering the data under each column for individual blog posts. There are two views where you can update your list:

Standard view

The standard view utilizes a form that you can complete for each item on your list.

• Click the New button.
• Enter corresponding data for individual blog posts to complete the form.
• Hit Save. Do the same for all entries on your list.

Grid view

The grid view is where you can add data in each cell directly and it will automatically be saved. This view is great when you already have the information in a spreadsheet that you can easily transfer by copying and pasting.

• Click Edit in grid view.
• Press Add new item or click on any cell where you want to input or paste your data.
• If you want to go back to the standard view, hit Exit grid view.

When all the data you need is added to your SharePoint list, you can proceed to connect it to any ShortPoint Design Element on your SharePoint page. This will be a dynamic connection where updates to this list will automatically be retrieved and displayed on your page.

Option 3: Get the required information from your data source

You can connect directly to your data source and display their contents on your SharePoint page if you have any of the following information:

• RSS Feed URL that you can use to establish a RSS Feed connection
• Rest API query that will display the result that you need for the Rest API connection
• Working code that you can use together with the Code Design Element

We will not be demonstrating how you can use these options in this article. However, please check out the support articles for each of these features to learn more about how to use them.

Part 2: Display your blog posts using ShortPoint Connect

To display blog posts on your SharePoint page, you will be using ShortPoint Connect. This is a dynamic integration that allows you to retrieve data from the SharePoint library/list you created in Part 1.

Before you begin, make sure that you already inserted the Design Element you want to use on your page. Check out the Add and Edit Design Element module in ShortPoint Academy to know more.

Interactive Tutorial

As an example, here is a quick tutorial on how to connect to the SharePoint Site Pages custom view we created.

Note: If you want to show all blog posts within a site, hub site, or across the organization, you can use any of the news connection types with property filters.  If the blog page you want to display on your SharePoint site has an RSS feed, it is best to use the ShortPoint RSS Feeds connection type.

Step-by-step Tutorial

Check out the detailed steps to complete the connection between your blog posts and the Design Element on your page.

Step 1: Edit ShortPoint web part

• Edit the SharePoint page.
• Select the ShortPoint web part and press the pencil icon to edit it.

Step 2: Edit the Design Element

• In the Action Toolbar, hit Switch to Grid Mode.
• Navigate to the Image List Design Element on the page.
• Click the cogwheel icon to open the settings window.

Step 3: Establish a connection to your blog posts

• Go to the Connect tab.
• Select the appropriate connection type. This varies depending on the location of your SharePoint list or the nature of your data source. In our example, we are connecting using the Current Site connection.
• Select the SharePoint list you are connecting to and (optional) ensure that you choose the custom list view you created.
• (Optional) Limit the items to display to your desired number
• Hit Connect.

Note: If you want to show all blog posts within a site, hub site, or across the organization, you can use any of the news connection types with property filters.  If the blog page you want to display on your SharePoint site has an RSS feed, it is best to use the ShortPoint RSS Feeds connection type.

Step 4: Map the blog post details

• Go to the Items tab.
• Delete default content.
• Click the link icon and select the column name or item property you want to display on that field.

Step 3: Update and save

• Preview the result.
• Once satisfied, Update the Image List Design Element, and;
• Remember to Save all your changes.

Your SharePoint page should now display the blog post details within the ShortPoint Design Element. This is a dynamic connection that regularly retrieves and updates information from your source.

Related articles:

• ShortPoint Connect: Basic Tutorial
• Connection Type: Site News
• Connection Type: Hub News
• Connection Type: Org News
• Connection Type: RSS Feeds