Ok if you have been with me since the last post I put up on 'How To Share Your Friends Blog Posts To Facebook And Twitter'
I did some research and realized that MAYBE the reason my post wasn't showing properly after going through IFTTT.com was because the facebook og tags were not reading right. Sure enough, I headed over to facebook debugger and found that my description tag wasn't working right and my og:image tag wasn't working right.
***photo credit: Broadway via photopin (license)
This meant... when facebook received the url from IFTTT facebook didn't really know what to post. (now yes... the fact that facebook was showing the entire copy of the blog post was because I had used also used (entry content) and (entry image url) .... better to just use (entry author) with a bit of introduction text...
This blog post will serve as a test to see if these changes fix the way the IFTTT post looks on facebook.
Anyway... that is all neither here nor there.
If you have been searching for the code to use for facebook's og data... here's what worked on my blog. All of facebook's errors and warnings in the debugger vanished! YAHOO! (by the way- this image is NOT hosted by my blog host- it is actually from flickr via photopin! Photo credit below)
Paste this all in your blogger template below <head>
<copy and paste meta code begin>
<b:if cond='data:blog.pageType == "item"'>
<meta content='blog' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/></b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<meta property="og:image:width" content="1200"/>
<meta property="og:image:height" content="630"/>
</b:if>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='website' property='og:type'/>
</b:if>
<meta expr:content='"en_US"' property='og:locale'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='Insert your number here' property='fb:app_id'/>
<meta content='Insert your number here' property='fb:admins'/>
<copy and paste meta code end>
The Bottom of this post will tell you how to create the Fb App id and FB Admin code
http://www.technohalf.com/2015/01/how-to-add-facebook-open-graph-to-blogger-blog.html
The beginning of that above post is just ONE of the many that I was using to try to find the right og tag for the featured images. On that post they have just ONE thing wrong.
They use 'data:blog.postImageThumbnailUrl' for their og image tag!
Apparently you only need to use 'data:blog.postImageURL' for it to work right! (see line in blue above in the meta code)
I'd like to thank THIS site for helping me figure out the problem! http://unidigadv.blogspot.com/2014/09/adding-open-graph-protocol-ogp-tags-to.html
*Gimme just a moment and I will report back right here to let you know if the IFTTT post works better now!
YESSSSS!!!!! It works!!! Here's a link to the working IFTTT post example
As you can see... I only used (entry author) in IFTTT for this particular post, simply because I don't plan on using it.
BUT! The right image comes up, and the title/ blog url. So now... in IFTTT beside (entry author) I will type something like "A post from my friend (entry author)".
Still not too thrilled that I don't get a post description out of it but from what I can see the description is working on the Og code side ;)
Thats all folks! Thanks for bearing with me through the chaos!
