Getting started
Sections
Help

Facebook

From Snowfire Wiki

Jump to: navigation, search

Simple share on facebook link

In a layout file:

<a href="http://www.facebook.com/share.php?u={ var_url }{{ page.url }} " class="facebook">Share on facebook</a>

Inside a com_keys element (e.g. blog summary page):

<a href="http://www.facebook.com/share.php?u={ var_url }" class="facebook"></a>


Like button

Use the generator provided by facebook to get the iframe code: http://developers.facebook.com/docs/reference/plugins/like

The easiest way to add this code to a layout file is via javascript.

Example (using jQuery)

<div class="facebooklike"></div>
 
<script type="text/javascript">
	var url = encodeURIComponent('{ var_url }');
	var ele = '<iframe src="http://www.facebook.com/plugins/like.php?href=' + url + '&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>';
	$('.facebooklike').append(ele);
</script>

If you want to use the like button together with keys (in a list of blog posts for example), view the following example.

Example with keys

{ com_keys ( 
    id:'1', 
    description:'Blog posts',
    html:'
 	<div class="entry">
		<div class="date">{{ keys.title }}</div>
		<div>class="facebooklike"></div>
	</div>
    ',
    sortBy:'publishedDate descending'
) }
 
<script type="text/javascript">
	$('.entry').each(function(){
		var url = encodeURIComponent('{ var_site }/' + ($(this).find('a').attr('href')));
		var ele = '<iframe src="http://www.facebook.com/plugins/like.php?href=' + url + '&amp;layout=button_count&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>';
		$(this).find('.facebooklike').append(ele);
	});
</script>

This example is also available in In the social video tutorial

Comments

Add a facebook comment field on a single blog post

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:comments href="{ var_pageFullUrl }" num_posts="2" width="500"></fb:comments>

Add a "View all 5 comments" on blog summary page

<script src="http://connect.facebook.net/sv_SE/all.js#xfbml=1"></script>
<iframe src="http://www.facebook.com/plugins/comments.php?href={ var_site }/{{ page.url }}&permalink=1&locale=sv_SE" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:130px; height:16px;" allowTransparency="true"></iframe>
Views
Personal tools