Sharing Weblog Content, Amongst Photos, To Facebook
Tuesday, October 22, 2019
Edit
We receive got a few weblog owners, reporting problems amongst sharing their blogs to FaceBook.
You receive got 2 choices, if y'all desire to percentage weblog content to FaceBook - together with receive got it all expect attractive.
Too many blogs produce non incorporate character photos, per FaceBook Standard.
(Update 3/14): Blogger Engineering having late added OG code to the measure template header, this tweak may hold upward unnecessary for close weblog owners.
The problem, that likewise many weblog owners have, is that their photos produce non receive got the right quality, to FaceBook.
Current sentiment seems to propose that an icon of minimum size 400 x 400 px is improve than 200 x 200 px. In other words, the icon which fits neatly into the shipping column may non hold upward a expert choice.
Without a suitable photograph inward shared content, FaceBook Share gets imaginative.
If your principal page, or shipping page, does non incorporate an acceptable photo, the FaceBook Share magician volition pick an icon from the page. The showtime matter that the magician looks for is a transparent image.
This is where the infamous "pencil" or a similar icon becomes involved. The "pencil" - if the weblog possessor is doing the sharing - is institute at the bottom of the post. It's also known equally the "Quick Edit" icon.
If Quick Edit is non enabled, or the soul submitting the percentage is non a weblog owner, the "pencil" won't hold upward available. In this case, FaceBook Share volition choose deal of a similar icon, from the weblog human face upward - or possibly from the sidebar.
We withdraw Open Graph code, to learn FaceBook Share how to bring out a photo.
FaceBook Open Graph code is non difficult to educate - or install - simply y'all produce withdraw to use the right code.
If y'all desire something improve than the "pencil" or similar fluff from existence included inward your shares, y'all add together FaceBook Open Graph code, to nation FaceBook how to bring out an appropriate photo. You tin plough over the sack specify a photograph to include when the principal page is shared - together with (if y'all like) a dissimilar photograph to include when a post, amongst no photo, is shared.
Some rattling unproblematic code - not!
One would hold upward helper has been making forum dissonance recently, amongst about rattling unproblematic code.
There are 2 problems amongst this unproblematic code.
Something to a greater extent than than the unproblematic code is needed.
Develop the proper unproblematic code.
So the unproblematic code requires a lilliputian to a greater extent than effort. This is what I recommend:
There are 2 alternate possibilities that nosotros desire to permit for.
Please depository fiscal establishment annotation that http://xxxxxxxxxxxxxxxxx/xxxxxxxxxxxx/xxxxxxxxxxx/xxxxxxxxxxx/xxxxxxxxxxx/S1600-R/yyyyyyyyyyyyy.gif needs to hold upward replaced amongst an actual URL of a existent photo, that fulfills FaceBook requirements, for this characteristic to hold upward useful. Choose a expert photo, that volition stand upward for the weblog when shared inward principal page, or a shipping amongst no suitable photo.
Now, I withdraw a default photo, to purpose when no acceptable icon is involved, when sharing this blog. Here's a covert impress of the opening page of this post.
And, the URL from the covert print.
This gives me:
And, at that spot is the unproblematic OG code, that I mightiness purpose for sharing this blog, amongst a proper image, to FaceBook. This is genuinely a subdivision of the code needed, when adding writer identification to FaceBook shares.
You mightiness purpose similar code - having chosen together with developed a expert character photo, to stand upward for your blog.
Install the proper unproblematic code.
To install the code, y'all volition purpose the Template Editor. Please backup the template, earlier together with afterwards y'all brand this unproblematic change!
Start past times locating the "<HTML ... >" tag, at the move on of the template header.
Find:
And supercede with:
Save the changes. And again, backup the template, earlier together with afterwards y'all brand this unproblematic change!
And amongst the code added to your template, y'all tin plough over the sack verify your code. In extreme cases, y'all may withdraw advice from FaceBook Support. You may also bring out FaceBook Developers: Sharing Best Practices for Websites & Mobile Apps to hold upward a helpful reference.
---
Many #Blogger weblog owners percentage posts (and the weblog itself) to FaceBook, amongst no problems. Some receive got late observed strange images existence included amongst the content shared.
An apparent alter to the FaceBook Sharing magician has caused strange photos to hold upward included, amongst blogs that lack the necessary Open Graph code. Open Graph code is non complicated - simply it does withdraw to permit for possibilities.
When I percentage my weblog on FaceBook, the photograph from the weblog doesn't appear. Some blurry pencil appears instead.What the weblog possessor is seeing, is the resultant of the FaceBook Share wizard, grabbing an unwanted photo, from the page existence shared.
You receive got 2 choices, if y'all desire to percentage weblog content to FaceBook - together with receive got it all expect attractive.
- Publish every post, containing a photograph that FaceBook volition desire to use.
- Add FaceBook Open Graph code, to your blog.
Too many blogs produce non incorporate character photos, per FaceBook Standard.
(Update 3/14): Blogger Engineering having late added OG code to the measure template header, this tweak may hold upward unnecessary for close weblog owners.
The problem, that likewise many weblog owners have, is that their photos produce non receive got the right quality, to FaceBook.
- At to the lowest degree 200×200 pixels inward both width together with height.
- Aspect ratio of width together with meridian no greater than 3; inward other words, the width can’t hold upward to a greater extent than than 3 times to a greater extent than than the height, together with vice versa.
Please define a chosen icon using the og:image metatag, together with purpose an icon that's at to the lowest degree 200x200px together with is accessible from Facebook.
Current sentiment seems to propose that an icon of minimum size 400 x 400 px is improve than 200 x 200 px. In other words, the icon which fits neatly into the shipping column may non hold upward a expert choice.
Without a suitable photograph inward shared content, FaceBook Share gets imaginative.
If your principal page, or shipping page, does non incorporate an acceptable photo, the FaceBook Share magician volition pick an icon from the page. The showtime matter that the magician looks for is a transparent image.
This is where the infamous "pencil" or a similar icon becomes involved. The "pencil" - if the weblog possessor is doing the sharing - is institute at the bottom of the post. It's also known equally the "Quick Edit" icon.
If Quick Edit is non enabled, or the soul submitting the percentage is non a weblog owner, the "pencil" won't hold upward available. In this case, FaceBook Share volition choose deal of a similar icon, from the weblog human face upward - or possibly from the sidebar.
We withdraw Open Graph code, to learn FaceBook Share how to bring out a photo.
FaceBook Open Graph code is non difficult to educate - or install - simply y'all produce withdraw to use the right code.
If y'all desire something improve than the "pencil" or similar fluff from existence included inward your shares, y'all add together FaceBook Open Graph code, to nation FaceBook how to bring out an appropriate photo. You tin plough over the sack specify a photograph to include when the principal page is shared - together with (if y'all like) a dissimilar photograph to include when a post, amongst no photo, is shared.
Some rattling unproblematic code - not!
One would hold upward helper has been making forum dissonance recently, amongst about rattling unproblematic 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 -->
There are 2 problems amongst this unproblematic code.
- It's based on shipping code - together with has naught to brand a principal page percentage come upward out right.
- It requires a suitable image, inward the post. We are here, because many posts produce non receive got suitable images.
Something to a greater extent than than the unproblematic code is needed.
Develop the proper unproblematic code.
So the unproblematic code requires a lilliputian to a greater extent than effort. 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 -->
There are 2 alternate possibilities that nosotros desire to permit for.
- Sharing the weblog itself - together with no shipping containing an acceptable image, on the principal page.
- Sharing a shipping - together with no acceptable image, inward the post
Please depository fiscal establishment annotation that http://xxxxxxxxxxxxxxxxx/xxxxxxxxxxxx/xxxxxxxxxxx/xxxxxxxxxxx/xxxxxxxxxxx/S1600-R/yyyyyyyyyyyyy.gif needs to hold upward replaced amongst an actual URL of a existent photo, that fulfills FaceBook requirements, for this characteristic to hold upward useful. Choose a expert photo, that volition stand upward for the weblog when shared inward principal page, or a shipping amongst no suitable photo.
Now, I withdraw a default photo, to purpose when no acceptable icon is involved, when sharing this blog. Here's a covert impress of the opening page of this post.
And, the URL from the covert print.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNp9mXIynEjTYV1fVlKE7oCZqq8sDd9bzPKk7yyVOUyiZGDfbxuQpoE9qj_JhSdCWYmYNoWW1a_9zxYRNE2sbgbTnSwoMKAhnfoX91ZUnw7QrzVCMJl7IeuUY5uS5wGrIor_kiw44bDeyV/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/AVvXsEhNp9mXIynEjTYV1fVlKE7oCZqq8sDd9bzPKk7yyVOUyiZGDfbxuQpoE9qj_JhSdCWYmYNoWW1a_9zxYRNE2sbgbTnSwoMKAhnfoX91ZUnw7QrzVCMJl7IeuUY5uS5wGrIor_kiw44bDeyV/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/AVvXsEhNp9mXIynEjTYV1fVlKE7oCZqq8sDd9bzPKk7yyVOUyiZGDfbxuQpoE9qj_JhSdCWYmYNoWW1a_9zxYRNE2sbgbTnSwoMKAhnfoX91ZUnw7QrzVCMJl7IeuUY5uS5wGrIor_kiw44bDeyV/s1600/Screenshot+2016-02-15+at+13.08.21.png' property='og:image'/> </b:if> <!-- END Open Graph tags →
And, at that spot is the unproblematic OG code, that I mightiness purpose for sharing this blog, amongst a proper image, to FaceBook. This is genuinely a subdivision of the code needed, when adding writer identification to FaceBook shares.
You mightiness purpose similar code - having chosen together with developed a expert character photo, to stand upward for your blog.
Install the proper unproblematic code.
To install the code, y'all volition purpose the Template Editor. Please backup the template, earlier together with afterwards y'all brand this unproblematic change!
Start past times locating the "<HTML ... >" tag, at the move on 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 supercede 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/AVvXsEhNp9mXIynEjTYV1fVlKE7oCZqq8sDd9bzPKk7yyVOUyiZGDfbxuQpoE9qj_JhSdCWYmYNoWW1a_9zxYRNE2sbgbTnSwoMKAhnfoX91ZUnw7QrzVCMJl7IeuUY5uS5wGrIor_kiw44bDeyV/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/AVvXsEhNp9mXIynEjTYV1fVlKE7oCZqq8sDd9bzPKk7yyVOUyiZGDfbxuQpoE9qj_JhSdCWYmYNoWW1a_9zxYRNE2sbgbTnSwoMKAhnfoX91ZUnw7QrzVCMJl7IeuUY5uS5wGrIor_kiw44bDeyV/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, earlier together with afterwards y'all brand this unproblematic change!
And amongst the code added to your template, y'all tin plough over the sack verify your code. In extreme cases, y'all may withdraw advice from FaceBook Support. You may also bring out FaceBook Developers: Sharing Best Practices for Websites & Mobile Apps to hold upward a helpful reference.
---
Many #Blogger weblog owners percentage posts (and the weblog itself) to FaceBook, amongst no problems. Some receive got late observed strange images existence included amongst the content shared.
An apparent alter to the FaceBook Sharing magician has caused strange photos to hold upward included, amongst blogs that lack the necessary Open Graph code. Open Graph code is non complicated - simply it does withdraw to permit for possibilities.