Migrate from Invision Power Board to Circle

Why use Circle community?

Circle is modern community platform that offers the flexibility to create an engaging, social network type of experience.

With direct integrations to tools like WordPress and Memberspace, Circle can fit seamlessly into the rest of your membership stack.

This article will help you migrate from your current Invision Power Board Community (or whichever WordPress based Community you may be using) to Circle

Here is a Live demo Community we created for this article: https://community.memberfix.rocks/

What you will need

1 – Circle account – A powerful community platform, integrated into your product.

2 – WP OAuth Server – User Authorization Management Systems For WordPress.

Video Tutorial

Setting Circle

Login to your Circle Community.

1 – Update your community’s Logo, Icon and Branding

To change Logo:

1.1 – Go to Settings

1.2 – Scroll down to the Branding section

1.3 – Click and choose color on color Picker in Brand color section

1.4 – Click Upload a Logo in Logo section

1.5 – Click Upload an Icon in Icon section

1.6 – Click Save on the bottom and check results

2 – Add a navigation bar to community

2.1 – Go to Settings

2.2 – Go to Code Snippets

2.3 – In the Head code snippets section, put your pages names, links in following format:

 <style>
#tmc-nav {
padding: 20px 0;
background-color: #388A1E;
overflow: hidden;
position: relative;
z-index: 15;
}
#tmc-nav ul {
max-width: 1315px;
display: block;
margin: 0 auto;
text-align: center;
}
#tmc-nav ul li {
display: inline-block;
margin: 0 20px 0;
}
#tmc-nav ul li a {
color: #FFF;
font-weight: bold;
text-transform: uppercase;
display: block;
}
.header {
height: 129px !important;
}
body.is-standard-layout {
padding-top: 100px !important;
}
</style>

Note: Be careful, if you will not add </style> you will not have access to your community because all CSS will be broken. Example below:

2.4 – In the JavaScript code snippets section, put your pages names, links in following format:

var nav = ‘<div id=”tmc-nav”><div id=”mobile-menu-button”><span></span><span></span><span></span></div><ul id=”nav”><li><a href=”https://memberfix.rocks/blog“>Articles</a></li><li> <a href=”https://memberfix.rocks/the-membership-site-success-podcast/“>Podcast</a></li><li><a href=”https://memberfix.rocks/dl/mf-toolkit/“>Resources</a></li><li><a href=”https://memberfix.rocks/contact/“>Contact Us</a></li><li><a href=”https://memberfix.rocks/wp-login.php?action=logout“>Log Out</a></li></ul></div>’;

document.getElementById(‘mainHeader’).innerHTML += nav;

document.addEventListener(‘click’, function (event) {
if (!event.target.matches(‘#mobile-menu-button’)) return;
event.preventDefault();
var menu = document.getElementById(‘nav’);
var isVisible = menu.offsetHeight;

if (isVisible > 0) {
menu.style.display = ‘none’;
} else {
menu.style.display = ‘block’;
}
}, false);

Note: You need to change text marked bold. Please don’t change formatting for correct work of code.

2.5 – Click Save on the bottom and check results:

3 – Additional CSS Code

3.1 – Go to Settings

3.2 – Go to Code Snippets

3.3 – In Head code snippets field you can add any CSS code to any elements on page that have class or id.

For example:

Add mobile menu:

#mobile-menu-button {
display: none;
float: right;
overflow: hidden;
cursor: pointer;
z-index: 9999;
padding: 6px;
position: relative;
}
#mobile-menu-button span {
width: 30px;
height: 2px;
background-color: black;
display: block;
float: right;
clear: both;
margin: 0 15px 5px;}

Logo size:

.community__brand .community__logo img {
max-height: 50px;}

Note: Be very careful with CSS changing. If you will have some issues contact support and they will solve it very fast.

4 – Changing Circle’s domain

To install subdomain, for example: community.memberfix.rocks – you need to add CNAME on domain DNS settings.

4.1 – Go to your domain registrar’s control panel, and search for DNS settings.

4.2 – Click on “add a CNAME record” and enter following settings:

Type: CNAME
Host/Name: “community” in this example (or your choice of subdomain)
Value or Points To:  example.circle.so

To install domain, for example: memberfixcommunity.rocks – you need to add both CNAME and A record.

4.3 – Go to your domain registrar’s control panel, and search for DNS settings.

4.4 – Click on “add a CNAME record” and enter following settings:

add a CNAME from www to example.circle.so, it is explained in 4.2.

4.5 – Click on “add a A record” and enter following settings:

add an A Record from @ (root) to example.circle.so

4.6 – Go to the Circle Settings, click on Custom Domain on the left sidebar, and insert the subdomain/domain in the text field.

Note: If you are using Cloudflare domain provider, please make sure before you add CNAME or A record, you click on the orange colored cloud sign (proxy) to make it grey colored (turn off proxy). And then you can add the the CNAME and A record.

SSO setup

1 – Setup SSO App between WordPress and Circle

1.1 – Go to Settings

1.2 – Go to Single Sign-On

2 – Install WordPress OAuth Server on your website

2.1 – Go to Plugins > Add New > Search for WP OAuth Server

2.2 –  Install and Activate WP OAuth Server (OAuth Authentication) By WP OAuth Server.

2.3 – Create a consumer/client using the admin interface.

This client will be unique to the site that the Single Sign-On will be taking place. Ensure that the Redirect URI is set correctly. On the left panel click on OAuth Server and click Add New Client:

Client Information

Client Name: Name to identify the application. You can pick any name.

Redirect URI: You can find the callback Url from Circle OAuth2 SSO App.

<Community Url>/auth/oauth2/callback
ex: https://community.domain.com/auth/oauth2/callback54

2.4 – Once the information is entered, click on “Create Client”, and after the client is created, you can see the Client ID and Client Secret which are required for the next step.

2.5 – Check under OAuth Server > Settings > General Settings > is checked

3 – Setup SSO on Circle Community Side

3.1 – Go to Single Sign-On in settings

Below is how you should do the settings:

General Settings

Enable SSO: is on.

OAuth Provider: WordPress

Provider Name: WordPress

Client ID: From WordPress OAuth Server explained in step 2

Client Secret: From WordPress OAuth Server explained in step 2

3.2 – Once all the information is entered click Update.

4  –  Authentication Flow

4.1 – Login to your WordPress website

4.2  – Go to Circle Community

4.3 – Click Login

4.4 – Choose Login with WordPress

Now all users from IP Board Community will have access to new Circle Community, because they stored in WordPress.

Recreate Topics from IP Board

1 – Go to Home Page in Circle

2 – Go to Spaces

3 – Go to your IP Board Community and Copy Spaces Information

4 – Press Add Spaces in Circle

5 – Add Name and Icon

6 – Save changes

Repeat this steps to all Spaces.

In conclusion

As you can see, the installation of Circle Community is pretty simple. Migration from IP Board can take some time, depending on number of content in your community.

If you’d rather delegate this project to us, sign up for a MemberFix plan and we’ll get going. ????

If you have any questions please ask them in comments.