Weebly Tip of the Week: Blog Posts, Images, and Sharing to Facebook

[Adam7]

Our recent blog post on starting a blog got me thinking about common questions I and other team members see with blog posts and social media.  You’ve written a great blog post, and now you’re sharing it to Facebook.  What can you do to ensure that your blog post looks awesome when you share it? It’s really a lot easier than you’d think.

Images

If you want an image to display with your post (and let’s be honest, your share is a lot more eye-catching if it includes an image), Facebook provides clear guidelines on what you need to do to have the best results.

For a larger banner-sized image with your share, make sure your image is at least 600 x 315 or larger.  

Anything smaller than that will display next to post information.  The bare minimum for an image to be used at all is 200 x 200.  

Facebook also recommends that your image ratio be as close to 1.91:1 as possible to prevent cropping.

Text

Facebook will scan your post and select title and text information for your post automatically.  If you want to control that in specific, click on Post Options to the lower left while editing your post and enter an SEO title and SEO description.  Facebook will use these instead.

As you can see from what I entered above, that information plus the large image I used in my test resulted in the share looking like this:

Two more tips:

1. If you decide to change something or if something doesn’t look right, you’ll need to request Facebook re-scrape your site.  They have a handy debug tool which you can use to clear their cache and fetch new information: https://developers.facebook.com/tools/debug/
2. If you have multiple images in your post and Facebook isn’t using your preferred image, use the debug tool above to clear Facebook’s cache, then share the URL of the post yourself again right on Facebook.  You should get an option to pick through available images.

[Adam7]

Try the solution from the top of this page: https://community.weebly.com/t5/forums/v3_1/forumtopicpage/board-id/SiteEditor/thread-id/43/page/2

You could probably add an image to a hidden page of your site, then copy the URL of the image off your live site to use with the META tag.

[69jelly]

I'm having a similar problem.

Only just started a blog page on my website and for some reason doesn't give me the option for facebook even though i set it up.

Not too worried about that as it does post to Twitter which then posts to Facebook.

My only problem is there is no image on Twitter from my blog post (there is an image on my post as photography image blog) but when Twitter posts to Facebook for me the image is there.

Any suggestions or known reasons please?

[Queso]

Hey there! Just to be clear, are you referring to the Twitter Card displaying, or something else entirely?

[69jelly]

Sorry i'm quite new to this.

I mean that the image i have at the top of my blog post doesn't show on my Twitter post unless you click the link to go to my blog page.

It shows on Facebook as in image and decription on my post.

[Adam7]

Images for Twitter are a little trickier since it involves extra META tags on a post or page. We don't currently include these twitter specific tags, so you'd have to try and add them yourself. For a regular page or your main blog page they can be added to that Page's Header Code field. For a blog post you can try adding them with an embed code element to the post itself, but I'm not sure that it would work with them outside of the header area. It's probably worth a shot, though.

After looking at Twitter's documentation, you'd want to add something like these but with your own info:

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@username" />
<meta name="twitter:title" content="Your post title" />
<meta name="twitter:description" content="This is a description for your post." />
<meta name="twitter:image" content="https://yoursite.com/example.png" />

[Digi_Alchemist]

Dear Adam,

Here is what happens to my post 

<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FDigiAlchemist%2Fposts%2F1804250336262981&width=500" width="500" height="310" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>

Any solution on how I can fix the thumbnail to something right? 

[Adam7]

Is that code something you're using with the Embed Code element, @Digi_Alchemist?

[Digi_Alchemist]

Hi Adam,

I wasn't using any codes as the whole point of Weebly was to help people who don't know the codes could easily do their websites.

However, after spending hours on community posts and on youtube I finally find a kind of solution to the problem.

The rest still is a problem. whenever I share anything without a code this will happen :And I would like to know how I can find that logo and change it to at least an image with the right size and proportions.

I would greatly appreciate if the Weebly customer service would value its customers time a little better.

Kind regards,

Ardi Alemi

[Adam7]

That looks to be your site logo. Facebook is cropping it because it wants to use a square image; you could replace yours with a square version although it might end up making it look smaller on your site.

[bjwmcs]

I just started to use my weebly site to also host my blog. When I share my blog post, none of the images are shared to the FB post, and no expert of the text is shared... Do you have any advise on how to remedy this?

[Bernadette3]

Hi @bjwmcs. You might need to run the url through the FB Debugger tool. What is the url of the blog post you are trying to share? I'll take a look for you. 

[Allyoop]

@Bernadette here's mine:  https://www.winningyourrelationshipgame.com/blog/narrowing-it-down-can-help-you-find-the-one

I ran it through the debugger (although I'm not clear what that's for). The options for photos to include in the Facebook post are my logo, my sidebar picture, my badge from the footer. I can manually add the picture of the frog from the blog post, but it's distorted. 

I can share any other article off the web and get a great photo, but not my own!  YIKES! 

Thanks for any assistance, Allison 

[Bernadette3]

Hi @Avelez. I don't think the frog looks distorted. Is this what you see on your end? 

[Allyoop]

sorry @Bernadette thought I replied to this long ago. When I shared to FB, I had to manually add the picture in. I just scheduled some more Facebook posts and I had the same issue. When I share it, the photos that come up are generally not from my blog post. They are my photo from the sidebar, or my logo, or my online counseling badge from my footer. I have to go to the blog post, save the image I used onto my desktop, share the link to FB, and upload the correct image off my computer.  this is only on my own articles. I can easily share with no photo add problems from someone else's blog. 

[Adam7]

Are you using images within your blog posts, @Avelez? If there aren't appropriate images within the content of the post then Facebook will use whatever image on the page meets the criteria (in this case an image in your blog sidebar).

[Allyoop]

yes, there are images in my post........perhaps they aren't "appropriate" as in a designated size? is that what you mean? I just tried the same post again and it doesn't add the photo, but another post did. When I scheduled a bunch the other day, there were a few that I had to save the photo and then manually upload it. 

As always, thanks @Adam 

[Adam7]

The only criteria usually is that the image is at least 200 pixels by 200 pixels, so most images will typically meet that If you've shared a page once and then made a change to it, you might need to tell Facebook to scrape new info. They cache info when you share a post, so if you share again with scraping new info it'll just use what it has cached instead.

You can use their debugger tool to tell it to scrape new info from a page: 

https://developers.facebook.com/tools/debug/

[Israel1]

thanks, but what about when the link is shared by people who don't know to scroll through images? Or shared on Messenger where there is no choice of image?
My url (www.wayoftheheartgathering.com) is showing a cartoon as the default image. I cannot move the location of that cartoon. Can I somehow break or remove the og:image code to stop it being the default? the one I want is the second one when you scroll through images on FB currently.
Is your whole 'put this code in the header' fix just to get the image up as an option? or, does it make it the default image? This is crucial for me to know before wading in to do that

[Adam7]

You could try adding your own og:image tag to the Header Code field for the page, publishing, then scraping the page again with Facebook's debug tool:

https://developers.facebook.com/tools/debug/

I'm not sure if that would make it use that image before all others, but it won't hurt anything to test.