Documentation


Step-by-step setup



Step 1: Register

First step is to register at Pictura.io platfrom


Step 2: Sub/domains setup

Once registered, copy and paste your websites' page to save domain name under setup page. We will use it to identify shared pages. If you have multiple domains, subdomains or nested url where you like to make individual custom setups, then you need to click on 'add more & edit - Advanced' button and setup each one.


Step 3: Display selection

Select how you would like your meta images shared on social media to look like. You can choose from 2 options: making a screenshot of your page or combining images from your page with your uploaded template.


Implementation - Screenshot


Option 1: Screenshot


Working principle

Pictura API opens a page, sets your defined screen dimensions and makes a screenshot.


Setup

Some websites when making a screenshot look better as if in mobile version and some in full screen. You should find optimal dimensions for your website and set accordingly. You should not forget that reccomeded dimensions from facebook is 1200 x 630, so you should keep in mind aspect ratio when setting your dimmensions.


Step 1: Test

Before implementing, test if you get desired results. Below you will find pictura api url. Please change green part into your websites typical page url.

https://api.pictura.io?url=https://Your-Page.com

Open url in your browser and evalaute the image. After integration your images on social media will be dynamically generated to look like that. If you dont like results, get back to setup page and make adjustments. If you get an error, it might be because you need to Encode your url. Try to encode url manually here and try again


Step 2: Make it dynamic

Green part in the example above suppose to be dynamic in every page. Write the code to get current page url in your language. Here is a example for Ruby on Rails and Javascript.

window.location.href

It is highly advisable to encode your urls to avoid errors

${encodeURIComponent(window.location.href)}


Step 3: Implement

Add or change your meta og:image tags with Pictura API. Interpolate Pictura API url to dynamically provide page url. It is important to provide also width and height parameters.

< meta property="og:image" content="https://api.pictura.io?url=${encodeURIComponent(window.location.href)} ">
< meta property="og:image:type" content="image/png" />
< meta property="og:image:width" content="1200" />
< meta property="og:image:height" content="630" />


Implementation - Template


Option 2: Template


Working principle

Pictura api takes your image and puts your uploaded template on top of it.


Setup

Upload template for your images. Template must be in PNG file format and 1200X630 dimensions. Some of the parts of a template should be transparent for the background image to appear. see example


Step 1: Test

Before implementing, test if you get desired results. Below you will find pictura api url. Please change green part into your image url thats going to be displayed in the page and your domain that you setup.

https://api.pictura.io?url= https://Your-image-url.com&origin= https://Your-Page.com

Open url in your browser and evalaute the image. After integration your images on social media will be dynamically generated to look like that. If you dont like results, get back to setup page and make adjustments. If you get an error, it might be because you need to Encode your url. Try to encode url manually here and try again


Step 2: Make it dynamic

Green part in the example above suppose to be dynamic in every page. Write the code to get current page url in your language. Here is a example for Ruby on Rails and Javascript.

window.location.href

It is highly advisable to encode your urls to avoid any errors

${encodeURIComponent(window.location.href)}

Dont forget, you also need to dynamically provide your images. Url should also be encoded

${encodeURIComponent(DYNAMIC-IMAGE-URL)}


Step 3: Implement

Add or change your meta og:image tags with Pictura API. Interpolate Pictura API url to dynamically provide page url. It is important to provide also width and height parameters.

< meta property="og:image" content="https://api.pictura.io?url=${encodeURIComponent(DYNAMIC-IMAGE-URL)}&origin=${encodeURIComponent(window.location.href)} ">
< meta property="og:image:type" content="image/png" />
< meta property="og:image:width" content="1200" />
< meta property="og:image:height" content="630" />






Additional methods



Screenshot pages that are not under your registered domain

In case you want to take a screenshot of a page that is not uder your registered domain name, you can use orgin parameter with your domain name in api request. API will make a request as if coming from your url. Important: to avoid erros it is strongly advisable to encode url

Javascript
< meta property="og:image" content="https://api.pictura.io?url= ${encodeURIComponent(www.not-your-domain-page.com)}&origin=www.your-reg-domain.com ">

Multiple templates for the same domain

In case you want to have different templates for different pages while having the same domain, you can use 'origin' parameter in your request. To set it up you need to login and go to setup page. Click on 'add more & edit' button under domains section. Add your domain with arbitrary keyword e.g. 'www.your-domain.template2.com'. Select different solution for this domain and then provide under origin parameter. Important: to avoid erros it is strongly advisable to encode url

Javascript
< meta property="og:image" content="https://api.pictura.io?url= ${encodeURIComponent(window.location.href)}&origin=www.your-domain.template2.com ">

Add multiple domains

You can add multiple domain names under single account in this page


Remove unwanted elements from the screenshot

We eliminate popups from the screenshots to display website in static form. If there are popups that our system did not captured, please send us an email with a link of a website so that we could make adjsutments. Email: [email protected]