How to generate a custom image for facebook crawler?

Question

My web site is able to show user listings in a nice way. On the page, among other things, I display a material design sheet like this (an image, some text and some dynamic parameters of the listing):

Coludik panel

When Facebook crawls this page, I would like to supply something that looks like this (or a bit simplier) and obviously it would have to be generated dynamically since what you see is on the client side only. The thumbnail on the top left corner is too small to be given to Facebook alone. The effect would not be very pleasing.

Is it technically feasible to achieve this? Some libraries done for that?

You mean control how Facebook renders things on FB? IINM, aside from standard [Open Graph markup](https://developers.facebook.com/docs/sharing/webmasters) where you can customize the "share image" (and more), the other "layout" possible is when you do advertising (they provide a few options on how your "post" will be advertised). — EdSF, Feb 25 '17 at 20:37
No my question is not about how this happens on the facebook side. I know I am obliged to supply an image url. What I want is to be able to generate this image dynamically and then supply it through a Stream. But how do I generate this image on server side? Is there a libray that helps? Can it even be vectorial and export to an image? — Nicolas Cadilhac, Feb 25 '17 at 21:44
You could look into the something like [Image resizer](https://imageresizing.net/). Hth... — EdSF, Feb 25 '17 at 23:41
@EdSF I don't think this will help me compose an image with text, icons, ... This seems more like an image processing tool. — Nicolas Cadilhac, Feb 27 '17 at 21:12
Probably misunderstood your question judging by the answer below where you're actually _creating_ an image. — EdSF, Feb 27 '17 at 23:41

score 0 · Accepted Answer · answered Feb 27 '17 at 15:23

I had similar problem in one of the web applications where I wanted a user to share its vote on a particular movie. What I came up with was to create a unique page for each user vote with the following meta headers:

<meta property="og:image" content="@share_image" />
<meta property="og:site_name" content="@SystemResource.application_name" />
<meta property="og:url" content="@share_url" />
<meta property="og:type" content="article" />
<meta property="og:title" content="@share_title" />
<meta property="og:description" content="@Model.review_text" />

My @share_image contains url to an image with movie cover and user's vote (1-10) on top of it.

I generate my @share_image when user cast a vote and it is done in the following way:

// main image
Image canvas = Bitmap.FromFile(configData.MainImageAbolutePath);

// vote image (circles with numbers from 1 to 10)
Bitmap smallImg = new Bitmap(configData.OverlayImageAbolutePath);

// create new image
using (Graphics gr = Graphics.FromImage(canvas))
{
    // here you can play with quality
    gr.SmoothingMode = SmoothingMode.HighQuality;
    gr.InterpolationMode = InterpolationMode.HighQualityBicubic;
    gr.PixelOffsetMode = PixelOffsetMode.HighQuality;

    // place vote image on top of the cover using x and y coordinates
    gr.DrawImage(smallImg, new Point(configData.X, configData.Y));
}
// here you can play with quality
ImageCodecInfo jgpEncoder = GetEncoderInfo(ImageFormat.Jpeg);
Encoder myEncoder = Encoder.Quality;
EncoderParameters myEncoderParameters = new EncoderParameters(1);
EncoderParameter myEncoderParameter = new EncoderParameter(myEncoder, 100L);
myEncoderParameters.Param[0] = myEncoderParameter;

// generate our @share_image
canvas.Save(configData.DestinationImageAbolutePath, jgpEncoder, myEncoderParameters);

you will also need this method:

public static ImageCodecInfo GetEncoderInfo(ImageFormat format)
{
    ImageCodecInfo[] codecs = ImageCodecInfo.GetImageDecoders();
    foreach (ImageCodecInfo codec in codecs)
    {
        if (codec.FormatID == format.Guid)
        {
            return codec;
        }
    }
    return null;
}

Use this reference to Graphics class to add text and other elements: https://msdn.microsoft.com/en-us/library/system.drawing.graphics(v=vs.110).aspx

Thank you. I leave for a 1 week trip but I will be sure to review this when back. — Nicolas Cadilhac, Feb 27 '17 at 21:13
This was a good starting point to make it work. Thank you. I added the wiring to return the image from an MVC action method as PNG, and as such I didn't need the ImageCodecInfo part. — Nicolas Cadilhac, Mar 22 '17 at 14:45

How to generate a custom image for facebook crawler?

1 Answers1