Fashiolista in NY

The Fashiolista team is in New York for the fashion week. I’m looking forward to meet some local tech startups. Drop me a mail or leave a comment if you want to grab a coffee.

Cheers,
Thierry Schellenbach
CTO/ Founder
Fashiolista

Business &Django &Events &Fashiolista &Python tschellenbach 11 Feb 2012 254 Comments

Facebook open graph publishing simplified

Facebook has just enabled the open graph for 60 lucky apps. The new open graph beta allows you to post a user’s actions to their timeline. This activity is shown to the user’s friends in Facebook’s newsfeed and ticker. Furthermore your data is nicely aggregated on a user’s Facebook profile. Fashiolista’s aggregation for instance looks like this:

Posting these actions on Facebook can greatly enhance the viral growth of your company. Spotify, one of the launch partners, has grown by more than 4mil active users. This blogpost explains how to use Django Facebook to integrate your Django based site with Facebook.

How open graph works

Before going into the code though we need to understand the basic concepts of the open graph: actions and objects. Facebook’s getting started interface explains it best:

Actions are the verb, objects are what the action is applied to. You submit the data for these actions and objects to Facebook. An example would be watching (action) the movie Pan’s Labyrinth (object). Every object should be represented by a dedicated URL. For instance if you look at Chiara’s profile (object) on Fashiolista you will see the following open graph data:

<meta property="og:title" content="ChiaraFerragni" />
<meta property="og:image" content="http://bit.ly/rso3ig" />
<meta property="og:type" content="fashiolista:fashiolista" />
<meta property="og:site_name" content="Fashiolista" />

To post to the open graph you specify an action and the url for the object. You can read more about it in Facebook’s open graph docs.

Getting permission

Users only need to give you permission to the open graph once. You specifically need the publish_actions permission. When asking for this permission a pretty permission interface as shown below will appear:

Notice the tiny add to timeline box displayed at the bottom right corner of the interface.

Posting to the graph

The code below will show you how to post to the open graph. There are however a few requirements which you’ll need to go through.

  1. Register your own Facebook app and define actions and items
  2. Have Django Facebook installed

Simple posting to the graph

After receiving this permission we can post to the user’s timeline. Below is the most basic example:

@facebook_required(scope='publish_actions')
def open_graph_beta(request):
    '''
    Simple example view on how to do open graph postings
    '''
    fb = get_persistent_graph(request)
    entity_url = 'http://www.fashiolista.com/item/2081202/'
    result = fb.set('me/fashiolista:love', item=entity_url)
    messages.info(request, 'The item has been shared to fashiolista:love')

This posts the action love to the users timeline with the object data found at the url http://www.fashiolista.com/item/2081202/.
The syntax me/fashiolista:love translates to post to me in the namespace fashiolista with the action love.

Asynchronous posting to the graph

While the above example works, you often won’t want to keep your users waiting for the Facebook API request. Especially since they are quite sluggish at the moment.
Below there’s a version of the code using celery. Celery is a task queuing system which enables you to run tasks asynchronously.

@task.task(ignore_result=True)
def open_graph_beta(user):
    '''
    Example posting to open graph using a celery task
    '''
    profile = user.get_profile()
    fb = profile.get_offline_graph()
    entity_url = 'http://www.fashiolista.com/item/2081202/'
    result = fb.set('me/fashiolista:love', item=entity_url)

Concluding

Integrating with open graph is easy. Head over to the github page of Django Facebook to get started. Contributions are more than welcome.

Fashiolista Jobs

Do you also see the beauty in clean code? Are you experienced with high scalability web apps? Currently we’re looking for additional talent over at our Amsterdam office. Feel free to drop me a line at my personal email for more information: thierryschellenbach[át]gmail.com

Business &Django &Facebook &Fashiolista &Marketing &Python &Web Development tschellenbach 01 Feb 2012 81 Comments

Django Facebook 3.2 – Simple image upload and wall posts

Most of the Facebook examples are written in PHP and unfortunately for us they always seem so damn simple. I think the Python libraries should allow you to write more elegant code and the new version of Django Facebook let’s you do just that.

Much of the new found simplicity comes from the facebook_required decorator. This decorator is similar to login_required, but instead checks the Facebook permissions given to you. Writing the input of a form to someone’s wall is now as simple as this:

@facebook_required(scope='publish_stream')
def wall_post(request):
    fb = get_persistent_graph(request)

    message = request.POST.get('message')
    fb.set('me/feed', message=message)

    messages.info(request, 'Posted the message to your wall')

    return next_redirect(request)

Another example would be uploading some photos to a user’s timeline:

@facebook_required(scope='publish_stream,user_photos')
def image_upload(request):
    fb = get_persistent_graph(request)
    pictures = request.POST.getlist('pictures')

    for picture in pictures:
        fb.set('me/photos', url=picture, message='the writing is one The '
            'wall image %s' % picture)

    messages.info(request, 'The images have been added to your profile!')

    return next_redirect(request)

As you can see the syntax is very straightforward. You no longer have any technical excuse against integrating Facebook.
More examples and installation instructions can be found on Django Facebook’s github.

Django &Facebook &Fashiolista &Python tschellenbach 23 Oct 2011 47 Comments

5 ways in which Facebook redefines online marketing

In the last few years the landscape for online marketing has shifted towards Facebook. The most obvious point is Facebook’s own ad platform, which currently exceeds 2 billion dollar in revenue. However the more fundamental changes are caused by Facebook’s social platform. This article outlines the 5 ways in which Facebook is redefining online marketing.

About Thierry Schellenbach: Co-Founder of Fashiolista.com, author of Django Facebook. Follow me on Twitter or Facebook

1. Interest based marketing

Firstly Facebook allows you to target your advertising to specific interest groups. Especially for community driven sites it’s now possible to reach your target audience with almost scary precision. A marketeer can target all single girls living in Amsterdam, which like snowboarding and work at Google. This improved targeting enables you to attract visitors which are more likely to use your product.

Try out Facebook advertising

2. Zero friction authentication

The Facebook effect continues when users reach your landing page. Instead of filling out a form with annoying questions, users just need to find the big blue button on your site and they are good to go.
Having a Facebook login flow on your site drastically increases your conversion to members. Also the Facepile social plugin shows you which of your friends are using the site you’re visiting. This creates another incentive for users to join your site.


A good example of a zero friction signup flow is the Fashiolista landing page as shown above.

3. Instant personalization and Friends

The first two points allow you to acquire more users at a substantially lower member acquisition cost than previously possible. In addition the user accounts created by the Facebook connect flow immediately contain very rich information. You know their birthday, their age, their email, their gender and more importantly their real name. Using real names on online platforms substantially reduces spam and trolling. Furthermore since you know the user’s Facebook id you can connect them to their friends.



Pinterest for instance makes it extremely easy to follow your Facebook friends on Pinterest.

4. Like based personalization

Facebook started focusing on likes about a year and a half ago when they released the open graph protocol and like buttons. Currently many users have indicated which sports, movies and brands they like. You can utilize this data to immediately connect the users to topics they care about.


Quora is the leading example on how to personalize your content to new users. When you join Quora topics will be suggested to you based on your interests. So someone interested in Entrepreneurship will see entirely different content than someone interested in gardening.

5. Social sharing – Evangelists

Some of these users you just acquired will absolutely love your product. (Stop marketing and improve your product if they don’t). Previously these users would maybe email a friend or two and if you’re lucky tell their colleagues about it. Facebook however empowers them to easily share your product to all of their friends. Evangelists which would maybe recruit two new members are enabled by Facebook to recruit dozens. It is very common for user’s of Fashiolista to invite more than 30 of their friends, many of which become members.


The invite flow on Fashiolista smartly shows your female friends, which are not yet on Fashiolista and enables you to quickly send an invite message to their wall.
Similar, albeit less pretty invite flows are a strong component of games like CityVille and Farmville.

Conclusion and on to F8

Facebook has so far reduced the cost of getting visitors to your site. In addition it has become easier for these visitors to become members and receive a personalized experience.
Finally Facebook empowers your evangelists to reach more of their friends than was previously possible. Throughout these steps the cost and friction involved with recruiting new members have been substantially reduced.

On September 22nd Facebook will make several announcements at their F8 conference.
Have a look at the livestream to find on how they will change online marketing again.

About Thierry Schellenbach: Co-Founder of Fashiolista.com, author of Django Facebook. Follow me on Twitter or Facebook

Business &Facebook &Fashiolista &Marketing &Web Development tschellenbach 21 Sep 2011 63 Comments

Amsterdam based, VC funded startup, Fashiolista looking for new team members

Over the past months Fashiolista has grown to be one of the largest fashion communities worldwide. Dividing attention between scaling the site and creating new features has been quite a challenge. We are looking for a very experienced django developer to join our team.

About Fashiolista

Fashiolista is best described as “twitter for fashion”. Girls follow each other’s fashion finds and indicate which items they love. We are funded by Atomico ventures and several high profile angel investors.

Why you will love working at Fashiolista

– Young team, startup culture
– Developers in the founding team
– The team has been working with Django for more than 4 years
– Modern stack (Django 1.3, postgres, redis, memcached, jquery, celery, solr, GIT)
– Learning culture

Did I mention we are located in the centre of Amsterdam?

Who we are looking for

We are looking for a talented Django developer with experience in building highly scalable applications. Since our team is small, strong experience with Linux or Freebsd system administration would be a big plus.

  • Experienced with Django and Python (> 3 years preferably)
  • Knowledge of SQL and query optimization
  • Javascript experience
  • Test driven development
  • Memcached and other caching techniques
  • GIT

Bonus points for:

  • Knowledge of FreeBSD or Linux system administration
  • Redis/ NoSql experience
  • SOLR experience
  • Postgres Trigger experience
  • Celery experience
  • CS degree

For this position you need to be willing to work in The Netherlands/ Amsterdam. Furthermore the position is full time.

To conclude

We are looking for someone with an excellent work attitude and considerable experience. It doesn’t matter if you are a student, cum laude graduate, or drop out, as long as you’re extremely passionate about what you do. You will be working in a startup and we expect your input on a wide range of challenges.

If you recognize yourself in the above description or would like more information please contact me at:
thierry…fashiolista.com

Django &Fashiolista &Python &Web Development tschellenbach 15 Aug 2011 23 Comments

Django Facebook 3.0 – OAuth migration – Time to upgrade!

Facebook is migrating to HTTPS and OAuth to increase the safety of their users. Unfortunately these changes aren’t backwards compatible and will require some effort to follow. To support the new Facebook system you need to upgrade to Django Facebook 3.0 before October 1st.

In addition to the required migrations, this version also includes several new features. The largest change is the underlying Facebook API client. You can read about the improvements here or skip down to the upgrade instructions.

Open Facebook – New Python Facebook client

Open Facebook is a python client to the Facebook graph API. Currently it’s included in Django Facebook, but in time it will be spun of as a separate project. The client is supported, tested and up to date with the current version of Facebook’s graph API.
It handles connection issues cleanly and raises separate error classes for various Facebook error scenarios.
The syntax is very straightforward to use:

open_facebook = OpenFacebook(token)
#info about me
open_facebook.me()

#retrieving a page
open_facebook.get('fashiolista')

#retrieving your albums
open_facebook.get('me/albums')

#posting a message on your wall
open_facebook.set('me/feed', message='Check out Fashiolista', picture=image_url)

#setting a like
open_facebook.set('fashiolista/likes')

#fql example
result = open_facebook.fql('SELECT name FROM user WHERE uid = me()')

#authorization is handled separately from the API class
token = FacebookAuthorization.get_app_access_token()
test_user = FacebookAuthorization.create_test_user(token)

Album upload Example

Uploading pictures to Facebook is as simple as this:

open_facebook = get_facebook_graph(request)
photo_urls = [
    'http://d.fashiocdn.com/images/entities/0/6/t/p/d/0.365x365.jpg',
    'http://e.fashiocdn.com/images/entities/0/5/E/b/Q/0.365x365.jpg',
]
for photo in photo_urls:
    uploaded = open_facebook.set('me/photos', url=photo, 
        message='Fashiolista is awesome', name='FashiolistaTest'
    )

So there are good reasons to upgrade even if Facebook didn’t force us to :)

How to upgrade to 3.0

First Step – Install Django Facebook 3.0
Follow the installation instructions.

Javascript changes
In your Facebook initialization code enable OAuth.

FB.init({appId: facebookAppId, status: false, cookie: true, xfbml: true, oauth: true});

Perms has been renamed to scope.

FB.login(function() {}, {'scope' : 'offline_access'});

Django Facebook changes
The get_facebook_graph function is no longer persistent by default, if you want the old behavior use get_persistent_graph.
Furthermore the FacebookUserConverter class and the core Facebook API client are now separated. get_facebook_graph returns the core facebook API client. To go from the API class to the user converter class use something like

graph = get_facebook_graph(request)
facebook = FacebookUserConverter(graph)

That should be all.
If you are encountering problems feel free to let me know in the comments.

Last Step – Enable the new Facebook Migrations
Go to the Facebook Apps page and enable the OAuth migration.
Select your app -> About -> Advanced -> Migrations
Enable Force OAuth
Enable OAuth Migration

Background reading

Moving to OAuth 2.0 + HTTPS
Updated JavaScript SDK and OAuth 2.0 Roadmap
New Facebook Authentication Docs
PHP SDK v.3.1.1
PHP SDK v3.0.0

We’re hiring!

Do you also see the beauty in clean code? Are you experienced with high scalability web apps? Currently we’re looking for additional talent over at our Amsterdam office. Feel free to drop me a line at my personal email for more information: thierryschellenbach[at]gmail.com

Django &Facebook &Fashiolista &Javascript &Python &Web Development tschellenbach 13 Aug 2011 18 Comments

Django Facebook 2.0 – Integrating Facebook

It’s been a year since Facebook changed the web with the open graph API and their like button. Unfortunately Facebook didn’t have much developer love for the python/django platform. Django Facebook aims to make it easy to build facebook apps and integrate facebook with your website.

Key functionality

One of the strong points of Django Facebook is the ability to register users using Facebook. It ports all of Facebook’s user data to the Django user and profile models. This allows you to have a secure register/connect/login flow using Facebook, greatly reducing the barriers to start using your application. Below an example of me registering for Fashiolista using the Facebook register flow.

Me on Facebook

Me on Fashiolista

In this blog post I will explain how to get started implementing a Facebook connect flow. Django Facebook can however do quite a bit more, as you can see in the feature list below. Development over at the github repo is very active. I strongly appreciate help on improving the functionality so please fork and contribute.

Features

  • Register users using the Facebook open graph API
    • Full profile data birthday, gender, website, about me, username, email and picture
    • Support for mobile authentication
    • Fallback to registration form for entering additional data when required
  • Build Facebook Canvas applications
  • Mobile registration using Facebook
  • Execute Facebook FQL queries
  • Upload pictures to Facebook
  • Find your Facebook friends

Getting Started

Now let’s get started with building a Facebook login/connect/register flow. This post will guide you through it step by step.

Prerequisites

Create a Facebook app

Have django registration installed (other registration systems will require some small code changes)

pip install django_facebook :)

A.) Settings and more

Define these settings in your settings file.
FACEBOOK_API_KEY
FACEBOOK_APP_ID
FACEBOOK_APP_SECRET

add django facebook to your installed apps
‘django_facebook’,
add this line to your url config
(r’^facebook/’, include(‘django_facebook.urls’)),
add this line to your context processors
‘django_facebook.context_processors.facebook’,
add this to your AUTHENTICATION_BACKENDS
‘django_facebook.auth_backends.FacebookBackend’,

B.) Adjust your user Profile model

Secondly we need to be able to store the Facebook data on your user profile.
The easiest way to do this is to add the abstract model in django_facebook/models.py called FacebookProfileModel to your profile model.
After your profile is ready to store Facebook data you should have a working example at /facebook/connect/.
Let me know in the comments if something went wrong up to this point :)

C.) Design and integration

You can style the facebook form and button anyway you see fit. Over at Fashiolista we added a nice facepile for example. The basic markup is located in the example file connect.html.
We use the facebook javascript SDK for a smooth user integration. You can load the facebook JS like this:

<script src="{{ MEDIA_URL }}js/original/facebook.js" type="text/javascript"></script>
<script>
facebookAppId = '{{ FACEBOOK_APP_ID }}';
function facebookJSLoaded(){
FB.init({appId: facebookAppId, status: false, cookie: true, xfbml: true});
}
window.fbAsyncInit = facebookJSLoaded;
F = new facebookClass(facebookAppId);
F.load();
</script>

Subsequently implement a form which calls Facebook via javascript. Note that you can control which page to go to after connect using the next input field.

<form action="{% url facebook_connect %}?facebook_login=1" method="post">
<a href="javascript:void(0);" style="font-size: 20px;" onclick="F.connect(this.parentNode);">Register, login or connect with facebook</a>
<input type="hidden" value="{{ request.path }}" name="next" />
</form>
<div id="fb-root"></div>

That was all, you should now have a working registration flow using Facebook. Let me know in the comments if you encounter any difficulties.
If you want to go one step further and understand the facebook API, you can find the Facebook documentation here.
Django Facebook received tons of improvements from the python community. I’m certainly missing a few authors, but I would like to thank a few specifically:

Many thanks to (amongst many others)

More posts coming up

  • Building a facebook canvas app using Django Facebook
  • Find and invite friends using Django Facebook

We’re hiring!

Do you also see the beauty in clean code? Are you experienced with high scalability web apps? Currently we’re looking for additional talent over at our Amsterdam office. Feel free to drop me a line at my personal email for more information: thierryschellenbach[at]gmail.com

Css &Django &Events &Facebook &Fashiolista &Prototype &Python &Web Development tschellenbach 23 Jun 2011 70 Comments

« Previous PageNext Page »