Social Login to TYPO3 (sociallogin2t3)

The extension “sociallogin2t3″ is a social media login tool for logging into the front-end of TYPO3 with social media accounts from Facebook, Hyves, Twitter and LinkedIn based on OAuth authentication. It was developed by Ron Schoellmann and Joost van Berckel for the Dutch trade union CNV (Christelijk Nationaal Vakverbond).

User data will be imported/ updated to table fe_users. User will be logged in as FE user.

Link to the Typo3 Repository: https://typo3.org/extensions/repository/view/sociallogin2t3/current/

Guide

Server requirements:

  • PHP>=5.2
  • libcurl package for PHP

User requirements

  • Cookies activated

Here is how to use it:

  • Create an application for each service provider login (Facebook, Hyves, Twitter, Linkedin are possible) that you want to include. Don’t worry, no coding necessary here, you just need some numbers (consumer key or app id and the consumer secret).
    Links to service providers:
    http://developers.facebook.com/setup/
    http://www.hyves.nl/developer/apiconsumer/
    http://twitter.com/apps/new
    https://www.linkedin.com/secure/developer
  • Install extension sociallogin2t3 through TYPO3 Extension Manager
  • Include static template “Social Login to TYPO3 (sociallogin2t3)” in your page template:
    Template > Info/Modify > “Edit the whole template record” > Includes > “Include static (from extensions)” > Select  “Social Login to TYPO3 (sociallogin2t3)”
  • Use Template > Constant Editor > SOCIALLOGIN2T3 to enter user storage page, group id, keys and secrets where needed. The fields should be self-explanatory.
  • Insert the plugin on whatever page you want the login/ logout buttons to appear
  • Don’t use it in conjunction with ext facebook2t3 on the same page
  • Apply styling as necessary to “div.tx-sociallogin2t3-pi1” and possible children elements (there is a class for every button)
  • Check for demo on http://www.contentonline.nl/typo3-login-demo-with-hyves-twitter-facebook-and-linkedin/
  • Check here for discussion

Facebook Connect to TYPO3 (facebook2t3)

TYPO3 extension to let users connect to their Facebook account and import data to fe_users. User will be logged in as FE user and a Facebook logout button will appear instead of the login button.

Link to the TYPO3 Repository: https://typo3.org/extensions/repository/view/facebook2t3/current/

Guide

Server requirements:

  • PHP>=5.2
  • libcurl package for PHP

Here is how to use it:

  • Create a Facebook application at http://developers.facebook.com/ (don’t worry, no coding necessary here, you just need some numbers and you have to type in your web site url in the core settings) and copy the application id and secret
  • Install extension facebook2t3 through TYPO3 Extension Manager
  • Include static template “Facebook Connect to TYPO3 (facebook2t3)” in your page template:
    Template > Info/Modify > “Edit the whole template record” > Includes > “Include static (from extensions)” > Select “Facebook Connect to TYPO3 (facebook2t3)”
  • Use Template > Constant Editor > FACEBOOK2T3 to enter user storage page, group id, Facebook application id, Facebook secret and fields as described in the constant editor
  • Insert the plugin on whatever page you want the login/ logout button to appear
  • Don’t use it in conjunction with ext sociallogin2t3 on the same page
  • Apply styling as necessary to “div.tx-facebook2t3-pi1” and possible children elements
  • Check here for discussion

FAQ

How to import the email address from Facebook?

Just add “email” to constants via Constant Editor or typoscript. Here is an example:

plugin.tx_facebook2t3_pi1 {

facebookFields4Perms = email, name, first_name, last_name, link, gender, email
facebookFields4Fetch = email, name, first_name, last_name, link, gender, email
fe_usersFields = username, name, tx_facebook2t3_first_name, tx_facebook2t3_last_name, tx_facebook2t3_link, tx_facebook2t3_gender, email

}

In this case the email address is imported twice into table fe_users: as username and email.

Search for string in files and replace string in these files only

Here is a tiny script that I like to use for batch editing files from the shell command line:

find . -iname ‘*.php’ | xargs grep ‘oldString’ -sl | xargs sed -i ‘s/oldString/newString/g’

It is a combined command that does the following:

  1. Find all files ending in ‘.php’ in the current folder or below and pipe the output via xargs to
  2. grep seach for ‘oldString’ within these files, generate a result list and pipe it to the stream editor
  3. sed, where ‘oldString’ will be replaced by ‘newString’

In this example only php files where ‘oldString’ occurs will be touched.

Make sure to only edit files you really want to by leaving out the third part:

find . -iname ‘*.php’ | xargs grep ‘oldString’ -sl

This will show you the list of files to be touched.

Tags: dev, linux
Posted in Net Engineering by Ron. No Comments

Adding div layer in front of flash

If you want to add a layer in front of a flash object, e.g. to add the ability to make the flash clickable, or put an overlay above a flash, make sure to insert

<param name=”wmode” value=”transparent” />

as object parameter.

The div layer has to placed with a css style attribute whereever you need it. In the example I let the div cover the entire side.

For IE I added a blank gif.

Here is an example that can be checked out on oscar-koeln.de/flash:

<object id=”fsIntro” classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,24″ width=”1280″ height=”1024″>

<param name=”movie” value=”flash.swf” />

<param name=”quality” value=”high” />

<param name=”menu” value=”false” />

<param name=”wmode” value=”transparent” />

<!–[if !IE]> <–>

<object data=”flash.swf” width=”1280″ height=”1024″ type=”application/x-shockwave-flash”>

<param name=”quality” value=”high” />

<param name=”menu” value=”false” />

<param name=”wmode” value=”transparent” />

<param name=”pluginurl” value=”http://www.macromedia.com/go/getflashplayer” />

Alternative Text.

</object>

<!–> <![endif]–>

</object>

<div style=”position:absolute; top:0px; left:0px; width:1280px; height:1024px;”>

<a style=”position:absolute; top:0px; left:0px; width:1280px; height:1024px;” href=”/start”>

<img style=”position:absolute; top:0px; left:0px; width:1280px; height:1024px;” src=”/links/include/blank.gif” alt=””/>

</a>

</div>

It took me a while to figure that out. Hope, it helps.

Tags: dev, flash, html
Posted in Net Engineering by Ron. 2 Comments