How to make a preview box using LinkPreview API?

Question

Like below image link preview shown, it's an image of what I expect in same way as soon as user inserts a link in the textarea.

From link preview site, I am getting image,url,description of site in console window, but I want to display inside a <div> tag.

html:

<div class="show_lnk"></div>

 <textarea class="form-control" placeholder=""  id="url" name="user_status"></textarea>

jquery:

jQuery("textarea[name*='user_status']").blur(function () {
    var target = jQuery(this).val();
    $.ajax({
        url: "https://api.linkpreview.net",
        dataType: 'jsonp',
        data: {q: target, key: '5a2e292e7d25bb63a2d3b4c63524cd10abe39420dc68c'},
        success: function (response) {
            var data=response;
            $(".show_lnk").html('<img src="'+data.image+'" style="width:30px;height:30px;" ');
            console.log(data.image);
        }
    });
});

actually i want link preview like facebook so i tried this one but after implementing this code is working for only youtube url perfectly but i am developing site so need exactly facebook link preview system can u please help me for this if u have please give me any source code for link preview i had tried so many github plugins but none of them is working — user_1234, Dec 11 '17 at 11:58
@mickmackusa pls guide me about link preview system about how to handle this i am eagerly waiting for this. — user_1234, Dec 11 '17 at 12:03
i am creating website in which user will post one url so using jquery or other trickyway it should make preview of link for example if add https://google.co.in then it should generate image clickable link i am new to jquery language so don't have grip how to do this same as facebook link preview system — user_1234, Dec 11 '17 at 12:07
@mickmackusa i have edited my question please view it once and guide me ,image is to indicate what i expect . — user_1234, Dec 11 '17 at 12:32

mickmackusa · Accepted Answer · 2017-12-11T13:05:54.730

1

I'm not entirely sure where you are stuck, but this will display the response data in some simple tags inside of a dedicated <div>. How you manipulate the css is totally up to you.

I've pre-loaded google.com into the textarea, so the only thing you have to do is trigger the function by causing a blur event (tab or whatever).

$(document).ready(function() {
  $("textarea[name*='user_status']").blur(function () {
    var target = $(this).val();
    $.ajax({
      url: "https://api.linkpreview.net",
      dataType: 'jsonp',
      data: {q: target, key: '5a2e292e7d25bb63a2d3b4c63524cd10abe39420dc68c'},
      success: function (response) {
        $("#show_lnk").html('<img src="'+response.image+'"><h3>'+response.title+'</h3><h4>'+response.description+'</h4><a href="'+response.url+'">'+response.url+'</a>');
      }
    });
  });
});

body {
    padding: 25px;
}

#show_lnk img {
  width:30px;
  height:30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="form-control" placeholder="" id="url" name="user_status">google.com</textarea>     
<div id="show_lnk"></div>

edited Dec 11 '17 at 13:05

answered Dec 11 '17 at 13:03

mickmackusa

43,625
12
83
136

1

@Nick talk to the OP. – mickmackusa Dec 11 '17 at 13:07
1

@Nick Really? Downvote my correct and proven answer? -2 points does not hurt me, you are only damaging StackOverflow when you downvote correct answers. – mickmackusa Dec 11 '17 at 13:08
@faiz If you have a new question, you should post a new question. The format on StackOverflow is meant to keep questions contained/isolated for easy searching. If you keep extending a single question, it can pose an unfair expectation on a single volunteer. – mickmackusa Dec 11 '17 at 13:50
@faiz I don't think there is much that can be done about that. – mickmackusa Dec 11 '17 at 14:14

How to make a preview box using LinkPreview API?

1 Answers1