Steam Store onebox plugin


(fearlessfrog) #1

EDIT: This plugin has been converted to the onebox gem, and should be part of the base Discourse install as of onebox gem: v1.5.28

I couldn’t find anything that would onebox simple Steam store links, so I created a very barebones plugin that uses the official Valve store widget.

Example on a public forum:

It’s based on GitHub - naveed-ahmad/marvelapp_onebox: Marvelapp Onebox for embedding mobile prototypes in Discourse after I decided that onebox caching the data might be confusing considering we use them at forums.mudspike.com usually to indicate that something is on sale (and if it’s cached it might not be anymore). The iframe feels bad, but it works.

I also did the basic CSS selector for a non-iframe version, and the bare bones of that spelunking is here if anyone wants to run with a non iframe version in the future:

  def data
    # Age verification page doesn't show price :|
    price = raw.css("meta[@itemprop='price']")
    if price.empty?
      {
        url: @url,
        name: raw.css("title").inner_text,
        image: raw.css("link[rel=image_src]").first["href"],
        description: raw.css("meta[@name='Description']").first["content"],
        price: "Age Verification Blocks Price",
        currency: " "            
      }
    else
      {
        url: @url,
        name: raw.css("title").inner_text,
        image: raw.css("link[rel=image_src]").first["href"],
        description: raw.css("meta[@name='Description']").first["content"],
        price: raw.css("meta[@itemprop='price']").first["content"],
        currency: raw.css("meta[@itemprop='priceCurrency']").first["content"]            
      }
    end

As my first-time Discourse user 2 hour attempt the only thing that really tripped me up was making sure the plugin.rb have the correct ruby comments at the top as metadata, as I think the Admin/plugins feature uses that.

Hope it’s useful - enjoy!


Steam Profile Onebox plugin
Steam Profile Onebox plugin
#2

Nice plugin ! Very useful for my forum


(Sam Saffron) #3

Can you perhaps send through a PR to add this support into onebox direct?

That way everyone can get it for free :slight_smile:


(fearlessfrog) #4

Will do. Wanted to dip my toe just quickly as a plugin, but if it survives contact with the users after a few days then I’ll PR it for sure.


#5

I’ve whitelisted store.steampowered.com and steampowered.com, tried without them in the whitelist but that doesn’t seem to work in my forum. I tried multiple links, even Dirt Rally like your example. I examine the admin board, to see if i didn’t deactivate one option that would help

It creates like a blank onebox :

edit : ok that’s fixed. I had to un-whitelist them and after a restart of the app and refresh of my browser it’s good to go, thanks !


(Sam) #6

This would be excellent on my forum, thanks! Looking forward to seeing it moved into the core. :slight_smile:


(fearlessfrog) #7

I used it without whitelist in the settings / onebox list. It will only work on a catalog app entry, i.e.

http://store.steampowered.com/app/346110/

…where both the full URL http: or https: and the ‘/app/’ part are needed.


#8

I just edited my post, it works now, I had to un-whitelist steampowered and refresh multiple times.


(Kane York) #9

Not sure about the “Buy” string in front of the game title, but otherwise great job at copying the native style! I thought it was an iframe or something at first :smile:


#10

Jeez, I had a weird problem, and after 50 trials, I was able to fix it.

When I tried the plugin, I had a weird margin problem :

I didn’t add any margin, any <br> in the composer, just a link, one blank line, and the Test.

It seemed to work fine on your forum so I think it was a problem with my customized css (I have a lot of these). I was able to correct the situation by adding a div around the iframe.


(fearlessfrog) #11

It is though :smile: . The steam store widget is an iframe. I was considering doing it via scraping on the app page, but there’s localization plus caching issues with that. The /widget/ support from Valve will also mean the onebox stands an ok chance at not breaking over time.


(Kane York) #12

Oh, guess I didn’t look at it too closely then… Ok!

Make sure that you provide a preview_html method in the onebox, otherwise the iframe will reload every time the preview updates.


(fearlessfrog) #13

When I add this to the Onebox gem (rather than a plugin) would it help if I put a class on the iframe element? It sounds like you might have a !important override on the iframe height somewhere?


(fearlessfrog) #14

I didn’t know that - thanks. What would I render in the preview, if not the iframe?


#15

You were right, I had a iframe class in the customize section, it didn’t even had an !important.

I fixed it, I don’t think it needs any improvement, it was my bad.

Thanks !


(@SenpaiMass) #16

Is it integrated with the Discourse one box ?[quote=“sam, post:3, topic:35723, full:true”]
Can you perhaps send through a PR to add this support into onebox direct?

That way everyone can get it for free :slight_smile:
[/quote]


(fearlessfrog) #17

Not yet, it’s a plugin that works with the onebox.

I wasn’t sure if I liked the approach and how unusual a link type it would be to be added to the main discourse onebox gem. It seems to be working ok so far, so I do plan to issue a pull request for included discourse support as part as a normal onebox engine.

EDIT: Submitted PR - the onebox gem is very nice and self-contained, and it was quick to do - cool. If it gets accepted we can deprecate this plugin.


(Jeff Wong) #18

…That was the fasted PR merge ever. So we can expect this in the next beta release then?


(Kane York) #19

Something like a correctly sized <img> or just “Steam Store - %{game_title}” (in a correctly sized div).


(fearlessfrog) #20

Ah, I get what you mean now. I got confused looking for an existing ‘preview_html’ example, but have added a ‘placeholder_html’ now. I’ve done a PR, as you’re correct - an iframe refresh every keystroke isn’t playing nice.