Créez des images de médias sociaux par publication avec le plugin WordPress Social Image Generator

C’était une annonce un peu discrète lorsque Daniel Post a présenté Générateur d’images sociales au monde en février par tweet. Mais, quand vous obtenez remplacé par Chris Coyier de CSS-Tricks et le co-fondateur de WordPress utilise votre plugin (allez, Matt, définissez une image par défaut), cela signifie que votre produit est sur la bonne voie.

Je ne suis pas facilement impressionné par chaque nouveau plugin qui survole mon bureau métaphorique. J’en installe probablement au moins deux douzaines par semaine. Parfois, je le fais parce que quelque chose a l’air pratique en surface, et je veux voir si je peux lui trouver une utilité. D’autres fois, je pense que cela pourrait valoir la peine d’être partagé avec les lecteurs de Tavern. Plus souvent qu’autrement, je considère que la plupart d’entre eux sont insignifiants. J’ai des normes élevées.

Alors que je discutais avec Post à propos de ce nouveau plugin, j’étais assez excité pour appeler Social Image Generator l’un de ces OMG-où-avez-vous-été? types de plugins. Vous n’entendrez pas ça souvent de moi.

Post a quitté son emploi de jour pour s’aventurer plus tôt cette année, créant son agence WordPress individuelle nommée Studio de Post. Social Image Generator est son premier produit.

“J’ai continué à voir des tutoriels sur mon fil Twitter sur la façon de générer automatiquement des images pour vos publications sur les réseaux sociaux, mais malheureusement, ils ont tous utilisé une approche similaire (Node.js) qui ne convenait tout simplement pas à WordPress”, a déclaré Post de l’inspiration. pour le plugin. « Cela m’a fait réfléchir : serait-il possible de faire cela pour WordPress ? J’ai commencé à jouer avec la génération d’images en PHP, et quand j’ai fait fonctionner ma preuve de concept, j’ai réalisé que cela pourrait en fait être quelque chose que je devrais poursuivre.

Dans notre discussion sur Slack, nous avons en fait vu le plugin en action. Alors qu’il partageait l’article de Coyier sur CSS-Tricks, la plate-forme de discussion affichait l’image sociale en temps réel.

<img data-attachment-id="117890" data-permalink="https://wptavern.com/create-per-post-social-media-images-with-the-social-image-generator-wordpress-plugin/sig-css-tricks" data-orig-file="https://wptavern.com/wp-content/uploads/2021/06/sig-css-tricks.jpg" data-orig-size="1792,603" data-comments-opened="0" data-image-meta="{" aperture="" data-image-title="sig-css-tricks" data-image-description="" data-medium-file="https://wptavern.com/wp-content/uploads/2021/06/sig-css-tricks-300x101.jpg" data-large-file="https://wptavern.com/wp-content/uploads/2021/06/sig-css-tricks-500x168.jpg" loading="lazy" width="1792" height="603" src="https://wptavern.com/wp-content/uploads/2021/06/sig-css-tricks.jpg" alt="Image sociale affichée via un aperçu d'article Slack." class="wp-image-117890" srcset="https://wptavern.com/wp-content/uploads/2021/06/sig-css-tricks.jpg 1792w, https://wptavern.com/wp-content/uploads/2021/06/sig-css-tricks-300x101.jpg 300w, https://wptavern.com/wp-content/uploads/2021/06/sig-css-tricks-500x168.jpg 500w, https://wptavern.com/wp-content/uploads/2021/06/sig-css-tricks-768x258.jpg 768w, https://wptavern.com/wp-content/uploads/2021/06/sig-css-tricks-1536x517.jpg 1536w" sizes="(max-width: 1792px) 100vw, 1792px" />Image générée automatiquement apparaissant via Slack.

C’était peut-être le destin. Peut-être que Post savait que cela arriverait et a pensé que ce serait une bonne idée de montrer son travail pendant que nous parlions de son projet. Quoi qu’il en soit, c’était suffisant pour impressionner l’écrivain qui n’a pas peur d’appeler votre plugin un feu de poubelle s’il sent la fumée.

La publication semble toucher toutes les bonnes notes avec ce plugin commercial. Il comporte de nombreuses fonctionnalités intégrées à la version 1.x, auxquelles nous reviendrons sous peu. Il est mort simple à utiliser. C’est quelque chose dont presque tous les propriétaires de sites Web ont besoin, en supposant qu’ils souhaitent partager leur contenu via les réseaux sociaux. Et, avec un Prix de départ de 39 $/an, ce n’est pas un produit trop cher pour ceux qui sont sur le point d’acheter.

Comment fonctionne le plugin

Après avoir installé et activé Social Image Generator, les utilisateurs sont redirigés vers l’écran des paramètres du plugin. Outre un champ de clé de licence et un bouton pour effacer le cache d’images, la plupart des utilisateurs voudront plonger directement dans l’éditeur de modèles.

Pour le moment, le plugin comprend 23 modèles. De Twenty Seventeen à Twenty Twenty-One, chacun des quatre derniers thèmes WordPress par défaut possède également un modèle dédié. Après en avoir sélectionné un, les utilisateurs peuvent personnaliser les couleurs du logo, du titre de la publication, etc. – le degré de personnalisation dépend du modèle choisi.

<img data-attachment-id="117893" data-permalink="https://wptavern.com/create-per-post-social-media-images-with-the-social-image-generator-wordpress-plugin/sig-templates" data-orig-file="https://wptavern.com/wp-content/uploads/2021/06/sig-templates.jpg" data-orig-size="1656,1487" data-comments-opened="0" data-image-meta="{" aperture="" data-image-title="sig-templates" data-image-description="" data-medium-file="https://wptavern.com/wp-content/uploads/2021/06/sig-templates-300x269.jpg" data-large-file="https://wptavern.com/wp-content/uploads/2021/06/sig-templates-500x449.jpg" loading="lazy" width="1656" height="1487" src="https://wptavern.com/wp-content/uploads/2021/06/sig-templates.jpg" alt="Capture d'écran de plusieurs modèles intégrés du plugin Social Image Generator." class="wp-image-117893" srcset="https://wptavern.com/wp-content/uploads/2021/06/sig-templates.jpg 1656w, https://wptavern.com/wp-content/uploads/2021/06/sig-templates-300x269.jpg 300w, https://wptavern.com/wp-content/uploads/2021/06/sig-templates-500x449.jpg 500w, https://wptavern.com/wp-content/uploads/2021/06/sig-templates-768x690.jpg 768w, https://wptavern.com/wp-content/uploads/2021/06/sig-templates-1536x1379.jpg 1536w" sizes="(max-width: 1656px) 100vw, 1656px" />Parcourir les modèles du plugin.

Outre la sélection des couleurs, les utilisateurs peuvent choisir entre différentes options de logo et de texte. Ils peuvent également télécharger une image par défaut pour les publications sans images en vedette.

<img data-attachment-id="117892" data-permalink="https://wptavern.com/create-per-post-social-media-images-with-the-social-image-generator-wordpress-plugin/sig-template" data-orig-file="https://wptavern.com/wp-content/uploads/2021/06/sig-template-scaled.jpg" data-orig-size="1599,2560" data-comments-opened="0" data-image-meta="{" aperture="" data-image-title="sig-template" data-image-description="" data-medium-file="https://wptavern.com/wp-content/uploads/2021/06/sig-template-187x300.jpg" data-large-file="https://wptavern.com/wp-content/uploads/2021/06/sig-template-312x500.jpg" loading="lazy" width="1599" height="2560" src="https://wptavern.com/wp-content/uploads/2021/06/sig-template-scaled.jpg" alt="Popup/superposition d'édition de modèle pour le plugin WordPress Social Image Generator." class="wp-image-117892" srcset="https://wptavern.com/wp-content/uploads/2021/06/sig-template-scaled.jpg 1599w, https://wptavern.com/wp-content/uploads/2021/06/sig-template-187x300.jpg 187w, https://wptavern.com/wp-content/uploads/2021/06/sig-template-312x500.jpg 312w, https://wptavern.com/wp-content/uploads/2021/06/sig-template-768x1229.jpg 768w, https://wptavern.com/wp-content/uploads/2021/06/sig-template-959x1536.jpg 959w, https://wptavern.com/wp-content/uploads/2021/06/sig-template-1279x2048.jpg 1279w" sizes="(max-width: 1599px) 100vw, 1599px" />Modification d’un modèle à partir de Social Image Generator.

Quand vient le temps de publier, le plugin ajoute une boîte méta à la barre latérale de publication. Les utilisateurs peuvent personnaliser davantage leur image sociale et leur texte par publication.

<img data-attachment-id="117895" data-permalink="https://wptavern.com/create-per-post-social-media-images-with-the-social-image-generator-wordpress-plugin/sig-post" data-orig-file="https://wptavern.com/wp-content/uploads/2021/06/sig-post.jpg" data-orig-size="1792,1007" data-comments-opened="0" data-image-meta="{" aperture="" data-image-title="sig-post" data-image-description="" data-medium-file="https://wptavern.com/wp-content/uploads/2021/06/sig-post-300x169.jpg" data-large-file="https://wptavern.com/wp-content/uploads/2021/06/sig-post-500x281.jpg" loading="lazy" width="1792" height="1007" src="https://wptavern.com/wp-content/uploads/2021/06/sig-post.jpg" alt="Personnalisation de l'image sociale via une boîte méta de la barre latérale de l'éditeur de publication WordPress." class="wp-image-117895" srcset="https://wptavern.com/wp-content/uploads/2021/06/sig-post.jpg 1792w, https://wptavern.com/wp-content/uploads/2021/06/sig-post-300x169.jpg 300w, https://wptavern.com/wp-content/uploads/2021/06/sig-post-500x281.jpg 500w, https://wptavern.com/wp-content/uploads/2021/06/sig-post-768x432.jpg 768w, https://wptavern.com/wp-content/uploads/2021/06/sig-post-1536x863.jpg 1536w, https://wptavern.com/wp-content/uploads/2021/06/sig-post-178x100.jpg 178w, https://wptavern.com/wp-content/uploads/2021/06/sig-post-640x360.jpg 640w, https://wptavern.com/wp-content/uploads/2021/06/sig-post-896x504.jpg 896w, https://wptavern.com/wp-content/uploads/2021/06/sig-post-1366x768.jpg 1366w" sizes="(max-width: 1792px) 100vw, 1792px" />Boîte de prévisualisation de l’image sociale sur l’écran de post-édition.

Une fois publié, le plugin crée une image qui apparaîtra lorsqu’une publication sera partagée sur les réseaux sociaux.

Dans l’ensemble, il y a une tonne que tout le monde peut faire avec les modèles intégrés. Il existe également une API permettant aux développeurs de créer la leur. Pour une première sortie, c’est une offre robuste. Cependant, il y a tellement plus qui peut être fait pour rendre le plugin plus flexible.

Version 2.0 et au-delà

Jusqu’à présent, Post a déclaré avoir reçu des tonnes de commentaires positifs ainsi que des demandes de fonctionnalités. Principalement, les utilisateurs demandent plus d’options de personnalisation et la possibilité de créer et d’utiliser plusieurs modèles. Ce sont les domaines prioritaires de la prochaine version. Avec une augmentation de 1,718% des revenus au cours du mois dernier, il semble qu’il pourrait avoir le soutien financier initial pour investir en eux.

« J’ai commencé à construire un éditeur glisser-déposer remanié, ce qui vous permettra de créer pratiquement n’importe quelle image personnalisée que vous voulez », a-t-il déclaré. “Il sera fortement inspiré par l’éditeur de blocs, et je souhaite que l’interface utilisateur et l’UX soient aussi proches que possible de l’éditeur de blocs.”

Le nouvel éditeur de modèles permettrait aux utilisateurs de créer plusieurs calques, une idée similaire au fonctionnement de Photoshop, Gimp et d’autres logiciels de retouche d’images. La différence serait qu’il peut extraire des données de WordPress.

“Par exemple, un calque ‘Image’ aura des options telles que la hauteur/largeur et le positionnement, ainsi que certaines options stylistiques telles que les filtres de couleur et les superpositions de dégradés”, a déclaré Post. « Un calque ‘Texte’ peut être de n’importe quelle police, couleur et taille et peut afficher des options prédéfinies (titre du message, date, etc.) ou tout ce que vous voulez. Vous pouvez ajouter un nombre infini de couches et les commander comme vous le souhaitez.

Il semble enthousiaste à l’idée d’ouvrir de nouvelles possibilités avec un éditeur remanié. Les utilisateurs pourraient potentiellement créer des modèles d’images sociales pour chaque type de publication. Une couche personnalisée peut extraire des métadonnées de publication, telles que l’affichage des prix des produits ou des évaluations de plug-ins de commerce électronique tels que WooCommerce.

“Les modèles prédéfinis existeront toujours, similaires aux modèles de blocs dans l’éditeur de blocs”, a déclaré le développeur du plugin. « Ils serviront cependant de point de départ plutôt que de produit final. Je vais également essayer d’implémenter le style de thème autant que possible.

“Les possibilités ici sont tellement infinies, et je suis incroyablement excité pour cette prochaine partie.”

Comme ça:

Comme Chargement…

— to wptavern.com

Créez des images de médias sociaux par publication avec le plugin WordPress Social Image Generator – WordPress Tavern

Comment fonctionne le plugin

Version 2.0 et au-delà

Comme ça: