So a few weeks ago we released a facebook book application called Pink Cake Box Guiltless Treats for sending cakes to your facebook friends. We’ve since expanded the application to integrate with wordpress search.
Our facebook app now has access to over 1200+ cakes and is automatically updated whenever we post new cakes. I’m proud to say that I believe this is the largest library of cakes available via any facebook application.
So I want to talk a little bit about how we integrated the wordpress search function. There are a few ways to do this, and the two options I considered were:
1. Integrate directly to wordpress default search using the ?s parameter
2. Create a custom search query
Ultimately I choose option 2 so I could create a search results template file in my wordpress theme that was separate from our default search results template. The new search results template file (which is pictured below) was customized to fit the look and feel of the facebook application:
So here are the steps I took to integrate wordpress search with my facebook application:
Step 1) Created a new search results template file that took in a GET parameter as a search term. The search results template uses the GET parameter as input into a custom query to search tags and the post content. Finally it returns the results and formats to match the look and feel of the facebook application.
Here’s the section of code that takes the GET Parameter and runs the custom search query:
if (isset($_GET[‘se’])) $search_term = esc_html
($_GET[‘se’]);
$total = "SELECT wp_posts.*
FROM wp_posts
LEFT JOIN (select distinct tr.object_id, t.name from wp_term_relationships tr inner join wp_term_taxonomy tt on tt.term_taxonomy_id = tr.term_taxonomy_id
inner join wp_terms t on t.term_id = tt.term_id where tt.taxonomy=’post_tag’) tr on wp_posts.ID = tr.object_id
INNER JOIN (select distinct tr.object_id from wp_term_relationships tr inner join wp_term_taxonomy tt on tt.term_taxonomy_id = tr.term_taxonomy_id
where tt.taxonomy=’category’ and tt.term_id in (2,3,5,7,8,11)) tr2 on wp_posts.ID = tr2.object_id
WHERE 1=1
AND (((wp_posts.post_title LIKE ‘%" . $search_term . "%’) OR (wp_posts.post_content LIKE ‘%" . $search_term ."%’))) AND wp_posts.post_type != ‘revision’
AND (wp_posts.post_status = ‘publish’) OR (tr.name like ‘%" . $search_term . "%’ AND post_status = ‘publish’)
GROUP BY wp_posts.ID ORDER BY wp_posts.post_date"
These results are returned and looped through to produce the search results output. I use the meta data tags embedded in our posts to pull the appropriate cake thumbnail. This query also restricts itself to only searching categories related to cookies, cakes and cupcakes and not other general categories that do not have cake related photos.
Step 2) Once the wordpress template was all setup, I modified our Facebook canvas page to add a search box which posts to the new search results template page:
<h1 class="headings">Search for a Cake
</h1><form method="get" id="searchform" action="http://blog.pinkcakebox.com/facebook-search-app"> <p> <input type="text" value="" name="se" id="se" /> <input class="btn" type="submit" id="searchsubmit" value="Find It" /> </p> <h1>OR
</h1></form>
Here’s a photo of how it looks:
Step 3) The last piece of integration is ensuring the new search results template can interface back with the facebook application once the user has chosen the cake they want to send to their friends. So there is one more post from the search results template back to the facebook application page that handles the next step of allowing the user to choose the friend they want to send the cake too:
<form action = "http://www.pinkcakebox.com/pinkcakebox-fcb/choosefriend.php" id="SendForm" onsubmit="return verify(this);" method="POST"> <input type="submit" value="Send this cake" /> <input type="hidden" value="" name="image_selector" id="image_selector"/> <input type="hidden" value="" name="image_title" id="image_title"/> <input type="hidden" value="" name="post_url" id="post_url"/> <input type="hidden" name="friend_selector_id" id="friend_selector_id" value="" /> </form>
Here is the overall workflow for further clarity:
