Exact Steps to embed Flarum as commenting system

DeepGlue

Couldn’t find this anywhere.

What are the steps to link a Flarum thread with another static page? So either user can directly type comments on the static page where the flarum thread is embedded or the thread only shows what’s going on the actual forum.

Stepwise how to embed flarum on your static site ?

luceos

DeepGlue you can use flarum/embed; it's a first party extension; it currently is in the process of being made compatible with our latest beta.

DeepGlue

This had not been implemented anywhere then?
no official steps either ?

Staszek

If you didn't find any official steps in the documentation of in this forum, then apparently there are none🙂
You could do it via API. I guess you should setup forum like in the docs, then create API key and use API in your page.

DeepGlue

luceos
Can’t seem to find any steps though as in what to do after you enable the embed extension?

luceos

Create an iframe with this source: http://yourdomain.com/embed/:discussionId

DeepGlue

How do you get the right discussion id ? Through code/API ?
Or Can this be done manually ?

luceos

DeepGlue manually, the id of this discussion is 21099 in https://discuss.flarum.org/d/21099-exact-steps-to-embed-flarum-as-commenting-system/6

tcgriffith

This post came as the top from a google search for "flarum embed commenting", but there are no detailed guides so I'll document my steps here:

Prerequisite

A working flarum forum that you can install extensions (I'm using 0.1.0 beta 10)
A working static website, (I'm using Hugo, deployed by netlify)

Steps

install the dev:master version of flarum/embed:

composer require "flarum/embed":"dev-master"

enable it in the flarum forum under administration/extensions
test the embed page with the following link to make sure no errors showed up:
http://yourdomain.com/embed/:discussionId

embed it in the hugo template.
This is more of Hugo specific.
To avoid hard-coding the URL and forum id in the template files, I put these two parameters into
config.toml:

[params]
  comment_embed_url = "http://yourdomain.com/embed/"

and post yaml header:

---
forum_id: 1
---

and add the following code in the hugo template file where comment should appear

<div id="comment-box">
  <iframe id="forum-frame" src="{{ .Site.Params.comment_embed_url }}{{ .Params.forum_id }}"></iframe>
</div>

A working example at cosx.org

hrvoje_hr

@tcgriffith thanks for the instructions!

After this solution do you need to open a new discussion with every new post on the site manually, or is everything automatic?

tcgriffith

hrvoje_hr

Manually.

It's possible to make it automatic by using the flarum API though, But I didn't figure that part out, yet.

hankhank10

I get the following error when I attempt to install flarum/embed. What am I doing wrong?

mark@forum:~$ composer require "flarum/embed":"dev-master"
./composer.json has been created
Loading composer repositories with package information
Updating dependencies (including require-dev)
Your requirements could not be resolved to an installable set of packages.

Problem 1
- Installation request for flarum/embed dev-master -> satisfiable by flarum/embed[dev-master].
- flarum/embed dev-master requires flarum/core ⁰.1.0-beta.13 -> satisfiable by flarum/core[0.1.x-dev, v0.1.0-beta.13] but these conflict with your requirements or minimum-stability.

Installation failed, deleting ./composer.json.

luceos

hankhank10 did you run the command in the flarum root directory?

arteteco

Does this extension still work? I have it enabled over at Freeflarum, but when I try to embed this piece of html I see nothing at all. If I go the page on the browser I have a 404, but 103 is the topic ID

<iframe style="width:100%;max-width:100%;height:320px" class="" frameborder="0">https://forum.asnuaps.it/embed/:103</iframe>

askvortsov

arteteco haven't used iframes in a bit, but doesn't the link need to be a src attribute, not a child of the iframe tag?

arteteco

askvortsov That is indeed the case, silly me!
Now that I've done it, as

<iframe style="width:100%;max-width:100%;height:320px" class="" frameborder="0" src="https://forum.asnuaps.it/embed/:103"></iframe>

I have a Page not found. If I use embed/103 it loads the whole page and without style, so it's a messy mess of stuff. Am I doing something (else) wrong?

clarkwinkelmann

arteteco are you using the exact same base URL as defined in your config.php ? http(s) and subdomain.

Check the browser javascript console for possible errors or cross-origin/other warnings.

Also do you have the FoF Nightmode extension installed? There's probably the same issue that exists with my Wordpress extension where Nightmode causes all the base CSS from Flarum to not load.

The : before the number definitely isn't part of the URL. The correct URL is without it.

JohnP

Just a quick note, as much to myself as anything else after just spending a frustrating twenty minutes wondering why I could open the embed url in a browser window but not once I stuck it in an iframe....

If you have a similar problem then you might want to try checking the security headers on your flarum site. 😅