Django

How to add Social Media buttons to Django admin

The Django admin panel is one of the strong points and one of the features we like most, and one of the ways it has as a designer to the greatest advantage, adds buttons to a panel of the saying.

In this snippet we are going to add the buttons of social networks to said panel, which help us to share our post on twitter, facebook and linkedin, In our case we have a class called EntryAdmin from which we will inherit and add the attribute list_display the names of the 3 social networks that we want to implement:

First we will add the twitter button, the necessary code can be obtained in https://publish.twitter.com/#  and in our cases we have parameterized the following attributes, (depending on the fields that has a post in our model):

  • Data-url: url that will be shown in the tweet
  • Data-text: tweet text
  • Data-hashtags: tweet hashtags
def twitter(self, obj):
         return '''<a href="https://twitter.com/share" class="twitter-share-button" data-url="{}" data-text="{}"
                data-hashtags="{}" data-via="bedjango">Tweet</a>
                <script>
                    !function (d, s, id) {{
                        var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? "http" : "https";
                        if (!d.getElementById(id)) {{
                            js = d.createElement(s);
                            js.id = id;
                            js.src = p + "://platform.twitter.com/widgets.js";
                            fjs.parentNode.insertBefore(js, fjs);
                        }}
                    }}(document, "script", "twitter-wjs");
                </script>'''.format(obj.short_url, obj.title, obj.tags)

Once we click on the button, we can modify this information 

Secondly we have facebook, we can get the button at https://developers.facebook.com/docs/plugins/share-button?locale=en_EN#configurator and we override the attribute:

  • Data-href: url to share
    def facebook(self, obj):
        return '''<div class="fb-share-button" data-href="{}" data-layout="button" data-size="small" data-mobile-iframe="true">
               <a class="fb-xfbml-parse-ignore" target="_blank"
               href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.emergya.com%2F&amp;src=sdkpreparse">Share</a>
               </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.src = "//connect.facebook.net/es_ES/sdk.js#xfbml=1&version=v2.7";
                   fjs.parentNode.insertBefore(js, fjs);
                   }}(document, "script", "facebook-jssdk"));
               </script>'''.format(obj.short_url)

As the last button we will put the linkedin, which we can get in https://developer.linkedin.com/plugins/share And we override the attribute:

  • Data-url: url to share
    def linkedin(self, obj):
        return '''<div style="display:inline;">
               <script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US</script>
               <script type="IN/Share" data-url="{}"></script>
               </div>'''.format(obj.short_url)

Then at the end our class RssEntry we add a small description to each button and set the attribute allow_tags to True (allow_tag is a method to prevent auto-escaping)

Finally we registered our new panel:     

class RssEntry(EntryAdmin):
    list_display = ('twitter', 'facebook', 'linkedin')

     def twitter(self, obj):
         return '''<a href="https://twitter.com/share" class="twitter-share-button" data-url="{}" data-text="{}"
                data-hashtags="{}" data-via="bedjango">Tweet</a>
                <script>
                    !function (d, s, id) {{
                        var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? "http" : "https";
                        if (!d.getElementById(id)) {{
                            js = d.createElement(s);
                            js.id = id;
                            js.src = p + "://platform.twitter.com/widgets.js";
                            fjs.parentNode.insertBefore(js, fjs);
                        }}
                    }}(document, "script", "twitter-wjs");
                </script>'''.format(obj.short_url, obj.title, obj.tags)

    def facebook(self, obj):
        return '''<div class="fb-share-button" data-href="{}" data-layout="button" data-size="small" data-mobile-iframe="true">
               <a class="fb-xfbml-parse-ignore" target="_blank"
               href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.emergya.com%2F&amp;src=sdkpreparse">Share</a>
               </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.src = "//connect.facebook.net/es_ES/sdk.js#xfbml=1&version=v2.7";
                   fjs.parentNode.insertBefore(js, fjs);
                   }}(document, "script", "facebook-jssdk"));
               </script>'''.format(obj.short_url)

    def linkedin(self, obj):
        return '''<div style="display:inline;">
               <script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US</script>
               <script type="IN/Share" data-url="{}"></script>
               </div>'''.format(obj.short_url)

    twitter.allow_tags = True
    twitter.short_description = 'Twitter'
    facebook.allow_tags = True
    facebook.short_description = 'Facebook'
    linkedin.allow_tags = True
    linkedin.short_description = 'Linkedin'

admin.site.register(Entry, FinalEntry)

About the author

What is the difference between Class Based Views and Function Based Views?
03.02.2017

What is the difference between Class Based Views and Function Based Views?

How many of you have started with a new Django project and you asked yourself what type of views it is better to use: ...

Framework vs CMS: 3 Questions To Help You Decide
02.21.2017

Framework vs CMS: 3 Questions To Help You Decide

How many times have you asked yourself, when starting a new web project, if you need to use a Framework or CMS? There are ...

How to use managers in Django
02.16.2017

How to use managers in Django

The communication with the database and the abstraction about the database’s engine we are using is one of the best features ...

Why you should use Django for your next website project?
02.14.2017

Why you should use Django for your next website project?

When embarking upon the development of a new web application, one of the most important questions we must ask ourselves is ...

Top 5 sites built with Django Framework
02.01.2017

Top 5 sites built with Django Framework

What comes to mind when you hear the word Django? Almost certainly “Django Unchained” by Tarantino. However, a developer ...

Social Auth in Django
11.22.2016

Social Auth in Django

Today we are going to talk about a library to authenticate with social networks. This library is “python-social-auth” - ...

Let’s have a coffee and talk about your project

START A PROJECT

Let’s have a coffee and talk about your project

START A PROJECT

We use cookies to ensure you get the best experience on our website. More info.

Accept