How to Embed New Facebook “Like” Button on a Tumblr Blog

April 21, 2010

Facebook recently, as in a couple of hours ago, released a bit of handy functionality that allows you to install a “Like” button on any webpage. Obviously, this has some pretty cool web traffic implications considering that it acts just like a Like button on Facebook (even looks the same). Anyhow, enough about that, here’s the “How To get this button installed on your blog” (this is specifically for Tumblr- however the same principal applies for other platforms). Joel Leo should take a huge bow for helping me out on this, a true genius you are, sir.

1. First off, grab this code:

<div><iframe src=”http://www.facebook.com/plugins/like.php?href={Permalink}&amp;layout=standard&amp;show-faces=true&amp;width=450&amp;action=like&amp;colorscheme=light” scrolling=”no” frameborder=”0″ allowTransparency=”true” style=”border:none; overflow:hidden; width:300px; height:75px”></iframe></div>
The {Permalink} in the above code is the link of the post that the “like” button shows up in. You can customize your Like button here http://developers.facebook.com/docs/reference/plugins/like

2. Then head on over to your Tumblr custom HTML settings; you should find this under the “Theme” tab, and paste it into where you’d like the Like button to go. Note: I put the button below the body of the text– your HTML code probably looks very similar to mine- look for the <p>body</p> paste the Facebook HTML right after this. See the location of the FB code in the pic below.

3. Now that you have that pasted in there all sung like. Grab this code:
<meta property=”og:title” content=”{block:PostTitle}
{PostTitle}
{/block:PostTitle}”>
4. While still in the custom theme dashboard on your Tumblr account, head to the top of the page. Paste the code above into right after the Title block of code, see picture below:
What this effectively does is change what your friends on Facebook see when someone likes a post. Rather than seeing that Sally “liked this blog” (default functionality if you don’t do steps 3 and 4) people will see: Sally liked “Title of Post.”
5. Save your work and you’re done.
Note: I still haven’t figured out how to format the location of the like button when a blog title doesn’t have a post (defaults to the top of the post rather than the bottom). When we figure it out, I’ll post it.
Advertisements

Embed a Google Form on a Facebook Fan Page.

April 12, 2010

Since the start of 2010, Facebook no longer allows you to use an Iframe in the Static FBML app.  This change makes embedding many elements into the Fan Page much more difficult.  Here is a way to embed the Google Form with out using an <iframe> tag.

Google Forms are useful because you can embed the form and when a user fills the form out the data is automatically put into a spreadsheet in Google Docs.  This saves tons of time having to copy and paste data.  If you have not tried out Google Forms you should.  When you create a Google Docs Spreadsheet there is a form option in the menu of the spreadsheet, give it a try.  So below you will find the step by step guide to embedding the Google form in Facebook.

1. Create a Google spreadsheet.  Each column becomes a entry element of your form.  Here is a quick video outlining how to make a form. Create a Google Spreadsheet

2. Once you have a Google Form you will need to setup a tab in Facebook to allow you to paste HTML code into it. Here is a good tutorial to set that up. Adding a Static FBML tab to your Fan Page

3. Now that you have these two basic elements setup and ready to go lets get to connecting the two. In the “Forms” menu item on your google spreadsheet there is an option called “embed form in a webpage” click this and copy the code you see, it will look like this.

“<iframe src=”https://spreadsheets.google.com/embeddedform?formkey=dGN6dlJMNkRQT0N6aW81bElQVWdyRGc6MQ&#8221; width=”760″ height=”582″ frameborder=”0″ marginheight=”0″ marginwidth=”0″>Loading…</iframe>”

4. We need to view the form page itself and not use the iframe tag. Remove the code before and after the webpage URL. It should end up looking like this.

https://spreadsheets.google.com/embeddedform?formkey=dGN6dlJMNkRQT0N6aW81bElQVWdyRGc6MQ

5. Copy and paste this URL into your browser address bar and view the page.  It should look like the form and the form elements will be nested against the edge of the page.

6. View the Page Source of this page, you are going to copy all of the HTML of the URL you just saw.

7. Paste this HTML into the Static FBML edit window  It should look like the following:

8. Now we have to remove some HTML to allow the form to show on the Facebook Page.
First remove the Doctype, html, head, meta and title tag.  ex. “<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”><html><head><meta http-equiv=”Content-type” content=”text/html; charset=utf-8″>
<title>test</title>”

9. You want to keep the “<link” tag that points to the stylesheet. But we have to edit it. Add the HTTP:// to the front of the stylesheet link.
Change = “<link href=’//spreadsheets.google.com/client/css/1968101144-embedded_form_compiled.css’ type=’text/css’ rel=’stylesheet’>

To = “<link href=’http://spreadsheets.google.com/client/css/1968101144-embedded_form_compiled.css’ type=’text/css’ rel=’stylesheet’>”

10. Now remove the “</head>” tag, and the  “<body class=”ss-base-body” dir=”ltr”>”

11. Scroll to the Bottom of the pasted HTML code and remove the “</body></html>” tags.

12. To make the formatting look a little better I usually add a “<br>” after each label item to next the box under the box name. ei. “<label for=”entry_0”>name
</label><br>

13. At this point you should be able to hit “save”, make the tab active and test your form.

14. When the form is submitted the user is taken to a confirmation page. To include a link back to your Fan Page simply add the link into the page . To Do this, Go to Your Google Spreadsheet and click “edit form” in the Form menu at the top.  It will open a new window with the form and then click “more options” at the top. Choose “edit confirmation” and change the text there. To add the link simply put a URL into the box ex. http://www.facebook.com/yoursite . Using HTML in this box will not work, only the URL