Close

January 25, 2018

CMS Connect for WordPress

CMS Connect

So you have a WordPress site that you already maintain for your company. Your company site is not a Salesforce Community, they are two separate things, you want them separate, that makes sense. They shouldn’t be the same thing. You do however want to share that fabulous content that you worked so hard on putting together with your community members within your Community, but you don’t want to maintain it in two places, and you want to know your options… Look no further! CMS Connect is here to save the day declaratively!

Ok let’s back up a bit, I’m always getting too excited and start with the solution. Let’s talk about what we have to start with shall we? So let’s start with the basics of this fantabulous declarative solution, shall we?

What is CMS Connect?

CMS means Content Management System. CMS Connect is functionality that has been added by Salesforce to Communities. What it does is it lets you bring in assets that are stored outside of Salesforce into your community. The supported 3rd party systems are:

  • Adobe Experience Manager
  • Drupal
  • SDL
  • Sitecore
  • WordPress

By connecting your 3rd party system to your community, you are able to bring over your assets without having to transfer them, giving you one place to maintain them while allowing visibility across the systems.

In the Beginning

Once upon a time Salesforce created CMS Connect. In the beginning, this functionality only worked with things like headers and footers to bring over things like your branding. As time went on, Salesforce added to this functionality and added a beta version for JSON that lets you use more than your CSS, HTML and Javascript, and actually extends into things like the blog content from sites like WordPress and Drupal. This is what we will use for this example.

Connecting Your Blog

Connecting your WordPress blog is part of the beta JSON functionality. All communities can use this functionality, it’s just not 100% guaranteed it will work. They are working on this functionality, and hopefully expanding it to make it work with more

Setup

The following steps take you through how to setup the CMS Connect functionality in a Community. If you do not have a community enabled, you can find out how to create one with the instructions in my Intro to Lightning Community Templates presentation from the World Tour Chicago.

Step 1: CORS

CMS Connect uses Cross-Origin Resource Sharing (CORS) to access external content. Make sure to add Community Host to the list of trusted hosts in the CORS header in your CMS system.

This means that you need to setup your blog in the CORS section in Setup.

  1. To do this go to Setup – Security Controls – CORS or you can go to Setup and search for CORS in the quick find.
  2. Click the New buttonCMS Connect CORS Settings - New
  3. Enter your blog domain. You can either enter the domain itself or use a wildcard if you have a subdomain.

Step 2: The Connection

This functionality is for Communities and requires an enabled Community. Once you have a community created, you will be able to create the connection between your WordPress site and your Community.

  1. Access the Community you want to connect to WordPress.
  2. In the Community Workspace, select CMS Connect. Community_Workspaces - CMS Connect
  3. Once in the CMS Connect settings, click bright blue “New” button in the upper right. This is where you will enter the information for your connection.
  4. The Connection Information:

BASICS

    • Name: Enter a name that will make this Connection easy to recognize, I used “MeighanRocksSF Blog”
    • CMS Source: WordPress
    • Server URL: https://public-api.wordpress.comCMS_Connect_- Connection Details

JSON

In the JSON section we want to setup 2 paths

    • Name: Enter the name for your blog post list, I used “Blog Feed”
    • Type: Content List
    • Path: modify this text, replacing where I have ‘meighanrockssf.com’ with your blog URL:
      • Custom Domain: ‘rest/v1.1/sites/meighanrockssf.com/posts?number={itemsPerPage}&page={pageNumber}’
      • WordPress.com: ‘rest/v1.1/sites/meighanrockssf.wordpress.com/posts?number={itemsPerPage}&page={pageNumber}’
    • Name: Enter the name for your individual blog posts, I used “Blog Item”
    • Type: Content Item
    • Path: modify this text, replacing where I have ‘meighanrockssf.com’ with your blog URL:
      • rest/v1.1/sites/meighanrockssf.com/posts/{component}
      • rest/v1.1/sites/meighanrockssf.wordpress.com/posts/{component} CMS Connect - JSON Settings

      Click Save

  • Click Save

Step 3: Blog Post page

The next step is to create a page in the Community for the blog posts to display on. We only need to make one, and the component will dynamically show the content based on the ID added at the end of the URL.

  1. Go to the Community Builder.
  2. Create a custom Community page. Select whatever layout you prefer to display your blog post detail. CMS Connect - Community Builder New PageCMS Connect - JSON Blog Item Properties
  3. On the Community page, add the CMS Connect (JSON) component in the Content area.
  4. Enter the Properties information for the CMS Connection we created:CMS Source: Select the CMS Connection we just created
    • JSON Content: Blog Item
    • Component Path: {!id}
    • Content Item Layout: Detail
    • Detail: @detail
    • Author @name/author
    • Date: @date
    • Content: @content
    • Featured Image: @featured_image

Step 4: Blog Post List Page

Next up we need to create the page that will hold the list of blog posts. To do this we need to create another page in the Community Builder

  • Create a custom Community page. Select whatever layout you prefer to display your blog post list.
  • On the Community page, add the CMS Connect (JSON) component in the Content area.
  • Enter the Properties information for the CMS Connection we created:CMS Source: Select the CMS Connection we just created
    • JSON Content: Blog Feed
    • Component Path: LEAVE THIS BLANK
    • Content List Node Path: @post
    • Items Per Page: This is totally up to you, but I go with 9 as the default
    • Columns: Again, totally up to you, but I go with 3 as the default
    • Content List Layout: Grid
    • Detail: @detail
    • Author @name/author
    • Date: @date
    • Content: @content
    • Featured Image: @featured_image
    • Link Text: Read More
    • Type: My Pages
    • Page: Select the page you created in Step 3
    • URL Parameter Mapping: Add a new parameter with the following specs,
      • Name: id
      • Value: @ID

CMS Connect - JSON Blog List Properties

Step 5: Check out Your Components

So, if you look at your blog list page now, you’ll notice that your blog posts from your WordPress site are all listed in a pretty Grid of Cards!

CMS Connect - JSON Blog List Component in Builder - Populated

Fantastic! Now, we can’t click our Read More links in the builder, so we will want to click the Preview button in the upper right to check if our Post Detail page works. I like to click the pop into a new tab button too, just so it’s easier to see everything and the URL updates.

CMS Connect - JSON Blog List Component in Community

Here we have our beautiful list of posts on the Blog page. You can see the URL at the top, and the Read More link on each post. I click the Read More link on the Join Me When I Present at the World Tour post and….

CMS Connect - JSON Blog Item in Community w/ ID in address

BOOM!

The Read More link directs us to the Post Detail page we created, and you can see the Post ID has been appended to the end of the URL, and the page displays your blog post. Like magic, you have your WordPress content showing in your community, no need to maintain both, your data will update in Salesforce when you add new posts in WordPress.

Conclusion

Now that you have your blog content showing in your community, what other types of uses will you find for the CMS Connect? What else would you like to use it for? Personally, next up I’d love the ability to be able to add more from my blog to the community, easily add images from my WordPress site to my community for example, or have a component that lets me show all the pages on my blog so users can hop to it. Stepping in the other direction, I’d like to be able to have a shared file repository that isn’t on files, that is easy to connect that allows me to setup easy access to an external file library to share files across my Community and a 3rd party CMS solution.

So many possibilities, I can’t wait to see what’s next!!

Leave a Reply

%d bloggers like this: