How to make your website look great on Facebook


 
how to upload social share logo squarespace
 
 

So you want your website to look good on Facebook?

You’ll need to add a properly-sized social share logo to your Squarespace website!


Scenario 1: You have a website. And you’ve worked so hard on it - virtually crossed all the T’s and dotted all of the I’s. It’s time to share it with the rest of the world, so you excitedly drop your website link into a Facebook and click “POST”.

Scenario 2: You’re responding to a potential job opportunity or new client lead on Facebook, and finish with a “For more details about me and my services, check out my website!” and then you type in your website URL, and click “COMMENT”.

And then...Facebook automatically creates a website preview (also known as a social share logo). And it looks…just…yikes.

For example:

 
squarespace website looks bad on facebook
 

THE PROBLEM
Your logo is cut off, or looks grainy, or it’s some random photo that you don’t want to use as your first impression to the world or a potential client (when it’s most important to put your best foot forward!). If you don’t intentionally upload a social share logo to your website, Facebook will start looking elsewhere on your website for a preview image or logo, and it usually doesn’t turn out well since it won’t be the exact dimensions that Facebook wants.

THE SOLUTION
Fortunately, Squarespace feels your panic and you can easily correct this if you know where to go! Meet the social share logo.

Ready to fix your Squarespace social share logo when you post to Facebook? Here’s a some step-by-step guide (my favorite!) to make a great first impression.

instructions


Check out the video tutorial for detailed instructions.
Otherwise, the step-by-step guide is written out below!

 
 
 

Step 1. Create your social share logo

I like to use a background photo that is either on-brand or a photo of you, with your logo + tagline on top of the photo. You’ll want something that #1 - catches attention, and #2 - is on-brand/represents you properly

Template Option: Click the button below to use the social share template for Squarespace websites that I’ve created using Canva. (see a preview to the right!) Instructions are included!


DIY Option:
If you want to create this yourself in Adobe Illustrator or Canva, you can! You just need to set your canvas size as 512 x 300px. Export as a JPG file.

Screen Shot 2019-02-20 at 3.11.21 PM.png


Step 2 Upload your social share logo to Squarespace

Login to your Squarespace website, go to the main menu, click ‘Design’, then ‘Logo & Title’. Scroll down a bit until you see the Social Sharing Logo section. Upload your social share file, then be sure and click ‘SAVE’.

Screen Shot 2019-02-20 at 2.29.49 PM.png
 
Screen Shot 2019-02-20 at 2.30.01 PM.png
 
Screen Shot 2019-02-20 at 2.30.47 PM.png

Step 3 • Use the Facebook Debugger tool

Quick intro to this step:

This final step will save you loads of hair-pulling. I discovered this tool when I originally went through this process of adding my social share logo to my Squarespace website. I clicked ‘save’ after uploading my social share logo, and thought I was done. WRONG 😩. When I posted my link on Facebook, the same old cut-off logo was showing up. The problem? Facebook didn’t know that my website info had been updated. I needed a way to force Facebook to ‘see’ that I had updated this information.

And then I found the Facebook Debugger Tool.

The Facebook Debugger tool basically lets you ‘rescrape’ (i.e., manually update) your website’s info to Facebook and lets you preview how your website link will look on Facebook before you post it.

HOW TO USE THE FACEBOOK DEBUGGER TOOL

  1. Go to Facebook’s Debugger Tool, enter your website URL, and click ‘debug’.

  2. If you scroll down on the page, you’ll see a link preview. If it’s not showing your updated social share logo, click ‘Scrape Again’. Once you click ‘Scrape Again’, the link preview should update to your new social share logo. (Sometimes you have to click ‘Scrape Again’ multiple times before it works. If it continues to give you problems, make sure you’ve clicked “SAVE” on your Squarespace site after uploading your social share logo.)

    Sidenote: This tool is also super helpful if you ever want to know how a blog post or website link will look on Facebook before you post it!

Step 4 - Share your website all over Facebook

Post that website all over Facebook since you’re feeling fancy with your new social share logo!







 
Elizabeth Leland1 Comment