JavaScript Facebook共享选项

Question

I have a task to make things with social networks.

As far as I have discovered, there are 2 options. One is through your News Feed and the other is through the Sharer. In the diagram below, I show both.
The first uses dialog/feed, and the second uses sharer.php.

There is a difference as to how content is shared. The first shares it how I would like it, the second shows it in a way that I dislike.

I do not like the fact that the second one shares the whole page. I want that share icon for every image in the page and to share that specific icon, but not the whole page. Is it possible to make the share icon to look like the second image, but share content like the first? How should it look in Javascript/HTML?

If you need any code, that I used, just ask.

Answer 1

For the second option to look like the first one - and to use a specific image - you have to use Open Graph tags in the shared URL: http://ogp.me/

The second option is made with the "sharer.php", i guess. It just takes the URL of the site as parameter, the rest of the information is loaded from the Open Graph tags in the page. You can also define more than one share icon btw, so the user can browse through them before sharing.

For example, if you want a specific image to show up, you need this tag:

<meta property="og:image" content="http://mydomain.com/myimage.jpg" />

Btw, you can always test the Open Graph tags in the Facebook debugger:

https://developers.facebook.com/tools/debug

It also refreshes the tags, if they don´t show up correctly in the share window, just put the link into the debugger again.