"Recent topics" widget embedding?

Hi guys,

Is it possible to get some kind of embed code for the "Recent topics" widget of my forumotion forum so I can add it to my shopify site?
I use PunBB template.

Your good advice is highly appriciated.

Best regards,
Amir.

l Fabricator wrote:Hi guys,

Is it possible to get some kind of embed code for the "Recent topics" widget of my forumotion forum so I can add it to my shopify site?
I use PunBB template.

Your good advice is highly appriciated.

Best regards,
Amir.

Hello,

are you wanting to add a Forumotion widget to a web site?

Yes, to my shopify website.

Fabricator wrote:Yes, to my shopify website.

I don't think that's possible forumotion widgets are only for forumotion.

I saw its possible with Phobb2 template...

Sorry phpBB2

Hello,

You could copy the html code in the template for that and paste it in a html part on your site and then add the widget via the elements in the template.

Hi,
Thanks for your prompt reply.
Can you pls explain where i can find the HTML of the "recent topics"?
Pasting the HTML in my site is the easy part for me :-)

Go to your forum:
Admin Panel >> Display >> Templates >> Portal >> mod_recent_topics
That is the hmtl code for the recent topics widget.

Ok, not a problem. Copy&paste done. Now how can I add the widget via the elements in the template?

Can you create widgets on your other site?  If you can, add the code to the widget.

MrMind wrote:Go to your forum:
Admin Panel >> Display >> Templates >> Portal >> mod_recent_topics
That is the hmtl code for the recent topics widget.

If this applied on another website, which is not Forumotion, most of the variables will not format.

Fabricator,

Could you please provide a link to your forum ? You can use a trick with iframes to display a certain element, however, I will need your forum URL.

Thanks

Hi Ange,
Thanks for your reply.
My forum adresss: http://fabricator.do-forum.com/forum

Thank you!
Amir.

On your Forumotion forum go to Administration Panel > Modules > JavaScript codes management

Make sure JavaScript code management is enabled(and save if it wasn't), then create a new script.

Title : Your choice
Placement : in the portal
Paste the code below and submit :

Code:

$(function(){$(function(){
  if (location.hash == '#fatopics') {
    document.body.innerHTML = document.getElementById('comments_scroll_div').innerHTML;
    document.body.style.marginTop = 0;
    var a = document.getElementsByTagName('A');
    for (i=0;i<a.length;i++) a[i].target='_blank';
  }
})});

Then just paste this in a widget on your website :

Code:

<iframe style="width:346px;height:200px;border:none;overflow:hidden;" src="http://fabricator.do-forum.com/#fatopics"></iframe>

You can adjust it's width/height as you wish from the style attribute.

I believe he wants to place this on a site not hosted by Forumotion.

SLGray wrote:I believe he wants to place this on a site not hosted by Forumotion.

That's what I'm attempting with the iframe.

I'll use a hash in the window url (#fatopics) which will trigger a script on the forum to replace the body contents with only the widget. ( for example ) If done correctly it should work on other websites since it's a window to the forum.

Oh sorry, I thought you misunderstood.

It's fine. ^^

I did make a small mistake, if you clicked the links they would open in the iframe. I edited the script in my last post so they would open in a new tab, but I'll post it below also.

Code:

$(function(){$(function(){
  if (location.hash == '#fatopics') {
    document.body.innerHTML = document.getElementById('comments_scroll_div').innerHTML;
    document.body.style.marginTop = 0;
    var a = document.getElementsByTagName('A');
    for (i=0;i<a.length;i++) a[i].target='_blank';
  }
})});

OK, with your great support I am making a progress here
Only thing is that instead of the last topics window i got a windows that opens the whole site...

Fabricator wrote:OK, with your great support I am making a progress here
Only thing is that instead of the last topics window i got a windows that opens the whole site...

Have you followed this step ? I do not see any script sources on your forum from JS management.

Ange Tuteur wrote:On your Forumotion forum go to Administration Panel > Modules > JavaScript codes management

Make sure JavaScript code management is enabled(and save if it wasn't), then create a new script.

Title : Your choice
Placement : in the portal
Paste the code below and submit :

Code:

$(function(){$(function(){
  if (location.hash == '#fatopics') {
    document.body.innerHTML = document.getElementById('comments_scroll_div').innerHTML;
    document.body.style.marginTop = 0;
    var a = document.getElementsByTagName('A');
    for (i=0;i<a.length;i++) a[i].target='_blank';
  }
})});

Hi Ange,
As far as i understand I followed you step after step...

Ange Tuteur wrote:On your Forumotion forum go to Administration Panel > Modules > JavaScript codes management

Make sure JavaScript code management is enabled(and save if it wasn't), then create a new script.

Title : Your choice
Placement : in the portal
Paste the code below and submit :

Code:

$(function(){$(function(){
  if (location.hash == '#fatopics') {
    document.body.innerHTML = document.getElementById('comments_scroll_div').innerHTML;
    document.body.style.marginTop = 0;
    var a = document.getElementsByTagName('A');
    for (i=0;i<a.length;i++) a[i].target='_blank';
  }
})});

In the portal is the placement my friend. You left it in the homepage

Ange and Mr.Mind - Thanks a lot!!!
it works like a dream :-)

Fabricator wrote:Ange and Mr.Mind - Thanks a lot!!!
it works like a dream :-)

All credits should go to Ange. I didn't do anything!

BTW... just another small question :-)
How can I change the color of the Iframe window?

I mean the background color of the Last topics Iframe like in this pic:

Replace the code Ange gave you with this one:

Code:

<iframe style="width:346px;height:200px;border:none;overflow:hidden;background:#FFF;" src="http://fabricator.do-forum.com/#fatopics"></iframe>

Then change the background:#FFF; with the color you want.

Hi, just tried it..
I changes the color for 1 second and then goes back to original color,light blue...

Try this instead:

Code:

<iframe style="width:346px;height:200px;border:none;overflow:hidden;background:#FFF!important;" src="http://fabricator.do-forum.com/#fatopics"></iframe>

MrMind wrote:Try this instead:

Code:

<iframe style="width:346px;height:200px;border:none;overflow:hidden;background:#FFF!important;" src="http://fabricator.do-forum.com/#fatopics"></iframe>

This will only change the background of the iframe, not the elements in the window. Once the window is loaded the background color is determined by the color of the body tag on the forum itself.

I checked your forums sheet and didn't see this color. Try adding this rule to the stylesheet on your forumotion forum :
Display > Colors > CSS stylesheet

Code:

body { background-color:#FFF; }

Change #FFF to any color you want.