Wie erstelle ich ein benutzerdefiniertes Bild für Facebook Crawler?

Question

Meine Website ist in der Lage, Benutzerlisten auf eine nette Art und Weise anzuzeigen. Auf der Seite, unter anderem, zeige ich ein Material Design-Blatt wie folgt aus (ein Bild, einen Text und einige dynamische Parameter der Auflistung):

Wenn Facebook Seite kriecht, würde Ich mag an etwas liefern, das so aussieht (oder ein bisschen einfacher) und natürlich müsste es dynamisch generiert werden, da das, was Sie sehen, nur auf der Client-Seite ist. Das Thumbnail in der oberen linken Ecke ist zu klein, um es Facebook alleine zu geben. Der Effekt wäre nicht sehr erfreulich.

Ist es technisch möglich, dies zu erreichen? Einige Bibliotheken dafür gemacht?

Answer 1

Ich hatte ähnliches Problem in einer der Web-Anwendungen, wo ich wollte, dass ein Benutzer seine Stimme über einen bestimmten Film teilen. Was ich herauskommen, war eine einzigartige Seite für jeden Benutzer Abstimmung mit den folgenden Meta-Header zu erstellen:

<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" /> 

Meine @share_image enthält URL zu einem Bild mit Filmabdeckung und Benutzerbewertung (1-10) oben drauf .

ich generieren meine @share_image, wenn der Benutzer eine Stimme abgegeben und es wird auf die folgende Weise:

// 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); 

müssen Sie auch diese Methode:

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

Mit diesem Verweis auf Graphics-Klasse füge Text und andere Elemente hinzu: https://msdn.microsoft.com/en-us/library/system.drawing.graphics(v=vs.110).aspx