Adding the Sitefinity Social Widgets

Table Of Contents


Include jQuery Plugins

  • SVN Export plugins/imageRotator to remove .svn directories and place result under /
  • Repeat for plugins/prettyPhoto
  • Should now have /imageRotator/jQuery.imageRotator.js and /prettyPhoto/css, /prettyPhoto/images, /prettyPhoto/js directories
  • Drag these into the SitefinityWebApp project structure

Include DLLs

  • Copy DLLs from /libs to your Sitefinity /bin
  • Use the Add Reference dialog

Include Controls

  • SVN Export the code to SitefinityWebApp/Widgets/Social (alongside Services and Workflows)
    • Ignore or delete the Properties directory and .csproj file
  • Drag these into the SitefinityWebApp project structure

Facebook Specific Configuration

  • Create a Facebook Application at http://www.facebook.com/developers
    • You'll need the appId and appSecret, so go ahead and write it down
  • Ensure that the account you want to access has added your application
  • Add the following to the web.config
    • Under configuration/configurationSections
<section name="facebookSettings" type="Facebook.FacebookConfigurationSection"/>
<section name="canvasSettings" type="Facebook.Web.CanvasConfigurationSettings"/>
  • Under configuration
<facebookSettings
appSecret="yourAppSecret"
appId="yourAppId" />

<canvasSettings
canvasPageUrl="http://apps.facebook.com/graphtoolkit/"
authorizeCancelUrl="http://apps.facebook.com/graphtoolkit/home/cancel" />
  • Under system.web/httpHandlers
<add verb="*" path="facebookredirect.axd"
type="Facebook.Web.FacebookAppRedirectHttpHandler, Facebook.Web" />
  • Under system.webServer/handlers
<add name="facebookredirect.axd" verb="*" path="facebookredirect.axd"
type="Facebook.Web.FacebookAppRedirectHttpHandler, Facebook.Web" />

Register Widgets With Sitefinity

  • Build and login to Sitefinity
  • Administration >> Settings
  • Choose the Advanced tab
  • Toolboxes >> Toolboxes >> Page Controls >> Sections
  • Create New. Call it whatever you want, i.e. Social
  • Visit this new Section >> Tools and Create New
  • Use the path to your the .ascx and the name, i.e. ~/Widgets/Social/Facebook/FacebookImageRotator.ascx and FacebookImageRotatorWidget
    • Repeat for each widget. Give whatever title and description you want

Facebook
FacebookImageRotatorSetup.png
Flickr
FlickrImageRotatorSetup.png
YouTube
YouTubeVideoRotatorSetup.png
Social Bar
SocialShareBarSetup.png

Add Widgets to A Page

  • Edit a page
  • Find the widget in the Toolboxes and drag it in

Last edited Jan 26, 2011 at 2:45 AM by druttka, version 8

Comments

No comments yet.