How to … add embedded Thortspace content to your Facebook page
Method 1 : Use a static HTML page tab App provided by a third party… There’s lots to choose from, this is one I tried and worked when I tried it
This method assumes you have created a Facebook page, and that you know what a Facebook page is. The following steps will walk through adding some embedded Thortspace content onto a tab on your page:
(1) Log into your Facebook account and go to the Facebook Apps search page. Search Facebook Apps for “static HTML”.
Or you can just follow this link:
https://www.facebook.com/search/str/static+HTML/keywords_apps
(2) Add the App as a page Tab to your page:
(3) Select which of your pages you want to add the Tab to.
(4) Now go ahead and add the Tab to that page:
(5) The StaticHTML Facebook App will create a new Tab on your page called “Welcome” by default (you can change this, but I thought that was ok). Click the “Edit tab” button.
(6) Paste in an iframe containing the Thortspace link — this can be a sphere URL or a journey URL, or probably anything actually.
For example:
<iframe src=”https://thort.space/journey/110898789587140112950_5129815931640490948_2023071682883803580/1"
width=”100%”
height=”800px”
frameBorder=”0">
</iframe>
(7) Go back to your Page Tab to view the result:
(8) You can change the ordering and naming of Tabs on the Facebook tab settings pages:
(9) If you want or need a second tab on your Facebook page with embedded Thortspace content in it, you could use the one circled below (or possibly any of the other similars). I tried the one circled below and it worked fine for me:
Method 2 : Create your own Facebook App
So far I have not figured out how to make this available to the general public, only a specific list of users (probably restricted to friends or members or a group or page)- but there’s lots of places on the web to tell you how to fix this.
Just so as to set the correct level of expectation, my use of a Facebook App to embed Thortspace in Facebook is not as yet doing any significant integration with Facebook accounts, user profiles or demographics… it is simply embedding the Thortspace Web version inside a Facebook page. Currently the Thortspace App itself is really more integrated than this because it allows users to link up their Facebook account to their Thortspace account and thereby share spheres with Facebook friends who have also linked their accounts in this way.
A Facebook App is essentially just a website that Facebook has agreed to let you embed into Facebook’s framework. So in order to follow this method currently, you will need a web server — ie. something that will serve pages of HTML for you.
(1) Login to your Facebook account and go to:
https://developers.facebook.com/apps/
(2) Add a new App.
(2) Facebook prompts you for a name and contact email.
(3) Fill out the required fields and then click or tap “Quick Start”.
(4) The quickstart will generate code for the index page of App. This will be needed later according to what kind of integration you plan to do.
Copy the code into the index page of your app.
(5) The Quickstart will also provide you with the URL of your App.
(6) In our case, we will add the same or a similar iframe element to the one we used above into the index page of our App. In order to make the iframe “responsive” to the size of its container, the width and height properties are set to percentages (100% and 96%).
(7) Under the “App Review” tab set the switch to Yes to start making the App public. It won’t be fully public until you “Submit for Review” — the greyed out button circled below.
(8) In the meantime you can go the “Roles” tab and add interested friends to your “Testers” list. They will then be able to visit your App.
(9) Now you can go to the URL of your App, and see it working:
(10) The App will not be available to the public yet. To do this you will have to put the App through the review process provided by Facebook (see the greyed out button I have circled in step (7) above).
