1

After I add a link (facebook.com) on Google plus, it shows me:

1

I want to do same thing on my page but I don't know what it is (Enter url location -> connect to the page and get some informations (logo, name, title...) -> display).

p/s: Sorry for javascript tag, I'm not sure it can be done with javascript or jquery or something else.

SVSchmidt
  • 6,269
  • 2
  • 26
  • 37
  • 2
    You're right, it can't be done with JavaScript alone due to cross-origin requests. You'll need to AJAX to your own server, have your server reach the destination to extract information, then report back to the browser. – Niet the Dark Absol Jul 08 '17 at 09:37

1 Answers1

1

This is basically done with Meta tags of the page you're targeting. Google Plus (and Facebook for example) fetch this metadata from the page you're linking to, parse it and show what they want to show.

It's not an actual iframe or embed.

Take a look at The Open Graph protocol: http://ogp.me/

For example if you look at the DOM of the OGP page you'll find some meta tags like:

<meta property="og:description" content="The Open Graph protocol enables any web page to become a rich object in a social graph.">

Now if you're paste that link (http://ogp.me/) into Facebook, that's exactly what will be displayed there. Google Plus doesn't fetch this description for example, it just takes og:image and og:title.

If you want to know how to grab these information of the specified page you should search for questions about that directly, for example here: How can I retrieve og/meta attributes of a resource?

Hope it helps.

malifa
  • 8,025
  • 2
  • 42
  • 57
  • Many thanks! It seems like a service, not a plugin/tutorial that I can download/learn to follow. I would upgrade my knowledge. –  Jul 08 '17 at 15:25