Welcome to the Question2Answer Q&A. There's also a demo if you just want to try it out.
Ask a Question

How would I add this plugin, Link-Preview?

+2 votes
1.9k views
in Plugins by
edited by

https://github.com/embedly/jquery-preview

Basic Setup

To get started you need to put jQuery, Embedly jQuery, jquery.preview.js and preview.css. into your page:

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
  <script src="http://cdn.embed.ly/jquery.embedly-3.0.5.min.js" type="text/javascript"></script>
  <script src="http://cdn.embed.ly/jquery.preview-0.3.2.min.js" type="text/javascript"></script>
  <link rel="stylesheet" href="http://cdn.embed.ly/jquery.preview-0.3.2.css" />
</head>

Next set up a simple form that allows a user to input link:

<form action="/update" method="POST">
    <input id="url" type="text" name="url"/>

    <!-- Placeholder that tells Preview where to put the selector-->
    <div class="selector-wrapper"></div>
</form>

You then need to tell preview what field to listen to:

<script>
    // Set up preview.
    $('#url').preview({key:'your_embedly_key'})

    // On submit add hidden inputs to the form.
    $('form').on('submit', function(){
      $(this).addInputs($('#url').data('preview'));
      return true;
    });
</script>

2 Answers

+1 vote
by
You'd need to make a Layer plugin: http://docs.question2answer.org/plugins/layers/

You can override certain functions from the theme class, for example head_css() to add the CSS and head_script() to add the JavaScript.

BTW that script you linked appears to use Angular, so unless you're already using Angluar on your Q2A site it will be complete overkill to load that just for one feature.
by
Thanks Scott,is there any other plugins available for Link-preview to implement for Q2A??
by
edited by
Hello scott,
       Instead of  getting questions,I have to get link-previews  to store and display.

I already have code for  link-preview http://embedly.github.io/jquery-preview/demo/link.html  and its completely functioning.


All that i need  to display link-preivew instead of questions.


which part has to be over-ridden  inorder to turn that input box(where we type question) to input box(to get links)


Kindly tell me only which part has to be overridden.

Thank you
by
edited by
Hello scott,
   Have  a look into this plugin completely made of jquery..
by
+1 vote
by 
<code>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
  <script src="http://cdn.embed.ly/jquery.embedly-3.0.5.min.js" type="text/javascript"></script>
  <script src="http://cdn.embed.ly/jquery.preview-0.3.2.min.js" type="text/javascript"></script>
  <link rel="stylesheet" href="http://cdn.embed.ly/jquery.preview-0.3.2.css" />
</code>
Snow Theme by Q2A Market
Powered by Question2Answer
...