Social media – today, everyone and their grandma is on it. As a business, you want to reach your shoppers, wherever they are, so it makes sense to optimize your Flipbooks for social media sharing, too.
This guide explains:
how to get beautiful images of your Flipbook using the Embed feature
Let's get started!
What is Open Graph, and what does it have to do with your Flipbook?
The Open Graph protocol, or just Open Graph for short, was originally created by Facebook as a way to standardize webpage's, or Flipbook's metadata. Metadata is used to represent the content of a page.
Metadata can house all kinds of information, like the title of a page or Flipbook, a brief description of the content, even images, favicons, etc. Metadata creates a representation of each page on the internet.
How to change the Open Graph settings on each Flipbook.
Editing your Flipbook's Open Graph settings is easy:
Select your Flipbook and navigate to the Settings pane.
Under the General tab, select Share Optimization from the left-hand menu.
In the Share Optimization page, you'll see a number of editable Open Graph fields and options:
Image URL: This is the page image that is visible when available, when you share your Flipbook. By default, this is image is the first page, or cover, of your Flipbook. However, you can choose a specific image by inserting a custom URL to the location of your image in this field. You can use the Absolute URL from a file uploaded to your Media library.
💡 We recommend image dimensions of 1200 × 630 pixels, or a 40:21 aspect ratio, and that you use PNG or JPEG images. GIFs will not show movement in thumbnail, might crash, and not show an image at all!
⚠️ Avoid file sizes larger than 300Kb. This is because WhatsApp, and potentially other platforms will not show images exceeding this size.
Title: The title typed in this field will be used when sharing your Flipbook. If no title is defined, the window title will be used.
💡 Keep it short and sweet: the title shouldn't exceed 40 characters.
Description: The description is the few lines of text visible under the title, when you share your Flipbook. This can be used to give an idea of the content of your Flipbook. If left empty, the meta description from your Flipbook's SEO settings will be used.
💡 The description shouldn't exceed 100 characters, so it doesn't get cropped.
You might have noticed that any changes you make to the Open Graph fields are instantly reflected in the preview pane to the right. This gives you an idea of how your page preview will look.
📣 Pssst, If you want to add your own domain on the url at the bottom, instead of viewer.ipaper.io, you'll need to add a branded domain. Check out our guide on our branded domain feature, below:
How to enable social media sharing options:
Further down on the Share Optimization page, you'll notice a series of toggles:
The options you turn on will now be available when clicking the share button in the viewer:
Can't see your favorite, niche, social media channel on the list? Fret not! You can still share it using the link at the bottom. These Social Media channels are just the ones, we have a direct integration to, and we are sure follows the design you just made!
Get beautiful images of your Flipbook using the Embed feature
If you want to promote your Flipbook, you might consider using a beautiful, 3D-perspective representation of it to inform your shoppers that you have a digital catalog.
As we're not all Photoshop pros, making such an image might not seem so simple. However, you can use the Embed function to generate a perspective image in seconds:
Select your Flipbook, then navigate to the Embed pane.
Select Perspective from the options in the View section and click Get embed code.
Copy only the URL found within the embed code. This is the section inside the quotation marks, as in the example below:
Paste this URL into a new browser tab. This will open a generated 3d render of your Flipbook.
You'll need to use a screenshot tool to capture an image of it, as it's not possible to save as an image by right-clicking. Once saved, upload it to your Media library and use it as the Open Graph share image for your Flipbook!