Sharing Weblog Content, Amongst Photos, To Facebook
Tuesday, October 1, 2019
Edit
We receive got a few spider web log owners, reporting problems amongst sharing their blogs to FaceBook.
You receive got 2 choices, if you lot desire to portion spider web log content to FaceBook - in addition to receive got it all await attractive.
Too many blogs produce non comprise character photos, per FaceBook Standard.
(Update 3/14): Blogger Engineering having latterly added OG code to the measure template header, this tweak may last unnecessary for virtually spider web log owners.
The problem, that also many spider web log owners have, is that their photos produce non receive got the right quality, to FaceBook.
Current sentiment seems to advise that an picture of minimum size 400 x 400 px is ameliorate than 200 x 200 px. In other words, the picture which fits neatly into the post service column may non last a practiced choice.
Without a suitable photograph inwards shared content, FaceBook Share gets imaginative.
If your primary page, or post service page, does non comprise an acceptable photo, the FaceBook Share sorcerer volition pick an picture from the page. The offset affair that the sorcerer looks for is a transparent image.
This is where the infamous "pencil" or a similar picture becomes involved. The "pencil" - if the spider web log possessor is doing the sharing - is works life at the bottom of the post. It's also known equally the "Quick Edit" icon.
If Quick Edit is non enabled, or the somebody submitting the portion is non a spider web log owner, the "pencil" won't last available. In this case, FaceBook Share volition catch a similar icon, from the spider web log confront - or mayhap from the sidebar.
We require Open Graph code, to teach FaceBook Share how to give away a photo.
FaceBook Open Graph code is non difficult to prepare - or install - only you lot produce require to use the right code.
If you lot desire something ameliorate than the "pencil" or similar fluff from existence included inwards your shares, you lot add together FaceBook Open Graph code, to say FaceBook how to give away an appropriate photo. You tin specify a photograph to include when the primary page is shared - in addition to (if you lot like) a dissimilar photograph to include when a post, amongst no photo, is shared.
Some real uncomplicated code - not!
One would last helper has been making forum dissonance recently, amongst unopen to real uncomplicated code.
There are ii problems amongst this uncomplicated code.
Something to a greater extent than than the uncomplicated code is needed.
Develop the proper uncomplicated code.
So the uncomplicated code requires a piffling to a greater extent than effort. This is what I recommend:
There are ii alternate possibilities that nosotros desire to let for.
Please depository fiscal establishment annotation that http://xxxxxxxxxxxxxxxxx/xxxxxxxxxxxx/xxxxxxxxxxx/xxxxxxxxxxx/xxxxxxxxxxx/S1600-R/yyyyyyyyyyyyy.gif needs to last replaced amongst an actual URL of a existent photo, that fulfills FaceBook requirements, for this characteristic to last useful. Choose a practiced photo, that volition correspond the spider web log when shared inwards primary page, or a post service amongst no suitable photo.
Now, I require a default photo, to purpose when no acceptable picture 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, in that location is the uncomplicated OG code, that I powerfulness purpose for sharing this blog, amongst a proper image, to FaceBook. This is genuinely a component subdivision of the code needed, when adding writer identification to FaceBook shares.
You powerfulness purpose similar code - having chosen in addition to developed a practiced character photo, to correspond your blog.
Install the proper uncomplicated code.
To install the code, you lot volition purpose the Template Editor. Please backup the template, earlier in addition to afterward you lot brand this uncomplicated change!
Start past times locating the "<HTML ... >" tag, at the overstep of the template header.
Find:
And supercede with:
Save the changes. And again, backup the template, earlier in addition to afterward you lot brand this uncomplicated change!
And amongst the code added to your template, you lot tin verify your code. In extreme cases, you lot may require advice from FaceBook Support. You may also give away FaceBook Developers: Sharing Best Practices for Websites & Mobile Apps to last a helpful reference.
---
Many #Blogger spider web log owners portion posts (and the spider web log itself) to FaceBook, amongst no problems. Some receive got latterly observed strange images existence included amongst the content shared.
An apparent modify to the FaceBook Sharing sorcerer has caused strange photos to last included, amongst blogs that lack the necessary Open Graph code. Open Graph code is non complicated - only it does require to let for possibilities.
When I portion my spider web log on FaceBook, the photograph from the spider web log doesn't appear. Some blurry pencil appears instead.What the spider web log possessor is seeing, is the number of the FaceBook Share wizard, grabbing an unwanted photo, from the page existence shared.
You receive got 2 choices, if you lot desire to portion spider web log content to FaceBook - in addition to receive got it all await 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 comprise character photos, per FaceBook Standard.
(Update 3/14): Blogger Engineering having latterly added OG code to the measure template header, this tweak may last unnecessary for virtually spider web log owners.
The problem, that also many spider web log owners have, is that their photos produce non receive got the right quality, to FaceBook.
- At to the lowest degree 200×200 pixels inwards both width in addition to height.
- Aspect ratio of width in addition to elevation no greater than 3; inwards other words, the width can’t last to a greater extent than than 3 times to a greater extent than than the height, in addition to vice versa.
Please define a chosen picture using the og:image metatag, in addition to purpose an picture that's at to the lowest degree 200x200px in addition to is accessible from Facebook.
Current sentiment seems to advise that an picture of minimum size 400 x 400 px is ameliorate than 200 x 200 px. In other words, the picture which fits neatly into the post service column may non last a practiced choice.
Without a suitable photograph inwards shared content, FaceBook Share gets imaginative.
If your primary page, or post service page, does non comprise an acceptable photo, the FaceBook Share sorcerer volition pick an picture from the page. The offset affair that the sorcerer looks for is a transparent image.
This is where the infamous "pencil" or a similar picture becomes involved. The "pencil" - if the spider web log possessor is doing the sharing - is works life at the bottom of the post. It's also known equally the "Quick Edit" icon.
If Quick Edit is non enabled, or the somebody submitting the portion is non a spider web log owner, the "pencil" won't last available. In this case, FaceBook Share volition catch a similar icon, from the spider web log confront - or mayhap from the sidebar.
We require Open Graph code, to teach FaceBook Share how to give away a photo.
FaceBook Open Graph code is non difficult to prepare - or install - only you lot produce require to use the right code.
If you lot desire something ameliorate than the "pencil" or similar fluff from existence included inwards your shares, you lot add together FaceBook Open Graph code, to say FaceBook how to give away an appropriate photo. You tin specify a photograph to include when the primary page is shared - in addition to (if you lot like) a dissimilar photograph to include when a post, amongst no photo, is shared.
Some real uncomplicated code - not!
One would last helper has been making forum dissonance recently, amongst unopen to real uncomplicated 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 ii problems amongst this uncomplicated code.
- It's based on post service code - in addition to has naught to brand a primary page portion come upwards out right.
- It requires a suitable image, inwards the post. We are here, because many posts produce non receive got suitable images.
Something to a greater extent than than the uncomplicated code is needed.
Develop the proper uncomplicated code.
So the uncomplicated code requires a piffling 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 ii alternate possibilities that nosotros desire to let for.
- Sharing the spider web log itself - in addition to no post service containing an acceptable image, on the primary page.
- Sharing a post service - in addition to no acceptable image, inwards the post
Please depository fiscal establishment annotation that http://xxxxxxxxxxxxxxxxx/xxxxxxxxxxxx/xxxxxxxxxxx/xxxxxxxxxxx/xxxxxxxxxxx/S1600-R/yyyyyyyyyyyyy.gif needs to last replaced amongst an actual URL of a existent photo, that fulfills FaceBook requirements, for this characteristic to last useful. Choose a practiced photo, that volition correspond the spider web log when shared inwards primary page, or a post service amongst no suitable photo.
Now, I require a default photo, to purpose when no acceptable picture 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/AVvXsEjAlgf82kcUGXLmbEk69UO_rs3hYgIg1oMfilpOt_R4oxPxlReHxejLVOIXSbk5-TzacFfUjbNC4KjNKldFWVqzTWs3eH5Be3G0nsGtfVa0T7ijruc1rJssNHxDdbuybe88cRVZTB7dZLQY/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/AVvXsEjAlgf82kcUGXLmbEk69UO_rs3hYgIg1oMfilpOt_R4oxPxlReHxejLVOIXSbk5-TzacFfUjbNC4KjNKldFWVqzTWs3eH5Be3G0nsGtfVa0T7ijruc1rJssNHxDdbuybe88cRVZTB7dZLQY/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/AVvXsEjAlgf82kcUGXLmbEk69UO_rs3hYgIg1oMfilpOt_R4oxPxlReHxejLVOIXSbk5-TzacFfUjbNC4KjNKldFWVqzTWs3eH5Be3G0nsGtfVa0T7ijruc1rJssNHxDdbuybe88cRVZTB7dZLQY/s1600/Screenshot+2016-02-15+at+13.08.21.png' property='og:image'/> </b:if> <!-- END Open Graph tags →
And, in that location is the uncomplicated OG code, that I powerfulness purpose for sharing this blog, amongst a proper image, to FaceBook. This is genuinely a component subdivision of the code needed, when adding writer identification to FaceBook shares.
You powerfulness purpose similar code - having chosen in addition to developed a practiced character photo, to correspond your blog.
Install the proper uncomplicated code.
To install the code, you lot volition purpose the Template Editor. Please backup the template, earlier in addition to afterward you lot brand this uncomplicated change!
Start past times locating the "<HTML ... >" tag, at the overstep 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/AVvXsEjAlgf82kcUGXLmbEk69UO_rs3hYgIg1oMfilpOt_R4oxPxlReHxejLVOIXSbk5-TzacFfUjbNC4KjNKldFWVqzTWs3eH5Be3G0nsGtfVa0T7ijruc1rJssNHxDdbuybe88cRVZTB7dZLQY/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/AVvXsEjAlgf82kcUGXLmbEk69UO_rs3hYgIg1oMfilpOt_R4oxPxlReHxejLVOIXSbk5-TzacFfUjbNC4KjNKldFWVqzTWs3eH5Be3G0nsGtfVa0T7ijruc1rJssNHxDdbuybe88cRVZTB7dZLQY/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 in addition to afterward you lot brand this uncomplicated change!
And amongst the code added to your template, you lot tin verify your code. In extreme cases, you lot may require advice from FaceBook Support. You may also give away FaceBook Developers: Sharing Best Practices for Websites & Mobile Apps to last a helpful reference.
---
Many #Blogger spider web log owners portion posts (and the spider web log itself) to FaceBook, amongst no problems. Some receive got latterly observed strange images existence included amongst the content shared.
An apparent modify to the FaceBook Sharing sorcerer has caused strange photos to last included, amongst blogs that lack the necessary Open Graph code. Open Graph code is non complicated - only it does require to let for possibilities.