Adding your Instagram, Facebook or Twitter widget to your Squarespace blog is easy. Follow these steps to create your widget.

Once you've created your widget, follow the appropriate steps below to add it to your blog.

  • Log in to SquareSpace.Β 
  • On your Dashboard under WEBSITES, select your site under MY SITES.
  • Select SETTINGS.
  • Under WEBSITE, select Advanced
  • Select Code Injection.
  • Choose between HEADER or FOOTER.

Header

Note: If you choose HEADER, your widget will be displayed below the Header but before any blog contents. The distance from the HEADER (containing your LOGO, etc.) will vary depending on the height of the HEADER. To get the proper distance (top margin) change the margin setting in the <div> tag, e.g. to set the distance to 250 points, change the first parameter (top-margin) of the margin part of the style to 250px.

You can also change the width to a more acceptable width for your blog by changing the width part of the style to any width in %. We will show what 50% and 100% will look like below.

<div style="width:50%; margin:250px auto; text-align:center;">

or

<div style="width:100%; margin:250px auto; text-align:center;">


Using <div style="width:50%; margin:250px auto; text-align:center;">Β 

  • Click on Save
  • Your widget will now be displayed on every page on your Squarespace website (width = 50%).


Using <div style="width:100%; margin:250px auto; text-align:center;">Β 

  • Click on Save
  • Your widget will now be displayed on every page on your Squarespace website (width = 100%).

Footer

Note: If you choose FOOTER, your widget will be displayed below the Footer. We don’t need a top-margin setting here, so leave the top-margin part of the margin setting as 0.Β 

To create a specific split between Header and widget, you could include a horizontal line before your widget, e.g.Β 

<hr>
<div style="width:50%; margin:0 auto; text-align:center;">

You can also change the width to a more acceptable width for your blog by changing the width part of the style to 50% instead of 100%. We’ll show the difference below.


Using:

<hr>
<div style="width:50%; margin:0 auto; text-align:center;">
  • Click on Save
  • Your widget will now be displayed below the footer on every page on your Squarespace website (width = 50%).

Using:

<hr>
<div style="width:100%; margin:0 auto; text-align:center;">
  • Click on Save
  • Your widget will now be displayed below the footer on every page on your Squarespace website (width = 100%).

Did this answer your question?