1
2

INSTAGRAM_USER_ID=XXXXX
INSTAGRAM_ACCESS_TOKEN=XXXXXXXXXX

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

class InstagramBlock(blocks.StructBlock):

    title = blocks.CharBlock(
        max_length=200,
    )

    bg_color = blocks.CharBlock(
        required=True,
        default='#ffffff'
    )

    instagram_username = blocks.CharBlock(
        max_length=50,
    )

    def get_context(self, value, parent_context=None):
        context = super().get_context(value, parent_context=parent_context)

        url = "https://graph.facebook.com/v10.0/" + settings.INSTAGRAM_USER_ID
        params = {
            "fields": "name,media.limit(8){caption,like_count,media_url,permalink,timestamp,thumbnail_url,media_type}",
            "access_token": settings.INSTAGRAM_ACCESS_TOKEN,
        }
        req = urllib.request.Request(url + '?' + urllib.parse.urlencode(params) )
        req.add_header('User-Agent', 'Mozilla/5.0')

        try:
            r = urllib.request.urlopen(req)
        except URLError:
            return context

        datadict = json.loads(r.read().decode("utf-8"))
        
        instalist = []
        for data in datadict['media']['data']:
            insta = Instadata(data['like_count'],data['media_url'],data['permalink'])
            instalist.append(insta)
        context['instalist'] = instalist

        return context

    class Meta:
        template = "streams/instagram_block.html"
        icon = "image"
        label = "Instagram"

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

{% load static wagtailcore_tags %}

<!-- Instagram Block -->
<div class="py-5" style="background-color: {{ value.bg_color }}">
    <div class="container">
        <div class="row text-center">
            <div class="col-sm-12">
                <h3 class="streamfield-title">{{ value.title }}</h3>
                <div id="username" style="display:none" username="{{ value.instagram_username }}"></div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row my-5">
            {% for insta in instalist %}
                <div class="col-6 col-xs-6 col-sm-6 col-md-3 mb-3">
                    <a href="{{ insta.permalink }}" target="_blank"><img class="img-fluid" src="{{ insta.media_url }}"></a>
                </div>
            {% endfor %}
        </div>
    </div>
</div>

<!-- End Instagram Block -->