Getting started

Follow the guidance below in order to get started using Simple Social Images on your WordPress website.

Installation

To install the plugin, navigate to your WordPress admin area, click on Plugins and then choose Add New.

Enter “Simple Social Images” into the search term.

Click the Install Now button to add the plugin to your WordPress site. Once installed you can click the Activate button to activate the plugin ready for use.

Initial setup and activation

To get started using the plugin, complete the initial setup steps below:

If not already redirected on plugin activation, navigate to the Simple Social Images settings page under Settings > Simple Social Images in the WordPress admin.
Enter your license key and save the settings (bottom of the page).
Now click the Activate button next to your license key.
Once clicked, a green border should appear around the license key input field to indicate your license is correctly activated.

Finally select some basic setup options including:

Select the post types that you would like to generate social images for. This ensures that the generate images box appears on the edit screen for these post types.
Choose if you want to ignore featured images – this means a random image from the settings screen will always be used, rather than a posts featured image.
Save your settings.

Design your template

Simple Social Images gives you a simple template design interface that lets you customise your social sharing image to your brand.

The template has template settings and settings for each of the four template elements.

Template settings

Background Color

Choose the background colour of your social image template.

Font Family

Add a CSS font-family value. For example, Arial, sans-serif.

Google Font URL

If you want to use a Google Font you can enter the URL of the font here. For example, if Google Fonts gives you the following code:

You will need to use the value of the href attribute of the link in the ‘Google Font URL’ field. For example,

https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap

Then, add the provided CSS rule value to the ‘Font Family’ field. For example,

'Roboto', sans-serif

Title settings

Position

You can choose from nine positions. This will anchor the title to that position relative to the template.

Width (0-100)

The width of the title can be controlled. This is a percentage of the template width. E.g. setting this to halfway (50) would set the title width to 50% of the template width.

Margin (0-100)

This controls the external margin of the title. The value is a percentage of the template width. Margin interacts with the Position as an ‘offset’ from the set position.

Font size (2-8)

This sets the font size of the title element. The scale is from 2-8 and is a percentage of the total template width. The slider is set to 0.5 increments.

Alignment

Choose between left, center and right text alignment.

Weight

This sets the font-weight of the title. For best results, ensure that your font family supports the weight that you have chosen.

Style

Choose between Normal and Italic font styles.

Text transform

None – Do not transform the text
Uppercase – USE UPPERCASE TEXT
Lowercase – use lowercase text
Capitalize – Capitalize The Text

Color

Choose the color of your title text

Background Color

Choose the background color of your title text (if required).

Background Type

Block – Creates a solid color rectangle that surrounds the title text.
Inline – Creates a solid color rectangle behind every line of title text.
Gradient – Creates a rectangle with a gradient from solid color to transparent that surrounds the title text.

Background Gradient

If the ‘Gradient’ ‘Background Type’ has been chosen, this will set the direction of the gradient.

Logo settings

Logo

Click ‘Upload/Choose Image’ to upload an image file from your computer or select an image from the Media Library.

Position

You can choose from nine positions. This will anchor the logo to that position relative to the template.

Size (2-20)

The size of the title can be controlled. This affects the height of the logo (the width is set to ‘auto’) and is a percentage of the template width.

Margin (0-100)

This controls the external margin of the logo. The value is a percentage of the template width. Margin interacts with the Position as an ‘offset’ from the set position.

Image settings

Here you can add a selection of images to be output in your template. If more than 1 image is selected, when a template is rendered and a social sharing image generated, a random image from your uploaded images is used.

If present, a featured imaged will be used instead unless ‘Ignore featured images’ has been selected.

Add Images

Click ‘Upload/Choose Image’ to upload image files from your computer or select images from the Media Library.

Once uploaded, you can click the image thumbnails to view them in the template preview.

Position

You can choose from nine positions. This will anchor the image to that position relative to the template.

Width (0-100)

Set the width of the image as a percentage of the template width.

Height (0-100)

Set the height of the image as a percentage of the template height.

Margin (0-100)

This controls the external margin of the image. The value is a percentage of the template width. Margin interacts with the Position as an ‘offset’ from the set position.

Overlay settings

Position

You can choose from nine positions. This will anchor the overlay to that position relative to the template.

Width (0-100)

Set the width of the overlay as a percentage of the template width.

Height (0-100)

Set the height of the overlay as a percentage of the template height.

Margin (0-100)

This controls the external margin of the overlay. The value is a percentage of the template width. Margin interacts with the Position as an ‘offset’ from the set position.

Color

Set the color of the overlay element.

Opacity

Set the opacity (transparency) of the overlay element.

Start generating images!

With all the steps above complete, you are now ready to start generating the images for your posts.

Navigate to the edit screen for a post type you have enabled Scroll to the bottom of the post edit screen and you should see the Simple Social Images section.

Click the Generate Social Sharing Image button to generate the image for this post. Once generated, update the post and you’re done.

Now when you share that post on social media, the generated image should be used as the preview image.