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   3382 Views

Avatar
e360

Community Member, 6 Posts

20 May 2010 at 2:54pm

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

Avatar
Willr

Forum Moderator, 5513 Posts

30 November 2010 at 7:31pm

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

Forum Moderator, 435 Posts

9 December 2010 at 2:41am

It works for me.

Avatar
Jamine

Community Member, 3 Posts

29 January 2011 at 6:26pm

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

Community Member, 57 Posts

27 May 2011 at 2:15am

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]');