Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Blog Module

Discuss the Blog Module.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Facebook Like Button


Reply

5 Posts   3329 Views

Avatar
e360

20 May 2010 at 2:54pm Community Member, 6 Posts

Has anyone integrated the Facebook Like button with the blog module?
http://developers.facebook.com/docs/reference/plugins/like

Avatar
Willr

30 November 2010 at 7:31pm Forum Moderator, 5511 Posts

Yes - we have on http://www.silverstripe.org/blog/. Its really easy. Use the facebook tool to generate the iframe code. For silverstripe.org we altered the BlogSummary.ss template (blog/templates/Includes/) and the BlogEntry.ss template (blog/templates/Layout/BlogEntry.ss).

Rather than edit those files directly in blog/ you should copy them to your current theme. Keep the location of the file in your theme the same as it is in the module (i.e BlogSummary should be copied from blog/templates/Includes/ to themes/yourthemename/templates/Includes) then you can edit it as much as you wish using your text editor

For SS.org/blog I added the following

<iframe src="http://www.facebook.com/plugins/like.php?href={$AbsoluteLink}&amp;layout=button_count&amp;show_faces=false&amp;width=150&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:150px; height:21px;" allowTransparency="true"></iframe>

The only really SS specific part of that (that's mostly straight from facebook) is the $AbsoluteLink in the ?href part. This passes the full URL to the current page.

And to add a tweet button is similar. This is the code I used for tweets in the template

<a href="http://twitter.com/share" class="twitter-share-button" data-text="$Title" data-url="$AbsoluteLink" data-count="horizontal" data-via="silverstripe" data-related="dawnapp">Tweet</a>
</div>
   
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

Again this mostly comes from Twitter but the $Title and $AbsoluteLink send information about the page to twitter.

Any question feel free to ask :)

Avatar
biapar

9 December 2010 at 2:41am Forum Moderator, 435 Posts

It works for me.

Avatar
Jamine

29 January 2011 at 6:26pm Community Member, 3 Posts

Hi Willr, I tried the Iframe code, but it doesn't work for multiple "facebook like button" in one page...I tried the XFBML code and it works..

BlogSummarry.ss
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="$FBBlogURL" layout="button_count" show_faces="false" width="450"></fb:like>

Page.ss
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="$ContentLocale" xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">

see the link for more info: http://hillarsaare.com/multiple-facebook-like-buttons-on-one-page/

Avatar
BuddhaSource

27 May 2011 at 2:15am Community Member, 57 Posts

xfbml code works fine when we are on .SS file.

Can I add <fb:like > </fb:like> in the html content?

I have tried adding these codes but no effect

HtmlEditorConfig::get('cms')->setOption('extended_valid_elements', 'fb:like[href|show_faces|width|height|stream|header|send|font]');