Using the Social Grid Widget is a great way to display your recent social media posts on your website. When connected to your Instagram account, this widget will automatically update to show a preview of the most recent posts and link out to your account so visitors to your site can find and follow you with a simple click.
This article will explain:
How to add and connect a social grid
What options are available for customizing your social grid
How to set fallback images
The limitations of the social grid and troubleshooting options
Note: Occasional reconnection may be required due to how Meta chooses to provide security tokens to third-party sources for a limited number of days. This is a layer of their security we can't change or control.
Video Instructions
Written Step-by-Step Instructions
Adding the Social Grid
To add the Social Grid widget to your design:
First select the canvas you would like the widget added to.
Then select Social Grid from our objects menu at the bottom bar of the app
Note: The Instagram feed may take up to 10 minutes to display new posts on your site.
Connect an Instagram Account
To connect an Instagram Account:
Select the Social Grid widget in your design.
On the right sidebar under Social Grid Settings, click on Connect Instagram.
3. Follow the prompts under your Account settings to Connect Instagram.
You'll be prompted to login to Instagram and must provide permission for Showit to access your Instagram account in order to display your photos.
Note: You can connect additional Instagram accounts on this account screen.
To connect additional accounts, you must be logged into the account you wish to connect IN INSTAGRAM for the new account to be connected. If you've already connected account A and wish to connect account B - make sure you are actively logged in to account B in instagram (in your browser) before configuring for that account to properly connect.
4. Select your account from the Social Grid Settings tab in the Showit Design App (If you don't see your account, try refreshing the browser).
5. Customize the Social Grid settings to your liking.
Social Grid Settings
Video, Carousel, Image Posts |
|
Show Captions on Hover |
|
Auto-space Images |
*Only available for 1 row of images. |
Allow Overflow |
*Only available for 1 row of images. |
Image Gap |
|
Rows |
*Over 1 row may limit other settings. |
Align |
*Not available with Auto-space Images or Allow Overflow enabled. |
Fallback Images
Our Social Grid supports the selection of Fallback Images. These images will be displayed if for any reason Instagram's servers don't respond or if your account is ever disconnected by Instagram.
You can select any images in your Media Library to be used as Fallback Images.
Preview for Website Templates: Fallback images are displayed in templates if no account is selected or when a template is shared.
Additional Functionality
Edge Locking Support
The Social Grid has Edge Locking support! Give it a try!
Copy Style Settings Between Desktop and Mobile
You can use Special Paste to quickly copy style settings between desktop and mobile.
Add or Disconnect an Instagram Account
If you wish to Add an additional account or Disconnect an Instagram account follow these steps:
Login to your Account Third Party settings.
Click Connect Instagram to add another account or Disconnect next to your connected account.
Limitations
Feed Refresh Rate | Every 10 minutes |
Post Display Count Limit | Up to 50 posts will display. Excluding post types like Carousel or Video may give you a smaller set of posts. |
Unsupported content types: | IGTV, Stories, Collaborative posts |
Private Feeds Limited Support | The Connection is limited to 60 days by Instagram, must manually renew connection in your Account. |
Cover Images Always Center Cropped | Cover images on Reels will always display center-cropped in our widget. Custom crops on cover images will not apply to our widget. |
Troubleshooting
Inactive Account
If your social grid widget doesn't show or stops showing images, try the following steps:
Log in to the Account App
Click Third-Party Integrations
Click Connect Instagram Button
Reauthorize your account
Clicking the Connect Instagram button will run a reauthorization process and reset our access to your IG/Facebook account. This usually happens when a setting or password in your IG/Facebook account has been changed or updated.
Trouble Reconnecting Instagram: "Your activity off Meta technologies is currently turned off."
If you are seeing this error message when trying to reconnect your Instagram within your Showit account:
{"error_type": "OAuthException", "code": 400, "error_message": "Your activity off Meta technologies is currently turned off."}
Then you can resolve it quickly by following the steps listed below:
Log in to Facebook and go to your Settings section under your profile image.
Then click to View the Off-Facebook Activity settings.
Click on Manage future activity.
Select the Connect future activity option to turn it on and click Confirm to save.
Finally, try reconnecting Instagram in your Showit account. It should now work!
More Resources