changeset 490:f0f3966ea44f

For #233, switched to asynchronous loading of the social media sharing javascript. Also switched to Facebook's javascript SDK instead of using an iframe for the like/share button.
author Brian Neal <bgneal@gmail.com>
date Thu, 20 Oct 2011 00:36:37 +0000
parents f785a646a5fc
children 7dbdbb08e68c
files gpp/core/templatetags/core_tags.py gpp/settings.py gpp/templates/base.html gpp/templates/core/social_sharing_begin.html gpp/templates/core/social_sharing_end.html gpp/templates/core/social_sharing_tag.html gpp/templates/home.html gpp/templates/news/index.html gpp/templates/news/story.html gpp/templates/podcast/detail.html
diffstat 10 files changed, 34 insertions(+), 15 deletions(-) [+]
line wrap: on
line diff
--- a/gpp/core/templatetags/core_tags.py	Wed Oct 19 23:31:22 2011 +0000
+++ b/gpp/core/templatetags/core_tags.py	Thu Oct 20 00:36:37 2011 +0000
@@ -57,8 +57,8 @@
     Displays social media sharing buttons.
 
     """
-    if url.startswith('/'):
-        url = 'http://%s%s' % (Site.objects.get_current().domain, url)
+    site = Site.objects.get_current()
+    url = _fully_qualify(url, site.domain)
 
     return {
         'title': title,
--- a/gpp/settings.py	Wed Oct 19 23:31:22 2011 +0000
+++ b/gpp/settings.py	Thu Oct 20 00:36:37 2011 +0000
@@ -316,11 +316,8 @@
         'js/tiny_mce/tiny_mce.js',
         'js/tiny_mce_init_std.js',
     ],
-    'social': [
-        'http://platform.twitter.com/widgets.js',
-        'https://apis.google.com/js/plusone.js',
-    ],
 }
+
 GPP_THIRD_PARTY_CSS = {
     'jquery-ui': [
         'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/redmond/jquery-ui.css',
--- a/gpp/templates/base.html	Wed Oct 19 23:31:22 2011 +0000
+++ b/gpp/templates/base.html	Thu Oct 20 00:36:37 2011 +0000
@@ -36,7 +36,7 @@
 <script type="text/javascript" src="{{ STATIC_URL }}js/shoutbox.js"></script>
 <link rel="shortcut icon" type="image/vnd.microsoft.com" href="{{ STATIC_URL }}favicon.ico" />
 </head>
-<body>
+<body>{% block begin_body %}{% endblock %}
 <div id="page" class="container">
 <div id="header" class="span-24">
    <p><a href="/" title="SG101 Home"><img src="{{ STATIC_URL }}themes/kds/sgLogo.png" alt="SurfGuitar101.com Logo" width="446" height="103" /></a></p>
@@ -120,6 +120,6 @@
    music alive.</p>
 </div>
 
-</div>
+</div>{% block end_body %}{% endblock %}
 </body>
 </html>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/gpp/templates/core/social_sharing_begin.html	Thu Oct 20 00:36:37 2011 +0000
@@ -0,0 +1,8 @@
+<div id="fb-root"></div>
+<script>(function(d, s, id) {
+  var js, fjs = d.getElementsByTagName(s)[0];
+  if (d.getElementById(id)) {return;}
+  js = d.createElement(s); js.id = id; js.async = true;
+  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
+  fjs.parentNode.insertBefore(js, fjs);
+}(document, 'script', 'facebook-jssdk'));</script>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/gpp/templates/core/social_sharing_end.html	Thu Oct 20 00:36:37 2011 +0000
@@ -0,0 +1,12 @@
+<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
+<script type="text/javascript">
+window.___gcfg = {
+  lang: 'en-US'
+};
+
+(function() {
+  var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
+  po.src = 'https://apis.google.com/js/plusone.js';
+  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
+})();
+</script>
--- a/gpp/templates/core/social_sharing_tag.html	Wed Oct 19 23:31:22 2011 +0000
+++ b/gpp/templates/core/social_sharing_tag.html	Thu Oct 20 00:36:37 2011 +0000
@@ -7,7 +7,7 @@
 <div class="g-plusone" data-size="medium" data-href="{{ url }}"></div>
 </li>
 <li style="vertical-align:top">
-<iframe src="//www.facebook.com/plugins/like.php?href={{ url|urlencode:"" }}&amp;send=false&amp;layout=button_count&amp;width=50&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>
+<div class="fb-like" data-href="{{ url }}" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false"></div>
 </li>
 </ul>
 </div>
--- a/gpp/templates/home.html	Wed Oct 19 23:31:22 2011 +0000
+++ b/gpp/templates/home.html	Thu Oct 20 00:36:37 2011 +0000
@@ -31,8 +31,8 @@
 <style type="text/css">
 #home-slideshow img { display: none }
 </style>
-{% script_tags "social" %}
 {% endblock %}
+{% block begin_body %}{% include 'core/social_sharing_begin.html' %}{% endblock %}
 {% block content %}
 <h2>Welcome to SurfGuitar101!</h2>
 <div class="span-9">
@@ -69,3 +69,4 @@
 </div>
 {% endcache %}
 {% endblock %}
+{% block end_body %}{% include 'core/social_sharing_end.html' %}{% endblock %}
--- a/gpp/templates/news/index.html	Wed Oct 19 23:31:22 2011 +0000
+++ b/gpp/templates/news/index.html	Thu Oct 20 00:36:37 2011 +0000
@@ -4,9 +4,7 @@
 {% block news_css %}
 <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/pagination.css" />
 {% endblock %}
-{% block custom_js %}
-{% script_tags "social" %}
-{% endblock %}
+{% block begin_body %}{% include 'core/social_sharing_begin.html' %}{% endblock %}
 {% block news_content %}
 <h3>{{ title }}</h3>
 
@@ -22,3 +20,4 @@
 {% endif %}
 
 {% endblock %}
+{% block end_body %}{% include 'core/social_sharing_end.html' %}{% endblock %}
--- a/gpp/templates/news/story.html	Wed Oct 19 23:31:22 2011 +0000
+++ b/gpp/templates/news/story.html	Thu Oct 20 00:36:37 2011 +0000
@@ -16,8 +16,8 @@
 {% script_tags "markitup jquery-ui" %}
 <script type="text/javascript" src="{{ STATIC_URL }}js/comments.js"></script>
 {% endif %}
-{% script_tags "social" %}
 {% endblock %}
+{% block begin_body %}{% include 'core/social_sharing_begin.html' %}{% endblock %}
 {% block news_content %}
 <div class="solid-background">
 <h3>{{ story.title }}</h3>
@@ -68,3 +68,4 @@
 {% endif %}
 </div>
 {% endblock %}
+{% block end_body %}{% include 'core/social_sharing_end.html' %}{% endblock %}
--- a/gpp/templates/podcast/detail.html	Wed Oct 19 23:31:22 2011 +0000
+++ b/gpp/templates/podcast/detail.html	Thu Oct 20 00:36:37 2011 +0000
@@ -26,8 +26,8 @@
     });
 //]]>
 </script>
-{% script_tags "social" %}
 {% endblock %}
+{% block begin_body %}{% include 'core/social_sharing_begin.html' %}{% endblock %}
 {% block podcast-content %}
 <div class="breadcrumbs">
    <a href="{% url 'podcast.views.index' %}">Podcast Index</a> &gt;&gt; {{ podcast.title }}
@@ -93,3 +93,4 @@
 </ul>
 {% social_sharing podcast.search_title podcast.get_absolute_url %}
 {% endblock %}
+{% block end_body %}{% include 'core/social_sharing_end.html' %}{% endblock %}