كنت أفكر في صور وسائل التواصل الاجتماعي مرة أخرى. كما تعلمون ، الصور التي (يمكن) تظهر عند مشاركة رابط في أماكن مثل Twitter أو Facebook أو iMessage. أنت تترك الأموال على الطاولة بشكل أساسي بدونها ، لأنها تحول منشورًا منتظمًا مع رابط ol صغير فيه إلى منشور مع صورة كبيرة لانتباه Honkin ، مع منطقة ضخمة قابلة للنقر. من أي صورة على موقع ويب ، قد تكون صورة وسائل التواصل الاجتماعي هي الصورة رقم 1 الأكثر عرضًا ، وأكثرها تذكرها ، وأكثرها مطلوبة على الشبكة على الموقع.

هذا الشيء في الأساس من html هو الذي يجعلها تحدث:

ولكن تأكد من قراءتها لأن هناك مجموعة أخرى من علامات HTML أخرى للوصول إلى الصواب.

أعتقد أنني أفكر في الأمر مرة أخرى لأن Github يبدو أن لديه بطاقات وسائط اجتماعية جديدة. هذه جديدة ، أليس كذلك؟

يتم إنشاء صور GitHub Social Media هذه بشكل واضح. تحقق من مثال عنوان URL.

الأتمتة

بينما أعتقد أنه يمكنك الحصول على الكثير من الضجة من صورة التواصل الاجتماعي المصممة المصممة باليد تمامًا ، فإن هذا ليس عمليًا للمواقع التي تحتوي على الكثير من الصفحات: المدونات ، التجارة الإلكترونية ... أنت تعرف ما أعنيه. خدعة مواقع كهذه هي أتمتة إنشائها من خلال الهدف بطريقة أو بأخرى. لقد ذكرت أن الأشخاص الآخرين يأخذون هذا في الماضي ، لكن دعونا نلخص:

• درو McLellan: صور مشاركة اجتماعية ديناميكية
• vercel: فتح صورة الرسوم البيانية كخدمة
• هل تعرف ما يشترك فيه كل هؤلاء؟ Puppeteer.
• Puppeteer هي وسيلة للدوران والتحكم في نسخة مقطوعة الرأس من Chrome. لديها هذه الميزة المفيدة بشكل لا يصدق لتكون قادرة على التقاط لقطة شاشة لنافذة المتصفح: في انتظار page.screenshot ({path: 'screenshot.png'}) ؛. هذه هي الطريقة التي يقوم بها موقع خطوط الترميز الخاصة بنا بالشاشة. فكرة الشاشة هي ما يجعل عقول الناس مستمرة. لماذا لا تصمم قالب وسائل التواصل الاجتماعي في HTML و CSS ، ثم اطلب من Puppeteer لقطة الشاشة ، واستخدم
أن

كصورة الوسائط الاجتماعية؟

أحب هذه الفكرة ، ولكن هذا يعني الوصول إلى خادم عقدة (يعمل Puppeteer على العقدة) إما تعمل طوال الوقت ، أو يمكنك الضغط عليها كدالة بدون خادم. لذلك لا عجب أن هذه الفكرة صدى مع حشد Jamstack الذين اعتادوا بالفعل على القيام بأشياء مثل تشغيل عمليات البناء والاستفادة من وظائف الخادم.

أعتقد أن فكرة "استضافة" وظيفة الخادم في عنوان URL - وتمرير القيم الديناميكية لما يجب تضمينه في لقطة الشاشة عبر معلمة url أيضًا ذكية. مسار SVG

أحفر فكرة استخدام SVG كشيء قالب لصور وسائل التواصل الاجتماعي ، جزئيًا لأنه يحتوي على مثل هذه الإحداثيات الثابتة لتصميمها داخل ، والتي تتطابق مع النموذج العقلي الخاص بي في صنع الأبعاد الدقيقة التي تحتاجها لتصميم صور الوسائط الاجتماعية. يعجبني كيف يكون SVG قابلاً للتأليف.

قام جورج فرانسيس بتدوين "إنشاء صور اجتماعية SVG الخاصة بك" ، وهو مثال رائع على كل هذا يجتمع بشكل جيد ، مع لمسة من التوزيع العشوائي والنبوة. أنا أحب الخدعة القابلة للاسترداد أيضًا ، مما يجعلها أداة مفيدة لقطات شاشة لمرة واحدة.

لقد انخرطت في إنشاء SVG الديناميكي أيضًا: تحقق من صفحة المؤتمر هذه على موقع المؤتمرات لدينا.

لسوء الحظ ، فإن SVG ليس تنسيق صورة مدعوم لصور الوسائط الاجتماعية. إليك Twitter على وجه التحديد:

URL من الصورة لاستخدامها في البطاقة. يجب أن يكون حجم الصور أقل من 5 ميجابايت. يتم دعم تنسيقات JPG و PNG و WebP و GIF. سيتم استخدام الإطار الأول فقط من GIF الرسوم المتحركة. لا يتم دعم SVG.

مستندات Twitter

لا يزال ، يمكن أن يكون تكوين/templating في SVG باردًا. يمكنك تحويله إلى تنسيق آخر للاستخدام النهائي. بمجرد أن يكون لديك

في حالتي ، استخدمت SVG2PNG ومهمة Gulp صغيرة جدًا تعمل أثناء عملية الإنشاء.

ماذا عن WordPress؟

ليس لدي عملية بناء لموقع WordPress الخاص بي - على الأقل لا يتم تشغيله في كل مرة أقوم فيها بنشر منشور أو تحديثه. لكن WordPress سوف يستفيد

أكثر (في عالمي) من صور الوسائط الاجتماعية الديناميكية.

ليس الأمر أنني لا أملكهم الآن. يقطع Jetpack شوطًا طويلاً في جعل هذا العمل جيدًا. إنه يجعل "الصورة المميزة" لصورة Post the Social Media ، ويسمح لي بمعاينةها ، والشروط التلقائية للشبكات الاجتماعية. إليك مقطع فيديو قمت به في ذلك. سيؤدي ذلك إلى إرفاق الصور المميزة وتظهرها بشكل جيد.

لكنها لا تتم أتمتة إنشائها. في بعض الأحيان ، يكون الرسم المفصل وحده هو السبيل للذهاب (قد يكون المذكور أعلاه مثالًا جيدًا على ذلك) ، ولكن ربما تكون البطاقة التي تم تنظيمها بشكل جيد في كثير من الأحيان هي السبيل للذهاب.

لحسن الحظ ، اشتعلت ريح مولد الصور الاجتماعية لـ WordPress من دانيال بوست. انظر كيف يتوهم:

هذا هو بالضبط ما يحتاجه WordPress!

ساعدني دانيال نفسه على إنشاء قالب مخصص فقط لتجارة CSS. كان لدي أحلام كبيرة من وجود مجموعة من القوالب للاختيار من بينها تتضمن العنوان ، والمؤلف ، والاقتباسات المختارة ، والصور المميزة ، وأشياء أخرى. حتى الآن ، استقرنا على اثنين فقط ، وهو قالب مع العنوان والمؤلف ، وقالب مع صورة وعنوان ومؤلف مميز. يتم إنشاء الصور من تلك البيانات الوصفية أثناء الطيران:

هذا ليس الدمى. هذا ليس حتى phantomjs تعمل svgtopng. هذه صور تم إنشاؤها PHP! وليس حتى ImageMagick ، ​​ولكن مستقيم GD ، الشيء الذي تم بناؤه في PHP. لذلك لا يتم إنشاء هذه الصور في أي نوع من الجملة التي من المحتمل أن تشعر بالراحة لمطور واجهة. من المحتمل أن تكون أفضل حالًا في استخدام أحد القوالب ، ولكن إذا كنت تريد أن ترى كيف تم ترميزها المخصصة (بواسطة Daniel) ، Lemme Know ويمكنني نشر الكود في مكان ما.

نتيجة رائعة ، أليس كذلك؟

أفهم لماذا يجب بناؤه بهذه الطريقة: إنه يستخدم التكنولوجيا التي ستعمل حرفيًا في أي مكان يمكن أن يعمل فيه WordPress. هذا كثيرًا في روح WordPress. لكنه يجعلني أرغب في إنشاء القوالب يمكن أن يتم بطريقة أكثر حداثة. مثل لن يكون الأمر رائعًا إذا كان قالب صور وسائل التواصل الاجتماعي مثل الصور الاجتماعية. php في جذر السمة مثل أي ملف قالب آخر؟ وأنت قالب وتصميم تلك الصفحة مع جميع واجهات برمجة تطبيقات WordPress العادية؟ مثل كتلة ACF تقريبا؟ ويحصل على لقطة شاشة واستخدامها؟ سأجيب عليك: نعم ، سيكون ذلك رائعًا.