Question

I’m currently implementing a feature to micropost posting where a user can link to a website, video, image etc and have info previewed to them before they submit the actual micropost.

I’m using:

Ruby Open graph protocol gem:

https://github.com/intridea/opengraph

Open graph protocol:

http://ogp.me

and I’ve tested it out and it’s very easy to use and works as expected:

Controller:

  require 'opengraph'

  def new
    @movie = OpenGraph.fetch('http://www.youtube.com/watch?v=6ifSudReeuM')
  end

View:

<iframe src="<%= @movie.video %>"></iframe>

This displays the video as expected. Ok, I need to do this without supplying the videos url in the controller manually but allow my users to do so but before submitting a micropost form.

There is a textfield in the micropost form for pasting links.

On pasting of a link or click of a div button inside my micropost form I want to pass the url to the controller and into OpenGraph.fetch() as an argument.

I want to do this without submitting my micropost form, meaning without clicking the main submit button for the form. I realise I can write up some JQuery to detect when the textfield has text pasted into it, then get the value of the text field which is the URL.

Question:

My question is how can I simulate what I’ve done with my current controller.. basically how I’ve manually provided a link as an argument for OpenGraph.fetch() but use the URL pasted/typed in the textfield by the user.

I just want to have my users see a preview of what they’ve pasted, e.g. video screen and description of video which I can grab from the object but before they submit the micropost.

1. User pastes link
2. My grabs the info using the open graph protocol gem
3. Displays it without the page refreshing

Then user can type their micropost content in the text area for the micropost form or just submit it.

All data is sent to the database.. e.g. micropost content and URL to the video.

I can’t seem to figure out a way to implement this. I’d appreciate some help thanks.

Kind regards

Answer 1

Set up a separate controller action that does nothing but fetch the ogp data for the passed url param, then set up an onpaste event in the frontend on the url input to fire an ajax request to the action, and pass back the data. When the ajax requests receives the response, it can populate the preview as expected.