Embed Specific Topic(s) on remote site

Breaker

Hello All.
I am experimenting with the embed feature of Vanilla 2.1 and was wondering if it is possable to embed just a topic or thread in a topic instead of the whole site?

Do I need a plugin to achieve this or is there something out of the box that can do this and I just havent stumbled across it yet?

hgtonight

What code snippet are you currently using to embed Vanilla?

Breaker

The code provided via the embed forums section of the dashboard. Which seems to just load the entire site into my page..

hgtonight

And what is the code provided via the embed forums section of your dashboard?

Breaker

sorry.
this is what is provided via the dashboard in vanilla 2.1.10 from the following
http://local.vanilla.com/index.php?p=/embed/forum/universal

code:

 <script type="text/javascript" src="http://local.vanilla.com/index.php?p=/js/embed.js"></script>
<noscript>Please enable JavaScript to view the <a href="http://vanillaforums.com/?ref_noscript">discussions powered by Vanilla.</a></noscript>
<div class="vanilla-credit"><a class="vanilla-anchor" href="http://vanillaforums.com">Discussions by <span class="vanilla-logo">Vanilla</span></a></div>

hgtonight

You can have the embed script call up a specific page in Vanilla by defining vanilla_path to a valid path.

Let's say you want to load a specific discussion and it's path is /discussion/28/desk-bubble-the-wrong-bit. You would place the following right before your embed script:

<script type="text/javascript">var  vanilla_path = '/discussion/28/desk-bubble-the-wrong-bit';</script>

Now the iframe will load that path first.

Breaker

Ahh I see. Ok cool thanks alot @hgtonight

PFAFF

I have a similar question, I think @hgtonight.

I have a forum embedded on my Wordpress site and it works great (thanks to much help from this community!).

However, let's say I wanted to embed specific categories of discussions on other pages on my site. Is there a way to do that? This is the embed script used for my site:

<script type="text/javascript" src="//www.nerdlouisville.org/forum/js/embed.js"></script>

Which is redirected to /community# on the embed.

Let's say I wanted to embed on a separate page all the discussions from /community#/categories/category1.

Is that possible?

PFAFF

To complicate matters, is there a way to JUST pull in the highlighted section from this pic on that embed:

PFAFF

I tried this:

<script type="text/javascript">var vanilla_path = '/categories/media';</script><script type="text/javascript" src="//www.nerdlouisville.org/forum/js/embed.js"></script>

And, it seemed to work great. So, if I can just pull the highlighted section above, that'd be incredible. Is that possible?

Bleistivt

#Head, #Panel {
  display:none;
}
.Row {
  width: 100%
}
.ContentColumn {
    margin: 0;
}

or switch to the embed theme which already does most of this

PFAFF

@Bleistivt, thanks so much for the response! Is there a way to isolate that CSS to the particular page I am embedding on? For example, on the main page, I still want everything shown.

PFAFF

I'm thinking I can do this by creating a custom class (CSS or DIV?) and then wrap the embed code into that div and class, but I'm not versed enough to figure it out. Am I on the right track?

Bleistivt

@PFAFF That won't work, but maybe you are lucky and vanilla adds an embed class to the body if it is embedded. Could you link me to your site, because I currently don't have an embedded forum at hand to check?

PFAFF

Sure thing, @Bleistivt.

So, here's the link to my "main" Community page: http://www.nerdlouisville.org/community/#

What I'd like to do is have various pages where categories of discussions are displayed in an embed on different pages, but displaying only the highlighted box as noted above in the photo.

As an example, let's say I want the category "Media" displayed on a separate page. Using the code above: <script type="text/javascript">var vanilla_path = '/categories/media';</script><script type="text/javascript" src="//www.nerdlouisville.org/forum/js/embed.js"></script>we get this example page:

http://www.nerdlouisville.org/sandbox/#/categories/media

Which is awesome! I'd just need to get rid of the sidebar / header to make it perfect so it only displays the Discussions.

Then, I could have a different page for each category I want, like:
*/media/#/categories/media
*/games/#/categories/games

With each page displaying discussions from that category of course.

PFAFF

I could also style those particular "category discussion" pages so they fit better within the page with the right sidebar, like on the /sandbox/ example.

Bleistivt

Unfortunately it looks like there is no way to check if the forum is embedded through the framework.

A workaround solution is to add the a class to the body via javascript:

jQuery(function () {
    // http://stackoverflow.com/a/326076
    function inIframe () {
        try {
            return window.self !== window.top;
        } catch (e) {
            return true;
        }
    }
    if (inIframe()) {
        document.body.className += ' embedded';
    }
});

Then modify the CSS snippet I posted above to only apply when the body has the embedded class

.embedded #Head, .embedded #Panel {
  display:none;
}
.embedded .Row {
  width: 100%
}
.embedded .ContentColumn {
    margin: 0;
}

Both of these go into your forum theme (the custom.js and custom.css)

PFAFF

@Bleistivt, that code works! It'd be great for someone who's "main" forum is not embedded. Unfortunately, mine is so it affects that and I'm trying to have only the "sub-forums" on other pages than the main to be affected.

Is there a way perhaps I can create an inline / page-only style as a template that can be applied just for the "sub-forum" pages?

Bleistivt

@PFAFF You can do this by using more specific selectors, e.g. .Category-developers.embedded would only apply to the "Developers" category if it was embedded using above code.

PFAFF

@Bleistivt, holy shit! Worked perfectly! Just need to tweak the CSS to fit into my other pages and this is pure gold! Thanks so much!