First step is to register at Pictura.io platfrom
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.
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.
Pictura API opens a page, sets your defined screen dimensions and makes a screenshot.
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.
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.
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
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.
It is highly advisable to encode your urls to avoid errors
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.
Pictura api takes your image and puts your uploaded template on top of it.
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
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.
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
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.
It is highly advisable to encode your urls to avoid any errors
Dont forget, you also need to dynamically provide your images. Url should also be encoded
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.
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
JavascriptIn 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
JavascriptYou can add multiple domain names under single account in this page
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]