Dave Dash2012-01-17T21:54:19-08:00http://davedash.com/Dave Dashdd+atom1@davedash.comFBML and CSS background images2007-08-11T00:00:00-07:00http://davedash.com/2007/08/11/fbml-and-css-background-images<p>I've been tediously building out the new <a href="http://reviewsby.us/">reviewsby.us</a> app for Facebook and I ran into some problem when I tried to embed this CSS:</p>
<div><textarea name="code" class="css">
input.openid_login {
background: url("http://openid.net/login-bg.gif") no-repeat #fff;
background-position: 0 50%;
padding-left: 18px;
}
</textarea></div>
<p>The CSS worked fine, just now background image. The fix is mentioned in <a href="http://www.facebook.com/topic.php?uid=2205007948&topic=5140&post=50818&pwstdfy=0434dec4ce75745f05b7396611234b7c#post50818">this post</a> which is to repeat the <code>background</code> statement:</p>
<div><textarea name="code" class="css">
input.openid_login {
background: url("http://openid.net/login-bg.gif") no-repeat #fff;
background: url("http://openid.net/login-bg.gif") no-repeat #fff;
background-position: 0 50%;
padding-left: 18px;
}
</textarea></div>
<p>Voila, it works. Hopefully this hack won't be necessary in later versions of the Platform.</p>
FBML and embedded CMS2007-08-04T00:00:00-07:00http://davedash.com/2007/08/04/fbml-and-embedded-cms<p>[tags]fbml, css, reviewsby.us, partials, symfony, sfFacebookPlatformPlugin[/tags]</p>
<p>One problem of going the FBML route<sup id="#fbmlcss_fnr_1"><a href="#fbmlcss_fn_1">1</a></sup> is CSS styles. You can't link to external style sheets so you need to embed everything.</p>
<p>I took the liberty of using a partial that contains all the useful CSS that I use in our app. Now we can just embed it in our layout by doing:</p>
<pre><code><?php include_partial('sfFacebook/css');?>
</code></pre>
<p>The following classes are useful:</p>
<ul>
<li><code>.app_content</code> is the div surrounding the main content of the page. It gives the canvas some padding (actually it gives itself some margin as not to butt-up against the canvas.</li>
<li><code>.box</code> this defines the classic facebook box with a dark blue border at the top and with headers that have the lighter blue background and dark blue text.</li>
<li><code>.box .header</code> the header for the box described above. Use an <code>h2</code> for the title.</li>
<li><code>.box .content</code> the main content section of a box, has a bit of padding.</li>
</ul>
<div class="footnotes">
<ol>
<li id="fbmlcss_fn_1">I'm not completely convinced that the
<a href="http://reviewsby.us/">reviewsby.us</a> app for facebook should be using FBML.
<a href="#fbmlcss_fnr_1" class="footnoteBackLink" title="Jump back to footnote in the text.">↩</a>
</li>
</ol>
</div>
Facebook Markup Language: the Dashboard and Action links2007-07-25T00:00:00-07:00http://davedash.com/2007/07/25/facebook-markup-language-the-dashboard-and-action-links<p>[tags]facebook, fbml, apps, reviewsby.us, symfony, sfFacebookPlatformPlugin, plugins[/tags]</p>
<p>Facebook has the concept of the dashboard:</p>
<p><img src="http://developers.facebook.com/images/fbml_dashboard.gif" alt="dashboard" /></p>
<p>In case the documentation isn't clear, these are where the top buttons for your app go.</p>
<p>I created the FBMLHelper to help you write links from symfony to facebook.</p>
<p>The dashboard itself is easy to create:</p>
<pre><code><fb:dashboard>
</fb:dashboard>
</code></pre>
<p>The links are fairly simple, but if you use <a href="http://symfony-project.com/">symfony</a>... we like helpers...</p>
<p>So the <code>FBMLHelper</code> has an <code>fb_action</code> method which is similar to <code>link_to</code>:</p>
<pre><code><?php echo fb_action('My Dining', '@homepage') ?>
</code></pre>
<p>Will actually render as:</p>
<pre><code><a href="http://apps.facebook.com/reviewsbyus/">My Dining</a>
</code></pre>
<p>Provided the <code>app_facebook_canvas_url</code> is set to your canvas url (for example, our's is http://apps.facebook.com/reviewsbyus/).</p>
<p>This helper takes care of routing and rewriting the URL to something that will work within Facebook's canvas.</p>
<p>... so start writing some apps. This plugin will be developed further and I'll try to publish tutorials whenever possible.</p>