Social media sharing

Many social media platforms (and other types of software that allow link sharing) fetch some information about your app that it uses to generate a preview. This gives you as the app's developer the chance to set up the text content and image that the platform displays, to ensure it represents your app in a good way.

Open Graph tags for Social Networks

What is Open Graph?

Open Graph is a protocol that enables web pages to become rich objects (meaning that they are displayed with details like a customizable title and preview image) in social media platforms and other online services.

It was first introduced by Facebook, but has since been adopted by many other platforms such Twitter and LinkedIn. By tweaking the Open Graph settings in Bubble, you can control what content is displayed on platforms that support the Open Graph protocol.

This setting specifies the tags that are used when your app's domain is shared. You can also set specific tags for a given page. See the page level settings section.

Popular social networks let you customize how links to your website look, when posted on their platforms. You can control this setting (open graph meta tags) in the Meta tags section and customize the image and the content of the text that will be displayed.

Here's an example of what the tags for the www.bubble.io website look like on LinkedIn:

This link preview is automatically generated by LinkedIn, based on the settings in the Social Media / Open Graph section

Page level settings

Settings in the Settings tab will be applied to all pages of the application. Bubble also lets you modify these values at the page level. This is in particular useful if you want to use some dynamic information (for instance, the current page's product's image) instead of a generic image.

If you have some settings at the page level, they will prevail over the application's settings. To edit the page's setting:

1. Open up the page that you want to edit

2. Double-click the page itself or locate it in the element tree to open up the property editor

3. In the Appearance tab, scroll down to the Title/Description and Image setting as illustrated below: