Exact Steps to embed Flarum as commenting system

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. 😅

JohnP

The biggest problem that I'm having now using the iframe method as above is with setting the height of the iframe to fit the content, which seems to be a very difficult task when it is cross-site.

I've never really used iframes for anything much before and so I'm actively looking for answers but struggling a bit.

The flarum site is in a subdomain, talk.whatever.com and the site is at whatever.com but for the purposes of browser security in iframes that is cross-site as I understand it.

Anyone got any ideas or suggestions?

clarkwinkelmann

JohnP flarum/embed includes the iframe-resizer library which I understand can be used to communicate content height between iframe and parent page. But I've never gotten it to work properly and I don't know what the cross-origin limitations are.

In my Wordpress extension I have kept a fixed height for now because it was the most reliable option. But I am hoping to get something like iframe-resizer to work in the future.

JohnP

clarkwinkelmann I'm going to take a look at it sometime over the next couple of days and if I come up with something useful I'll report back :-)

EnricoBaldi

@luceos @clarkwinkelmann

This is my FLARUM installation:

when i try to open https://mysite.com/flarum/embed/10 where 10 is my thread ID, i get 404 page not found.

I tried to remove al lextensions and nothing same error.

No idea where is the issue.

Any solution ?

BurungHantu

Hi guys, is this still working?

Hari

BurungHantu yup, it still works.