تقنية

كيفية إنشاء صور رسم بياني ديناميكي مفتوح باستخدام جداول بيانات 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>

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

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

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

إنشاء صور رسم بياني مفتوح بدون محرك الدمى

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

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

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

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

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

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

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

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

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

  2. Developers.facebook.com/tools/debug/ – الصق عنوان URL لموقع الويب الخاص بك في حقل URL وانقر فوق Debug لمعرفة ما إذا كان Facebook قادرًا على عرض الصورة المتوفرة في العلامات الوصفية لـ Open Graph.

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

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

داخل ورقة Google، انتقل إلى قائمة الإضافات واختر Apps Script لعرض كود المصدر المستخدم لإنشاء صور Open Graph. يمكنك أيضًا إنشاء رسومات في Canva باستخدام أي من القوالب المتاحة ثم استيراد تصميمات Canva في شرائح Google.

التطبيق مكتوب بلغة Google Apps Script. فهو يقرأ عناوين المنشورات من جداول بيانات Google، وينشئ نسخة من العرض التقديمي لكل صف في الورقة، وينشئ لقطة شاشة للشريحة ويضيفها إلى 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

الوسوم

اترك تعليقاً

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

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