Posts

Showing posts from January, 2022

How to Create Dynamic Open Graph Images with Google Sheets

Image
An open graph image (OG image) is the image that is displayed when any of your website links are shared on Facebook, LinkedIn or Twitter. You can provide the public URL of the image in the meta tags of your website and social media website will automatically pick up from there. < head > < title > Digital Inspiration </ title > < meta property = " og:image " content = " https://www.labnol.org/og/default.png " /> </ head > Open Graph Images with Puppeteer Github internally use Google’s Puppeteer library to generate dynamic Open Graph images. The images are generated on the fly by feeding custom HTML into Puppeteer which then generates a screenshot . You can view a sample OG image generated by Github in this tweet . Vercel , the company behind Next.js, also uses Puppeteer for their open graph image generator. Headless chromium is used to render an HTML page, a screenshot of the page is captured and the file is cached for ...

How to Hide Empty AdSense Slots When No Ads are not Available

Image
If you are using Google AdSense to monetize your website, you may have noticed that there are instances when there are no ads showing up on one or more pages. This is likely because Google AdSense is not able to find any advertisers that are probably willing to bid on your page at that time. Or may be you have blocked specific categories of advertisers from bidding on your page. When Ads Are Available Here’s a page with a Google AdSense ad unit placed somewhere in the middle of the page. When Ads Are Unavailable And here’s the same page with the same Google AdSense ad unit but with the ad unit replaced with a blank space as the ad inventory is not available. Behind the Scenes When any Google AdSense ad unit on your website sends an ad request to Google’s servers, the AdSense server either responds with an ad or it sets the status of the ad unit to unfilled meaning that there are no ads to serve at that time. If you would not like to see any whitespace in your website...

Create Google Cloud Function to Generate Images in Google Cloud Storage

Image
This example shows how you can use Google Cloud Function to generate open graph images from Google Slides template in Google Drive. You may open any page on this website and look for the og:image meta tag in the head to see the generated image that is different for each image. When the cloud function is invoked, the input text is provided in the query string and this replaces the placeholder in the template to generate the customized image. The generated image is stored in Google Cloud storage and the file’s public URL is returned. Create a Service Account Go to console.cloud.google.com and create a new Google Cloud project. While the project is selected, go to APIs & Services > Credentials > Create credentials and select Service Account . Give your service account a name and grant the Project > Owner role to the service account. Your service account will have an email address like <project-id>-<service-account-name>@<project-id>.iam.gser...

How to Import Canva Designs into Google Slides

Image
Canva is everyone’s favorite tool for creating social media graphics, YouTube video thumbnails, Instagram stories logos, and even regular presentations. The app is jam-packed with beautiful, ready-to-use templates that make it easy to even non-designers to create unique and impressive designs. Google Slides Template Gallery Google Slides is probably the most popular app for creating presentations but their built-in template library is limited and haven’t seen any update in a long time. Cavan Presentation Templates Compare the Slides library to Canva and you’ll find thousands of presentation templates that will fit the needs of any project, be it in education, business, or personal. Import Canva Templates into Google Slides If you prefer using Canva for creating presentations slides and Google Slides for collaborative editing, the good news is that you can get the best of both worlds. You can easily import Canva designs into Google Slides and then edit them in Google Sl...

Manage Shared Drives in Google Drive with Google Apps Script

Image
These code samples show how you can use Google Apps Script to manage and search through the content of shared drives in Google Drive using the Drive API. To get started, click the + icon in the Services section to add the Drive API search to your Google project. Google Apps Script currently supports Drive API v2 though the latest version is v3. Once the Drive API service is enabled, you can use the Drive API to search through the content of shared drives. Create a Shared Drive function createSharedDrive ( ) { const driveName = 'Digital Inspiration' ; const sharedDrive = Drive . Drives . insert ( { name : driveName } , Utilities . getUuid ( ) ) ; console . log ( 'Shared Drive created' , sharedDrive . id ) ; } Share a Shared Drive with a User function shareSharedDriveWithUser ( { driveId , role , email } ) { // role can be writer, reader, organizaer or commenter const response = Drive . Permissions . insert ( { r...