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

How would I add this plugin, Link-Preview?

+2 votes
307 views
asked Dec 10, 2016 in Plugins by VÍgñêsh Vïçky
edited Dec 18, 2016 by VÍgñêsh Vïçky

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
answered Dec 14, 2016 by Scott
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.
commented Dec 17, 2016 by VÍgñêsh Vïçky
edited Dec 18, 2016 by VÍgñêsh Vïçky
Hello scott,
   Have  a look into this plugin completely made of jquery..
+1 vote
answered May 6 by Pulicat J
<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>
...