We have a few blog owners, reporting problems with sharing their blogs to FaceBook.
You have 2 choices, if you want to share blog content to FaceBook - and have it all look pretty.
Too many blogs do not contain quality photos, per FaceBook Standard.
The problem that too many blog owners have is that their photos are not correct quality, to FaceBook.
If your main page, or post page, does not contain an acceptable photo, the FaceBook Share wizard will pick an image from the page. The first thing that the wizard looks for is a transparent image. This is where the infamous "pencil" or similar image becomes involved.
FaceBook Open Graph code is not hard to develop - or install - but you do need to use the right code.
Some very simple code - not!
One would be helper has been making forum noise recently, with some very simple code.
There are two problems with this simple code.
Develop the proper simple code.
So the simple code requires a little more options. This is what I recommend:
Now, I need a default photo. Here's a screen print of the opening page of this post.
And, the URL from the screen print.
This gives me:
And, there is the simple OG code needed, for sharing a blog, with a proper image, to FaceBook. This is actually a portion of the complete code needed, which is part of adding author identification to FaceBook shares.
Install the proper simple code.
Now, to install it, you will have to use the Template Editor. Please backup the template, before and after you make this simple change!
Start by locating the "<HTML ... >" tag, at the top of the template header.
Find:
And replace with:
Save the changes. And again, backup the template, before and after you make this simple change!
---
Many #Blogger blog owners share posts (and the blog itself) to FaceBook, with no problems. Some have recently observed odd images being included with the content shared.
An apparent change to the FaceBook Sharing wizard has caused odd photos to be included, with blogs that lack the necessary Open Graph code. Open Graph code is not complicated - but it does need to allow for possibilities.
What the blog owner is seeing, is the effect of the FaceBook Share wizard, grabbing a photo from the page being shared.When I share my blog on FaceBook, the photo from the blog doesn't appear. Some blurry pencil appears instead.
You have 2 choices, if you want to share blog content to FaceBook - and have it all look pretty.
- Publish every post with a photo that FaceBook will want to use.
- Add FaceBook Open Graph code, to your blog.
Too many blogs do not contain quality photos, per FaceBook Standard.
The problem that too many blog owners have is that their photos are not correct quality, to FaceBook.
- At least 200×200 pixels in both width and height.
- Aspect ratio of width and height no greater than 3; in other words, the width can’t be more than three times more than the height, and vice versa.
If your main page, or post page, does not contain an acceptable photo, the FaceBook Share wizard will pick an image from the page. The first thing that the wizard looks for is a transparent image. This is where the infamous "pencil" or similar image becomes involved.
FaceBook Open Graph code is not hard to develop - or install - but you do need to use the right code.
Some very simple code - not!
One would be helper has been making forum noise recently, with some very simple code.
<!-- Open Graph Meta Tags BEGIN -->
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
</b:if>
<!-- Open Graph Meta Tags END -->
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
</b:if>
<!-- Open Graph Meta Tags END -->
There are two problems with this simple code.
- It's based on post code - and has nothing to make a main page share come out right.
- It requires a suitable image, in the post. We are here, because many posts do not have suitable images.
Develop the proper simple code.
So the simple code requires a little more options. This is what I recommend:
<!-- BEGIN Open Graph tags -->
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<meta content='http://xxxxxxxxxxxxxxxxx/xxxxxxxxxxxx/xxxxxxxxxxx/xxxxxxxxxxx/xxxxxxxxxxx/S1600-R/yyyyyyyyyyyyy.gif' property='og:image'/>
</b:if>
<b:else/>
<meta content='http://xxxxxxxxxxxxxxxxx/xxxxxxxxxxxx/xxxxxxxxxxx/xxxxxxxxxxx/xxxxxxxxxxx/S1600-R/yyyyyyyyyyyyy.gif' property='og:image'/>
</b:if>
<!-- END Open Graph tags →
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<meta content='http://xxxxxxxxxxxxxxxxx/xxxxxxxxxxxx/xxxxxxxxxxx/xxxxxxxxxxx/xxxxxxxxxxx/S1600-R/yyyyyyyyyyyyy.gif' property='og:image'/>
</b:if>
<b:else/>
<meta content='http://xxxxxxxxxxxxxxxxx/xxxxxxxxxxxx/xxxxxxxxxxx/xxxxxxxxxxx/xxxxxxxxxxx/S1600-R/yyyyyyyyyyyyy.gif' property='og:image'/>
</b:if>
<!-- END Open Graph tags →
Now, I need a default photo. Here's a screen print of the opening page of this post.
And, the URL from the screen print.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiycvtGAWsUyi0FcnFX7_ophyphenhyphenFIHdGv4Itp7CuQl-hR0kMfTJ842VT5iHXvDATysX2yPPf5fzhM_-8itEHIdwy0GTCLMnYGYv5XUKXz8WmL6gD73PY1_uJZyaqp5yL9cV48Bkn1mQ/s1600/Screenshot+2016-02-15+at+13.08.21.png
This gives me:
<!-- BEGIN Open Graph tags -->
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiycvtGAWsUyi0FcnFX7_ophyphenhyphenFIHdGv4Itp7CuQl-hR0kMfTJ842VT5iHXvDATysX2yPPf5fzhM_-8itEHIdwy0GTCLMnYGYv5XUKXz8WmL6gD73PY1_uJZyaqp5yL9cV48Bkn1mQ/s1600/Screenshot+2016-02-15+at+13.08.21.png' property='og:image'/>
</b:if>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiycvtGAWsUyi0FcnFX7_ophyphenhyphenFIHdGv4Itp7CuQl-hR0kMfTJ842VT5iHXvDATysX2yPPf5fzhM_-8itEHIdwy0GTCLMnYGYv5XUKXz8WmL6gD73PY1_uJZyaqp5yL9cV48Bkn1mQ/s1600/Screenshot+2016-02-15+at+13.08.21.png' property='og:image'/>
</b:if>
<!-- END Open Graph tags →
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiycvtGAWsUyi0FcnFX7_ophyphenhyphenFIHdGv4Itp7CuQl-hR0kMfTJ842VT5iHXvDATysX2yPPf5fzhM_-8itEHIdwy0GTCLMnYGYv5XUKXz8WmL6gD73PY1_uJZyaqp5yL9cV48Bkn1mQ/s1600/Screenshot+2016-02-15+at+13.08.21.png' property='og:image'/>
</b:if>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiycvtGAWsUyi0FcnFX7_ophyphenhyphenFIHdGv4Itp7CuQl-hR0kMfTJ842VT5iHXvDATysX2yPPf5fzhM_-8itEHIdwy0GTCLMnYGYv5XUKXz8WmL6gD73PY1_uJZyaqp5yL9cV48Bkn1mQ/s1600/Screenshot+2016-02-15+at+13.08.21.png' property='og:image'/>
</b:if>
<!-- END Open Graph tags →
And, there is the simple OG code needed, for sharing a blog, with a proper image, to FaceBook. This is actually a portion of the complete code needed, which is part of adding author identification to FaceBook shares.
Install the proper simple code.
Now, to install it, you will have to use the Template Editor. Please backup the template, before and after you make this simple change!
Start by locating the "<HTML ... >" tag, at the top of the template header.
Find:
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
And replace with:
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<!-- BEGIN Open Graph tags -->
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiycvtGAWsUyi0FcnFX7_ophyphenhyphenFIHdGv4Itp7CuQl-hR0kMfTJ842VT5iHXvDATysX2yPPf5fzhM_-8itEHIdwy0GTCLMnYGYv5XUKXz8WmL6gD73PY1_uJZyaqp5yL9cV48Bkn1mQ/s1600/Screenshot+2016-02-15+at+13.08.21.png' property='og:image'/>
</b:if>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiycvtGAWsUyi0FcnFX7_ophyphenhyphenFIHdGv4Itp7CuQl-hR0kMfTJ842VT5iHXvDATysX2yPPf5fzhM_-8itEHIdwy0GTCLMnYGYv5XUKXz8WmL6gD73PY1_uJZyaqp5yL9cV48Bkn1mQ/s1600/Screenshot+2016-02-15+at+13.08.21.png' property='og:image'/>
</b:if>
<!-- END Open Graph tags →
<!-- BEGIN Open Graph tags -->
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiycvtGAWsUyi0FcnFX7_ophyphenhyphenFIHdGv4Itp7CuQl-hR0kMfTJ842VT5iHXvDATysX2yPPf5fzhM_-8itEHIdwy0GTCLMnYGYv5XUKXz8WmL6gD73PY1_uJZyaqp5yL9cV48Bkn1mQ/s1600/Screenshot+2016-02-15+at+13.08.21.png' property='og:image'/>
</b:if>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiycvtGAWsUyi0FcnFX7_ophyphenhyphenFIHdGv4Itp7CuQl-hR0kMfTJ842VT5iHXvDATysX2yPPf5fzhM_-8itEHIdwy0GTCLMnYGYv5XUKXz8WmL6gD73PY1_uJZyaqp5yL9cV48Bkn1mQ/s1600/Screenshot+2016-02-15+at+13.08.21.png' property='og:image'/>
</b:if>
<!-- END Open Graph tags →
Save the changes. And again, backup the template, before and after you make this simple change!
---
Many #Blogger blog owners share posts (and the blog itself) to FaceBook, with no problems. Some have recently observed odd images being included with the content shared.
An apparent change to the FaceBook Sharing wizard has caused odd photos to be included, with blogs that lack the necessary Open Graph code. Open Graph code is not complicated - but it does need to allow for possibilities.
Comments