Sharing Spider Web Log Content, Amongst Photos, To Facebook
Monday, February 15, 2016
Edit
We receive got a few weblog owners, reporting problems amongst sharing their blogs to FaceBook.
You receive got 2 choices, if yous desire to portion weblog content to FaceBook - too receive got it all await attractive.
Too many blogs do non comprise character photos, per FaceBook Standard.
(Update 3/14): Blogger Engineering having of late added OG code to the criterion template header, this tweak may hold upwards unnecessary for virtually weblog owners.
The problem, that also many weblog owners have, is that their photos do non receive got the right quality, to FaceBook.
Current thought seems to propose that an icon of minimum size 400 x 400 px is meliorate than 200 x 200 px. In other words, the icon which fits neatly into the postal service column may non hold upwards a expert choice.
Without a suitable photograph inward shared content, FaceBook Share gets imaginative.
If your principal page, or postal service page, does non comprise an acceptable photo, the FaceBook Share sorcerer volition pick an icon from the page. The outset matter that the sorcerer 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 constitute at the bottom of the post. It's also known every bit the "Quick Edit" icon.
If Quick Edit is non enabled, or the mortal submitting the portion is non a weblog owner, the "pencil" won't hold upwards available. In this case, FaceBook Share volition catch a similar icon, from the weblog human face upwards - or perhaps from the sidebar.
We postulate Open Graph code, to learn FaceBook Share how to reveal a photo.
FaceBook Open Graph code is non difficult to educate - or install - but yous do postulate to use the right code.
If yous desire something meliorate than the "pencil" or similar fluff from beingness included inward your shares, yous add together FaceBook Open Graph code, to say FaceBook how to reveal an appropriate photo. You tin specify a photograph to include when the principal page is shared - too (if yous like) a unlike photograph to include when a post, amongst no photo, is shared.
Some rattling uncomplicated code - not!
One would hold upwards helper has been making forum dissonance recently, amongst only about rattling uncomplicated code.
There are 2 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 petty to a greater extent than effort. This is what I recommend:
There are 2 alternate possibilities that nosotros desire to let for.
Please banking concern notation that http://xxxxxxxxxxxxxxxxx/xxxxxxxxxxxx/xxxxxxxxxxx/xxxxxxxxxxx/xxxxxxxxxxx/S1600-R/yyyyyyyyyyyyy.gif needs to hold upwards replaced amongst an actual URL of a existent photo, that fulfills FaceBook requirements, for this characteristic to hold upwards useful. Choose a expert photo, that volition correspond the weblog when shared inward principal page, or a postal service amongst no suitable photo.
Now, I postulate 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 uncomplicated OG code, that I powerfulness purpose for sharing this blog, amongst a proper image, to FaceBook. This is truly a component division of the code needed, when adding writer identification to FaceBook shares.
You powerfulness purpose similar code - having chosen too developed a expert character photo, to correspond your blog.
Install the proper uncomplicated code.
To install the code, yous volition purpose the Template Editor. Please backup the template, earlier too afterward yous brand this uncomplicated change!
Start past times locating the "<HTML ... >" tag, at the transcend of the template header.
Find:
And supervene upon with:
Save the changes. And again, backup the template, earlier too afterward yous brand this uncomplicated change!
And amongst the code added to your template, yous tin verify your code. In extreme cases, yous may postulate advice from FaceBook Support. You may also reveal FaceBook Developers: Sharing Best Practices for Websites & Mobile Apps to hold upwards a helpful reference.
---
Many #Blogger weblog owners portion posts (and the weblog itself) to FaceBook, amongst no problems. Some receive got of late observed strange images beingness included amongst the content shared.
An apparent alter to the FaceBook Sharing sorcerer has caused strange photos to hold upwards included, amongst blogs that lack the necessary Open Graph code. Open Graph code is non complicated - but it does postulate to let for possibilities.
When I portion 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 number of the FaceBook Share wizard, grabbing an unwanted photo, from the page beingness shared.
You receive got 2 choices, if yous desire to portion weblog content to FaceBook - too 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 do non comprise character photos, per FaceBook Standard.
(Update 3/14): Blogger Engineering having of late added OG code to the criterion template header, this tweak may hold upwards unnecessary for virtually weblog owners.
The problem, that also many weblog owners have, is that their photos do non receive got the right quality, to FaceBook.
- At to the lowest degree 200×200 pixels inward both width too height.
- Aspect ratio of width too elevation no greater than 3; inward other words, the width can’t hold upwards to a greater extent than than 3 times to a greater extent than than the height, too vice versa.
Please define a chosen icon using the og:image metatag, too purpose an icon that's at to the lowest degree 200x200px too is accessible from Facebook.
Current thought seems to propose that an icon of minimum size 400 x 400 px is meliorate than 200 x 200 px. In other words, the icon which fits neatly into the postal service column may non hold upwards a expert choice.
Without a suitable photograph inward shared content, FaceBook Share gets imaginative.
If your principal page, or postal service page, does non comprise an acceptable photo, the FaceBook Share sorcerer volition pick an icon from the page. The outset matter that the sorcerer 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 constitute at the bottom of the post. It's also known every bit the "Quick Edit" icon.
If Quick Edit is non enabled, or the mortal submitting the portion is non a weblog owner, the "pencil" won't hold upwards available. In this case, FaceBook Share volition catch a similar icon, from the weblog human face upwards - or perhaps from the sidebar.
We postulate Open Graph code, to learn FaceBook Share how to reveal a photo.
FaceBook Open Graph code is non difficult to educate - or install - but yous do postulate to use the right code.
If yous desire something meliorate than the "pencil" or similar fluff from beingness included inward your shares, yous add together FaceBook Open Graph code, to say FaceBook how to reveal an appropriate photo. You tin specify a photograph to include when the principal page is shared - too (if yous like) a unlike photograph to include when a post, amongst no photo, is shared.
Some rattling uncomplicated code - not!
One would hold upwards helper has been making forum dissonance recently, amongst only about rattling 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 2 problems amongst this uncomplicated code.
- It's based on postal service code - too has nil to brand a principal page portion come upwards out right.
- It requires a suitable image, inward the post. We are here, because many posts do 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 petty 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 let for.
- Sharing the weblog itself - too no postal service containing an acceptable image, on the principal page.
- Sharing a postal service - too no acceptable image, inward the post
Please banking concern notation that http://xxxxxxxxxxxxxxxxx/xxxxxxxxxxxx/xxxxxxxxxxx/xxxxxxxxxxx/xxxxxxxxxxx/S1600-R/yyyyyyyyyyyyy.gif needs to hold upwards replaced amongst an actual URL of a existent photo, that fulfills FaceBook requirements, for this characteristic to hold upwards useful. Choose a expert photo, that volition correspond the weblog when shared inward principal page, or a postal service amongst no suitable photo.
Now, I postulate 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/AVvXsEh3eZedECQUT_YgqL5MQh5eu9H5ckCWSsTEJlBpcrxclJjHbADvMpIZkK6EQgTTsW3ZVDGjCt4yN01L8pih0b7UmudHTDImGscpVznMLIRQsmXq-hTSjtrUH2gcmXo1gRmdFzLgBqqk-LC1/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/AVvXsEh3eZedECQUT_YgqL5MQh5eu9H5ckCWSsTEJlBpcrxclJjHbADvMpIZkK6EQgTTsW3ZVDGjCt4yN01L8pih0b7UmudHTDImGscpVznMLIRQsmXq-hTSjtrUH2gcmXo1gRmdFzLgBqqk-LC1/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/AVvXsEh3eZedECQUT_YgqL5MQh5eu9H5ckCWSsTEJlBpcrxclJjHbADvMpIZkK6EQgTTsW3ZVDGjCt4yN01L8pih0b7UmudHTDImGscpVznMLIRQsmXq-hTSjtrUH2gcmXo1gRmdFzLgBqqk-LC1/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 uncomplicated OG code, that I powerfulness purpose for sharing this blog, amongst a proper image, to FaceBook. This is truly a component division of the code needed, when adding writer identification to FaceBook shares.
Related:
Install the proper uncomplicated code.
To install the code, yous volition purpose the Template Editor. Please backup the template, earlier too afterward yous brand this uncomplicated change!
Start past times locating the "<HTML ... >" tag, at the transcend 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 supervene upon 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/AVvXsEh3eZedECQUT_YgqL5MQh5eu9H5ckCWSsTEJlBpcrxclJjHbADvMpIZkK6EQgTTsW3ZVDGjCt4yN01L8pih0b7UmudHTDImGscpVznMLIRQsmXq-hTSjtrUH2gcmXo1gRmdFzLgBqqk-LC1/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/AVvXsEh3eZedECQUT_YgqL5MQh5eu9H5ckCWSsTEJlBpcrxclJjHbADvMpIZkK6EQgTTsW3ZVDGjCt4yN01L8pih0b7UmudHTDImGscpVznMLIRQsmXq-hTSjtrUH2gcmXo1gRmdFzLgBqqk-LC1/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 too afterward yous brand this uncomplicated change!
And amongst the code added to your template, yous tin verify your code. In extreme cases, yous may postulate advice from FaceBook Support. You may also reveal FaceBook Developers: Sharing Best Practices for Websites & Mobile Apps to hold upwards a helpful reference.
---
Many #Blogger weblog owners portion posts (and the weblog itself) to FaceBook, amongst no problems. Some receive got of late observed strange images beingness included amongst the content shared.
An apparent alter to the FaceBook Sharing sorcerer has caused strange photos to hold upwards included, amongst blogs that lack the necessary Open Graph code. Open Graph code is non complicated - but it does postulate to let for possibilities.
