There are lots of different ways to embed your blog onto your website, either within an existing blog, or on a standalone page. This article will go over common websites and how to embed the blog. We suggest reaching out to your specific website host’s customer support if you have any specific issues.
Getting Started with Embedding
When copying the Blog embed code, select your Website Platform from the dropdown. If you're using the Classic Wordpress Editor, select the Old WP Versions (Classic Editor) option.
Wordpress
Wordpress.com
If you are using Wordpress.com (i.e. not through a web host such as Siteground, Flywheel, A2, GoDaddy, Dreamhost, etc.), embed your Blog using the Custom HTML Block (Embed URL, Shortcode, Code Block is not applicable).
Pro Tip: Please note that embedding is only enabled on the Business, Commerce, and Enterprise plans.
Your embedded blog width will depend on your choice of theme and/or layout.
Hosted Wordpress
If you are using a third party website builder, you may need to have a particular subscription to have embedding abilities. Embed your blog using Custom HTML (Embed URL, Shortcode, Code Block is not applicable).
Pro tip: Your embedded blog width will depend on your choice of theme and/or layout.
If you have LiteSpeed or other Plugins: You may need to disable your plugin for the specific page/post for the Blog to render correctly. Please see this article for known Plugin compatibilities.
Elementor
When using the Elementor editor, both Slideshows and Blogs can be integrated using Shortcode.
1. If after adding the integration code the width of your blog is decreased, or if you need to make any edits, in the Elementor editor click on the menu icon.
2. Then select Site Settings.
3. Under the Settings section, click Layout.
4. Then update the size of the blog using the Content Width.
Kadence
When using the Kadence theme, use Custom HTML (Embed URL, Shortcode, Code Block is not applicable). If you’re using the Classic Editor, enter the code on the Text tab.
Divi
Using the Divi Builder in your Page editor or Blog Post editor, add a Code Module.
Pro Tip: The Divi Builder will not show the embedded Pic-Time Blog, whether in the editor itself or in its Preview mode. However, the Pic-Time Blog will render fine after publishing, or if you use Wordpress' Preview function.
Flothemes
If you’re using Classic Themes or Flexthemes you can add the blog using either:
The Classic Editor, by going to the WordPress Editor area and inserting the code in the text area.
The Gutenberg Editor, using a Custom HTML block.
If using the Gutenberg Editor, to resize your blog post, click on the HTML block and select Group.
Select the Width graphic and click Full width.
Shopify
If adding to a Page, first install the Custom Content Widget provided by Shopify and paste the Blog integration code there.
If adding as a blog Post, click <> to view the HTML on the post and paste the code there.
Showit
Easily embed Pic-Time Blogs on any Showit plan. If you're embedding your Pic-Time Blog onto a page on your website, you can Embed HTML using the Embed Code.
If you’re embedding your Pic-Time Blog onto a blog post in Showit, you can add a Custom HTML block (Embed URL, Shortcode, Code Block is not applicable).
Pro tip: The embedded blog width will depend on your choice of theme and/or blog design, and you may need to update the Size and Position of the embedded blog.
Please Note: If your blog appears in the preview but not on the live site, try deleting the blog post template on Showit and then re-adding.
Do not remove the Post Content when adding your Blog. If it's removed, the Blog will not appear correctly and you will need to get in contact with Showit support for the Post Content to be recovered.
Photobiz
Paste the Blog integration code in an HTML block. If adding the Blog to the Blog tab, paste the integration code in the Visual tab (not the HTML tab).
Pixieset
Add a Custom Embed Code Block to your page and paste the blog integration code.
Please Note: Custom Embed Code is only available for Pixieset Pro and Ultimate plans.
Pixpa
If you want to embed your Blog on the Blogs page you need to click on the Text button and select Code, then paste the Blog integration code.
If you want to embed your Blog on a regular page you need to use HTML, JS, CSS element, then paste the Blog integration code.
Squarespace
If you have an existing blog, simply use the code block to embed your blog post (The Format > Code option is not applicable).
Pro tip: Using the Code display source in a Text Block will not work.
You may see a “Script disabled” message in the editor, but the blog will be visible on the live draft/published post.
If the blog does not appear to be the full width of the rest of your blog, check that there is not a spacer block taking up space as well.
In addition, if you see an empty page after adding the embedded code - you may need to disable "Ajax Loading" and re-add the code to the code block. Learn more here.
Please Note: This feature is not available on the Squarespace Basic plan.
Webflow
Please Note: Blogs can only be integrated onto Webflow plans that include Embedded Code.
1. In Webflow, first add a Container.
2. Then select the Embed option.
3. Paste the Blog integration code, and click Save & Close.
Please Note: In the editor preview, the blog will not appear. However it will appear correctly after the code is published.
Weebly
In a new Page or new post from your Blog Page, add the Embed Code, click to Edit Custom HTML, and paste the Blog integration code.
Wix
To integrate your blog onto a Page on your site, add an Element, select Embed Code, and use the Embed HTML option to integrate your blog (Code Snippet is not applicable).
If you’re integrating it as a blog Post, you can add an HTML Code.
Pro Tip: You will need to resize the code block height to fit the blog post content both on the Wix desktop view and mobile view.
Zenfolio
If using NextZen (app.zenfolio.com), embedding is currently not supported.
If using the Classic platform (zenfolio.com), click the Embed option to add the embed code to a Page or Blog Post.
After adding the embed code, click to view the preview. If your blog doesn't appear correctly, follow the steps below to resolve it. Learn more about this Zenfolio issue here.
1. Preview options, go to the Content tab and copy the embed code.
2. Then go back to the editor and Delete the embedded content.
3. In its place, or wherever you want the content to appear, place unique identifying text like "CODEGOESHERE"
4. Click on the Source button in the formatting toolbar.
5. Replace your "CODEGOESTHERE" with the embed code that you copied from step 1. Then click Save and Preview.
Now your blog will appear correctly.