0

When you send a website link in chat apps like WhatsApp or Skype, a small website preview will appear. I want to implement similar feature in my web application developed using HTML 5 and JavaScript. So if I have link, i want to show rich review for it on a div tag.

What needs to be done to achieve desired results.

SharpCoder
  • 18,279
  • 43
  • 153
  • 249
  • 1
    With 4K+ rep you should know that SO isn't for "hints or suggestions". Come back when you have a specific coding question. – j08691 Jan 30 '17 at 18:12

1 Answers1

0

These previews in Skype and similar programs are generated based on the meta tags.

Different applications/social networks use different meta tags for this. Skype, for example, understands the open graph meta tags: http://ogp.me/

There are many articles describing the process of writing meta tags. You can take a look at this two:

https://warfareplugins.com/open-graph-tags-twitter-cards-rich-pins/

https://moz.com/blog/meta-data-templates-123

What you would need is a renderer, that takes the link, parses the page, tries to understand the meta tags and renders the preview based on the meta tags.

Some of the open source implementations for open graph are listed here: http://ogp.me/#implementations

Damjan Tomic
  • 390
  • 2
  • 11