Showing posts with label Feeding Blogs To Facebook. Show all posts
Showing posts with label Feeding Blogs To Facebook. Show all posts

Monday, August 17, 2015

Meta and Og Tags for Blogger Blogs- Og Image Works!



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 == &quot;item&quot;'>

<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='&quot;en_US&quot;' 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!

How To Share Your Friends Blog Posts To Facebook and Twitter

Ripples In A Social Media Pond

Testing IFTTT.com to help share my friends RSS Feeds. Since I already share most of them anyway this should help take the 'work' out of it. Please don't judge, I'm starting school full time for my associates degree in electronics engineering technology tomorrow and really need to find ways to streamline what I already do. ;)

So to all my friends out there who I already help by sharing their blog posts because I honestly LOVE your blogs... you will not be forgotten as I get busier! Promise!

I'd love to say this brilliant idea is mine... but yeah, it is so totally NOT! Instead it comes from a friend of mine, Michelle Shaeffer. I tried hootsuite as she recommended so I could connect the rss feeds to facebook but found that hootsuite will only let you do two for free... I have a good handful of friends that I routinely try to share. :( So hunting for an answer I went. Hence the test blog post to test out IFTTT.com ;)


Hold tight... I'll update the bottom of this post if it works the way I want it to!




***photo credit: Broadway via photopin (license)



 It works!!!... er well sort of...

For those wondering... I had "entry author" "Entry content" and "Entry image url" chosen ... apparently it took me literally...

I  wanted to show the author and the description using the image on the blog post (NOT my website header banner) -.-

Back to tweaking...