Gambar Media Sosial yang Dibuat Otomatis

Saya telah memikirkan tentang gambar media sosial lagi . Tahukah Anda, gambar itu (bisa) muncul saat Anda membagikan link di tempat-tempat seperti Twitter, Facebook, atau iMessage. Anda pada dasarnya meninggalkan uang di atas meja tanpa mereka, karena mereka mengubah posting biasa dengan sedikit tautan di dalamnya menjadi posting dengan gambar honkin 'attention grabbin' di atasnya, dengan area besar yang dapat diklik. Dari gambar apa pun di situs web, gambar media sosial mungkin menjadi gambar # 1 yang paling banyak dilihat, paling diingat, dan paling banyak diminta jaringan di situs.

Pada dasarnya HTML inilah yang membuatnya terjadi:

 <meta property="og:image" content="/images/social-media-image.jpg" />

Tapi pastikan untuk membacanya karena ada banyak tag HTML lain untuk melakukannya dengan benar.

Saya pikir saya memikirkannya lagi karena GitHub sepertinya memiliki kartu media sosial baru. Ini baru, bukan?

Gambar media sosial GitHub tersebut jelas dibuat secara terprogram. Lihat contoh URL .

Otomatisasi

Meskipun saya pikir Anda bisa mendapatkan banyak keuntungan dari gambar media sosial yang dirancang dengan tangan sepenuhnya, itu tidak praktis untuk situs dengan banyak halaman: blog, eCommerce… Anda tahu apa yang saya maksud. Trik untuk situs seperti itu adalah mengotomatiskan kreasi mereka melalui pembuatan template. Saya telah menyebutkan pendapat orang lain tentang ini di masa lalu , tetapi mari kita rekap:

Anda tahu apa kesamaan semua itu? Dalang .

Dalang adalah cara untuk memutar dan mengontrol salinan Chrome tanpa kepala. Ia memiliki fitur yang sangat berguna untuk dapat mengambil screenshot dari jendela browser: await page.screenshot({path: 'screenshot.png'}); . Begitulah cara situs web pengkodean font kami melakukan tangkapan layar . Ide tangkapan layar inilah yang membuat pikiran orang-orang bergerak. Mengapa tidak desain template media sosial dalam HTML dan CSS, kemudian meminta Dalang untuk screenshot itu, dan menggunakan itu sebagai media citra sosial?

Saya suka ide ini, tetapi itu berarti memiliki akses ke server Node (Puppeteer berjalan di Node) yang berjalan sepanjang waktu, atau yang dapat Anda tekan sebagai fungsi tanpa server . Jadi tidak heran jika ide ini beresonansi dengan kerumunan Jamstack yang sudah terbiasa melakukan hal-hal seperti menjalankan proses build dan memanfaatkan fungsi tanpa server.

Saya pikir gagasan "menghosting" fungsi tanpa server di URL – dan meneruskannya nilai dinamis dari apa yang akan disertakan dalam tangkapan layar melalui parameter URL juga cerdas.

Rute SVG

Saya agak menggali gagasan menggunakan SVG sebagai hal yang Anda template untuk gambar media sosial, sebagian karena memiliki koordinat tetap untuk desain di dalamnya, yang sesuai dengan model mental saya dalam membuat dimensi yang tepat yang Anda butuhkan untuk mendesain gambar media sosial. Saya suka bagaimana SVG bisa disusun .

George Francis menulis blog "Buat Gambar Sosial SVG Generatif Anda Sendiri" yang merupakan contoh bagus dari semua ini yang datang bersama-sama dengan baik, dengan sentuhan pengacakan dan imajinasi. Saya juga suka contenteditable , menjadikannya alat yang berguna untuk tangkapan layar satu kali.

Saya juga mencoba-coba membuat SVG dinamis: lihat halaman konferensi ini di situs Konferensi kami.

Sayangnya, SVG bukanlah format gambar yang didukung untuk gambar media sosial. Berikut Twitter secara khusus:

URL gambar yang akan digunakan di kartu. Gambar harus berukuran kurang dari 5MB. Mendukung format JPG, PNG, WEBP dan GIF. Hanya bingkai pertama dari GIF animasi yang akan digunakan. SVG tidak didukung.

Dokumen Twitter

Tetap saja, membuat / template di SVG bisa jadi keren. Anda mengonversinya ke format lain untuk penggunaan akhir. Setelah Anda memiliki SVG, konversi dari SVG ke PNG hampir mudah dilakukan. Dalam kasus saya, saya menggunakan svg2png dan tugas Gulp yang sangat kecil yang berjalan selama proses pembuatan.

Bagaimana dengan WordPress?

Saya tidak memiliki proses pembuatan untuk situs WordPress saya – setidaknya tidak ada yang berjalan setiap kali saya menerbitkan atau memperbarui posting. Tapi WordPress akan mendapatkan keuntungan terbesar (di dunia saya) dari gambar media sosial yang dinamis.

Bukannya aku tidak memilikinya sekarang. Jetpack sangat membantu dalam membuat ini berfungsi dengan baik. Itu membuat "gambar unggulan" dari posting menjadi gambar media sosial, memungkinkan saya untuk melihatnya, dan posting otomatis ke jejaring sosial. Inilah video yang saya lakukan tentang itu. Itu akan membawa saya ke tempat di mana gambar unggulan dilampirkan dan ditampilkan dengan baik.

Tapi itu tidak mengotomatiskan kreasi mereka. Terkadang grafik yang dipesan lebih dahulu saja adalah cara yang harus dilakukan (yang di atas mungkin contoh yang baik untuk itu), tetapi mungkin lebih sering kartu dengan template yang bagus adalah cara yang tepat.

Untungnya saya mengetahui Social Image Generator untuk WordPress dari Daniel Post. Lihat betapa mewahnya:

Inilah yang dibutuhkan WordPress!

Daniel sendiri membantu saya membuat template kustom hanya untuk CSS-Tricks. Saya bermimpi besar memiliki banyak template untuk dipilih yang mencakup judul, penulis, kutipan yang dipilih, gambar unggulan, dan hal-hal lain. Sejauh ini, kita hanya memilih dua, template dengan judul dan penulis, dan template dengan gambar, judul, dan penulis unggulan. Gambar dibuat dari metadata itu dengan cepat:

Jadi meta.

Ini bukan Dalang. Ini bahkan bukan svgtopng bertenaga PhantomJS. Ini adalah gambar yang dihasilkan PHP! Dan bahkan bukan ImageMagick , tetapi GD , hal yang dibangun langsung ke dalam PHP. Jadi, gambar-gambar ini tidak dibuat dalam jenis sintaks apa pun yang mungkin akan terasa nyaman bagi pengembang front-end. Anda mungkin lebih baik menggunakan salah satu templat, tetapi jika Anda ingin melihat bagaimana kode khusus saya dikodekan (oleh Daniel), biar tahu dan saya dapat memposting kodenya di tempat umum.

Hasilnya lumayan keren kan?

Menciak

Saya mengerti mengapa itu harus dibangun dengan cara ini: menggunakan teknologi yang akan bekerja secara harfiah di mana pun WordPress dapat berjalan. Itu sangat sesuai dengan semangat WordPress. Tapi itu membuat saya berharap pembuatan template bisa dilakukan dengan cara yang lebih modern. Seperti bukankah keren jika template untuk gambar media sosial Anda seperti social-image.php di root tema seperti file template lainnya? Dan Anda membuat template dan mendesain halaman itu dengan semua API WordPress normal? Hampir seperti Blok ACF? Dan itu mendapat tangkapan layar dan digunakan? Saya akan menjawab untuk Anda: Ya, itu akan keren.


Posting Gambar Media Sosial yang Dibuat Otomatis muncul pertama kali di CSS-Tricks .

Anda dapat mendukung CSS-Tricks dengan menjadi Supporter MVP .

May 15, 2021

codeorayo

Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Leave a Reply

Your email address will not be published. Required fields are marked *