تقنية

كيفية إنشاء صور رسم بياني مفتوح ديناميكي مع أوراق Google

كيفية إنشاء صور رسم بياني مفتوح ديناميكي مع أوراق Google


صورة الرسم البياني المفتوح (صورة OG) هي الصورة التي يتم عرضها عند مشاركة أي من روابط موقع الويب الخاص بك على Facebook أو LinkedIn أو Twitter. يمكنك توفير عنوان URL العام للصورة في علامات التعريف لموقع الويب الخاص بك وموقع وسائل التواصل الاجتماعي تلقائيًا من هناك.

<head>
  <title>Digital Inspiration</title>
  <meta property="og:image" content="https://www.labnol.org/og/default.png" />
</head>

افتح صور الرسم البياني مع Puppeteer

استخدم Github داخليًا مكتبة Puppeteer من Google لإنشاء صور بيانية مفتوحة ديناميكية. يتم إنشاء الصور أثناء الطيران عن طريق تغذية HTML المخصص في Puppeteer والتي تنشئ لقطة شاشة. يمكنك عرض صورة OG التي تم إنشاؤها بواسطة Github في هذا سقسقة.

تستخدم Vercel ، الشركة وراء Next.js ، أيضًا Puppeteer لمولد صور الرسم البياني المفتوح. يتم استخدام Chromium Headless لتقديم صفحة HTML ، ويتم التقاط لقطة شاشة للصفحة ويتم تخزين الملف مؤقتًا لتحسين الأداء.

قم بإنشاء صور رسم بياني مفتوح بدون دمية

Puppeteer هي مكتبة رائعة (أنا أستخدمها داخليًا لـ Screnshot.guru) ولكنها تتطلب بعض المعرفة الفنية لنشر الدمى كدالة سحابة. هناك أيضًا تكلفة متورطة في نشر Puppeteer على السحابة منذ أن دفعت مقابل طلب من أي وقت مضى للخدمة.

إذا كنت تبحث عن حل بدون رمز أو بدون تكلفة ، فلا يوجد ، فيمكنك استخدام أوراق Google لإنشاء صور رسم بياني مفتوحة. هذا ما أستخدمه لإنشاء صور ديناميكية وفريدة من نوعها لكل صفحة من صفحات موقع الويب الخاص بي. يمكنك رؤية نموذج OG في هذا سقسقة.

الفكرة مستوحاة من استوديو المستندات. يمكنك إنشاء تصميم صور في شرائح Google ، واستبدل نص العنصر النائب في القالب بعنوان صفحة الويب الخاصة بك ، ثم قم بإنشاء صورة لقطات الشاشة للعرض التقديمي وحفظه في Google Drive.

للبدء ، قم بعمل نسخة من ورقة Google هذه في Google Drive. استبدل العناوين في العمود A بعناوين صفحاتك وقم بمسح عمود عنوان URL للصور. انقر فوق Play زر ، قم بإذن البرنامج النصي وستلاحظ أن جدول البيانات يتم تحديثه على الفور مع عناوين URL للصور لكل صفحة.

أضف المزيد من عناوين الصفحات في ورقة Google ، واضغط على Play زر مرة أخرى وسيتم تحديث جدول البيانات مع عناوين URL للصور للصفحات الجديدة فقط. هذا كل شيء.

فتح صور الرسم البياني

اختبر صور الرسم البياني المفتوح

بعد إضافة علامات Meta Open Open Graph إلى موقع الويب الخاص بك ، يمكنك اختبار صور الرسم البياني المفتوح باستخدام الأداة أدناه.

  1. بطاقات dev.twitter.com/validator – لصق عنوان URL لموقع الويب الخاص بك في حقل عنوان URL وانقر فوق Validate زر لمعرفة ما إذا كان Twitter قادرًا على تقديم الصورة المقدمة في علامات Meta Open Open. يمكنك أيضًا استخدام أداة التحقق هذه لمسح صورة OG من ذاكرة التخزين المؤقت لـ Twitter لأي صفحة.

  2. المطورين. Debug زر لمعرفة ما إذا كان Facebook قادرًا على تقديم الصورة المتوفرة في علامات Meta Open Open.

  3. LinkedIn.com/post-inspector/ – يمكن أن تساعدك أداة Post Inspector في LinkedIn في تحديد كيفية ظهور صفحة الويب الخاصة بك عند مشاركة نظام LinkedIn. يمكنك أيضًا طلب LinkedIn لإعادة ترميم الصفحة إذا تغيرت صورة OG المرتبطة.

كيف يعمل مولد صورة الرسم البياني المفتوح؟

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

يتم كتابة التطبيق في برنامج Google Apps Script. إنه يقرأ عناوين منشورات من Google Sheets ، ويقوم بإنشاء نسخة من العرض التقديمي لكل صف في الورقة ، ويقوم بإنشاء لقطة شاشة من الشريحة ويضيفها إلى Google Drive.

const FOLDER = 'Open Graph Images';
const TEMPLATE_ID = '1QZ4mR6B36XEVyzJf-s8vq88SDnSRPiRDchJ71VM-cfU';

const APP = {
  /* Create a folder in Google Drive for storing open graph images */
  getFolder() {
    if (typeof this.folder === 'undefined') {
      const folders = DriveApp.getFoldersByName(FOLDER);
      this.folder = folders.hasNext() ? folders.next() : DriveApp.createFolder(FOLDER);
    }
    return this.folder;
  },

  /* Download the Slide thumbnail URL and save it to Google Drive */
  getImageUrl(contentUrl, title) {
    const blob = UrlFetchApp.fetch(contentUrl).getBlob();
    const file = this.folder.createFile(blob);
    file.setName(title);
    return file.getUrl();
  },

  /* Make a temporary copy of the Google Slides template  */
  getTemplate(title) {
    const slideTemplate = DriveApp.getFileById(TEMPLATE_ID);
    const slideCopy = slideTemplate.makeCopy(title, this.getFolder());
    return slideCopy.getId();
  },

  /* Get the thumbnail URL of the Google Slides template */
  getThumbnailUrl(presentationId) {
    const { slides: [{ objectId }] = {} } = Slides.Presentations.get(presentationId, {
      fields: 'slides/objectId'
    });

    const data = Slides.Presentations.Pages.getThumbnail(presentationId, objectId);
    return data.contentUrl;
  },

  /* Replace the placeholder text with the title of the web page */
  createImage(title) {
    const presentationId = this.getTemplate(title);
    Slides.Presentations.batchUpdate(
      {
        requests: [
          {
            replaceAllText: {
              containsText: { matchCase: false, text: '{{Title}}' },
              replaceText: title
            }
          }
        ]
      },
      presentationId
    );
    const contentUrl = this.getThumbnailUrl(presentationId);
    const imageUrl = this.getImageUrl(contentUrl, title);
    /* Trash the presentation copy after the image is downloaded */
    DriveApp.getFileById(presentationId).setTrashed(true);
    return imageUrl;
  },

  /* Show job progress to the user */
  toast(title) {
    SpreadsheetApp.getActiveSpreadsheet().toast('✔️ ' + title);
  },

  run() {
    const sheet = SpreadsheetApp.getActiveSheet();
    sheet
      .getDataRange()
      .getDisplayValues()
      .forEach(([title, url], index) => {
        /* Only process rows that have a title */
        if (title && !/^http/.test(url) && index > 0) {
          const imageUrl = this.createImage(title);
          sheet.getRange(index + 1, 2).setValue(imageUrl);
          this.toast(title);
        }
      });
  }
};





Source link

الوسوم

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

زر الذهاب إلى الأعلى