Sorting Posts by Facebook Likes – Part 1 – The Plan

In my attempt to help out a buddy, (actually he helped me with some graphics), so in my attempt to complete a trade with a buddy I am working on Studiopress’s Minimum Pro theme and my friend wants to have his posts listed by Facebook likes.

The plan is to have Facebook likes for the stories(posts) that will be on the site. Users will create their own stories and then others can use the Facebook like button to vote on them. Then the stories will be listed in order by Facebook likes.

This doesn’t seem impossible since Peter Benting already seems to have done it. Check out his post entitled “How to order posts by number of Facebook likes“.

The bad thing is that it seems possible but his post is beyond my comprehension at this point. Meaning I need to read up and get things figured out here. I want to learn something. I need a simpler approach that I understand. Not just copying and pasting.

Therefore, this 6 part documentation of my project details the exploration I took in getting to my final solution. It started out as a 3 part thing that has ballooned into 6 parts. If you are interesting in learning in any of the many small intricate pieces to this puzzle then explore any of the 6 steps I have documented. If you are only interested in the final solution then check that out…(when I post it)

Where to start? Since this will be a multi-step solution I will try to outline the different parts here and then have individual blog posts about each step. The way I see the problem is that I need to accomplish these things:

  1. Learn About Metadata, What is it? Etc.
    • This is where Peter stored the number of facebook likes and ultimately uses it to sort his results. Seems like this is pretty important to understand. Check out the write-up here.
  2. Learn About Facebook’s Like Button
  3. Using the Genesis Loop to Output a Custom Query and Posts with Individual Facebook Like Buttons
    • This addresses how to work with Studiopress’s Minimum Pro theme and how to place the Facebook API code with a loop. I also talk about a problem I had with getting the Facebook comment box to display properly. The pesky thing kept getting cut off.
  4. More on Facebook’s APIs and How they fit into my Project
    • This talks more about Facebook’s APIs and how to use them. Specifically I used FQL(Facebook Query Language) and their javascript SDK to accomplish what I wanted. This was a huge time monster in my project because I knew very little about Facebook APIs(application programming interfaces) and I didn’t find great examples when I looked around.

That’s it… Pretty easy, right???? Examine the six posts above and see how I did it. On the other hand, you could just check out my final post about the project which is my attempt to summarize this massive undertaking. Don’t get me wrong this would not be massive if you already know about PHP, WordPress, Studiopress’s Minimum Pro theme, Cron Jobs, Facebook’s APIs, and a few other things I had to get a handle on for the first time.

Anyway, hope this helps someone who may desire to use information from Facebook to manipulate their site.

Studiopress Minimum Pro Background Image Options

I have been helping a buddy work with Studiopress’s Minimum Pro theme. We decided we liked the theme and went ahead and purchased it. Click below to give me a little affiliate love!! It is no doubt very beautiful and sleek.

StudioPress Theme of the Month

The Parallax Effect and Background Image

The one thing that we didn’t realize when purchasing the theme was that the background image of the Minimum Pro theme uses an interesting effect known as parallax. This is done through JQuery I believe and affects scrolling / images. At webdesignerdepot.com, she has a post called How to create a simple parallax effect. You can find a simple example done and the effect is explained:

In essence, a parallax scroll is when content scrolls at different speeds, creating a sense of perspective and therefore depth.

Here are some very advanced examples of the parallax effect which are pretty cool. The effect when used in the Minimum Pro Theme, basically causes the main background image on the homepage to remain still while the bottom content scrolls over it. This is a little hard to describe. Check out the demo for the Minimum Pro theme at Studiopress’s site to see it in action. Notice how the background image behaves.

Here is the original image that is used in the demo.  So you can see the starting point and what is cropped.

Here is the original image that is used in the demo. So you can see the starting point and what is cropped.

Here you see the image as the parallax effect has rendered it for the homepage.  Notice the scrollbar positioning and compare it to the next image.

Here you see the image as the parallax effect has rendered it for the homepage. Some of the original has been cropped. Notice the scrollbar positioning and compare it to the next image.

As you scroll down you can see that the background image stays still while the rest of the page goes up and covers it.

As you scroll down you can see that the background image stays still while the rest of the page goes up and covers it.

If you read in the documentation for the theme, studiopress says:

Note: This background image does not need to be a specific size since the theme is responsive and will crop, shrink, and grow the image as needed. However, due to the nature of the effect applied to this background image, not all images will look correct. Images without a specific focal point, such as natural scenes that will not look unusual when only a portion of the image is displayed, will work best.

This means that depending on the device the parallax effect will cut the image in ways you cannot easily determine. Thus some of your image will be chopped off. You can see some different examples of screenshots below. This was taken from Studiopress’s Responsive Testing Page. Notice the difference by looking at the poles on the fence.

minimum_pro_responsive_looks

Rather than trying to get the right image perhaps there is another way to ensure we can use a specific image size/setup so that it will display the same every time… We don’t want cropping.

Solutions or Workarounds for the Parallax Effect on Minimum Pro’s Background Image

The parallax scroll effect is awesome and would be fine but the site my buddy has in mind will have an image with a specific focal point in mind. This means we won’t want for example the guy in my friend’s drawing to have his head cropped off. We want a little more control over that background image. We want my buddy’s awesome showcase logo piece to be fully visible no matter what.

Well I suppose it would have been nice to know about this effect before choosing this theme but hey things happen. So what workarounds are there for this situation.

Through searching I have found some nice solutions that were laid out by Sridhar Katakam on his blog at http://sridharkatakam.com.

I am following his posts:

I will not be detailing the steps to do these tasks. Only their outcomes. The main thing I wanted from his posts was to see what each did so I could choose but that was missing so I thought I would recreate the effects for my buddy so we can choose the one we like best. If you wish to reproduce these outcomes you could easily follow his advice in the links above or watch the video below.

I would have posted a demo but that would require a seperate install of wordpress I believe…

Options for Our Project

The project we are working on at thefrankenstoryproject.com will have an image on the homepage that cannot be cropped or I suppose we could change our idea so here are the three options we have.

  1. Abandon the idea of a cool graphic and choose some pic like the help on Studiopress suggests. Choose a pic without a focal point.
  2. Abandon the parallax scroll and have our image responsive
  3. Best of both worlds: Have a background image that works with the parallax scroll and put our cool logo over the top of it

I think you can guess what I lean towards…
Below you can see a video which shows the three in action….

http://sridharkatakam.com
For further details on how to accomplish this check out Sridhar Katakam’s the links above…
Thanks for the help sir!!!