Phileo: A liking app
By hooking up phileo in your Django project, you can give your users the ability to indicate whether or not they "like" something. You choose what verb to use (if "follow" or "recommend" or something else is more appropriate to your use case), to use text or icons, etc., to customize the look and feel to match your own site.
The docs are published so I won't cover the functionality in depth but I will show you a simple case of using the built in widget. Following that I'll show you what it looks like to customize that default functionality.
Out of the Box
After installing phileo, go to the template where you want to add the widget (for example, a detail page for an object):
Load the tags library:
{% load phileo_tags %}
Include the css somewhere in your <head />:
{% likes_css %}
Include the likes widget wherever you'd like it to be in your <body />:
{% likes_widget request.user obj %}
Finally, include the AJAX to drive the posting and updating of the widget:
{% likes_js request.user obj %}
That's it. That will render a default widget that displays a checkmark icon that changes colors if you have liked something or not and display a number to the right showing how many people system wide have liked the same object.
A Custom Solution
There are multiple ways to customize phileo. You can pass in keyword arguments to the tags to use different id and class attributes for the markup and JavaScript. You can also override any or all of the included template snippets for the CSS, HTML widget, or the JavaScript. For this example, we are going to do the latter.
First let's override the HTML widget by creating templates/phileo/_widget.html:
<div class="phileo">
<a class="{{ toggle_class }}" id="{{ like_link }}"></a>
<span class="{{ like_span_total }}">{{ likes_count }} people like this</span>
</div>
If you were to compare this to the source that ships with the app, you'd see that the only change here was to add the text " people like this".
Next, let's override the CSS as by default it will use some icon graphic and we want to instead display some text that gets toggled whether or not the user likes the object. We'll do this by creating templates/phileo/_css.html:
<style type="text/css">
.phileo a {
color: #444;
background: #CCC;
font-family: Helvetica, Arial;
letter-spacing: .1em;
text-transform: uppercase;
font-size: 9px;
display: block;
padding: 5px 10px;
border: 1px solid #999;
border-radius: 5px;
font-weight: normal;
text-decoration: none;
float: left;
height: 10px;
}
.phileo a:hover {
background: #AAA;
}
.phileo a:before {
content: "I Love This!";
}
.phileo a.phileo-liked:before {
content: "Take My Love Back";
}
</style>
Now, we do need to modify the JavaScript as we want to keep the text after the count that our HTML widget included and we don't need the iconic classes. So copy and paste what's in the template that ships with phileo using it to create templates/phileo/_script.html:
<script type="text/javascript" src="{{ STATIC_URL }}phileo/js/ajax_csrf.js"></script>
<script type="text/javascript">
$(function () {
$("{{ like_link }}")
.addClass("phileo")
.addClass("{{ is_liked }}");
$("{{ like_link }}").click(function() {
$.ajax({
url: "{{ like_url }}",
type: "POST",
data: {},
statusCode: {
200: function(data, textStatus, jqXHR) {
$("{{ like_span_total }}").text(data.likes_count + " people like this");
$("{{ like_link }}").toggleClass("{{ toggle_class }}");
}
}
});
});
});
</script>
That's it! You now have your own custom widget for liking (or whatever "verb" fits your site/object). For more details, see the documentation.