✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🧬 Learn how to build RNA-Seq data apps with Python & Dash. Register for the May 20 Webinar!

Twitframe (iFrame element) - height adjustable

I’m trying to render twitframe in a iFrame element and I want to use a fixed-width value and an auto-height (variable) based in each different tweet.

I created a question at StackOverflow with some details and code snippets.

I’m working on it for almost two days but I don’t know exactly what I’m doing wrong.

I hope someone can give me some type of direction, It seems to be very simple, but even with a lot of searches I didn’t know what I should do

hm, instead of using javascript could you embed the tweet using html.Iframe? that’s how i’ve embedded things like youtube videos.

Hi Chris, thank you for your reply.

Yes, I’m embedding the tweets in an html.Iframe. (as the snippets bellow can show)

I think that youtube and tweets embeddings are different because sometimes the tweets have very different height sizes, for instance, when it is a retweet or when it has a photo or video attached in the tweet. And I think that it doesn’t happen in Youtube embeddings.

It’s the complete code that I’m using in my app to handle the tweets embedding.

        html.Div(id='output-iframe-share', className='six columns', style={'height':'600px',  'overflowY':'auto', 'paddingRight':'36px'}),
        html.Div(id='output-iframe-rt', className='six columns', style={'height':'600px',  'overflowY':'auto', 'paddingLeft':'36px'})
    ], className='row-m', style={'textAlign':'center', 'marginBottom':'72px'}),
def resume_tweets(df, type='share'):

    list_twt = []

    for i in list(range(30)):

        user = df['id_user'].to_list()[i]
        tweet = int(df['tweet_id'].to_list()[i])
        is_rt = df['is_RT'].to_list()[i]
        link = df['retweeted_url'].to_list()[i]

        if link == None:
            link = df['quote_url'].to_list()[i]

        if link == None:
            link = "https://twitter.com/{user}/status/{tweet}"

        if type == 'share':
            text = f"#{i+1} Most Shared - Total Shares: {df['count'].to_list()[i]}"
            text = f"#{i+1} Most Retweeted - Total Shares: {df['count'].to_list()[i]}"

        list_twt.append(html.Div([#html.P(f"{i+1} is RT ({is_rt}) - TEXT {df_princ['text'].to_list()[i]}"),
                                    html.P([text # | Link: {link}"
                                            ], style={'textAlign':'center', 'fontWeight':'bold', 'fontSize':'18px'}),
                                                    #    'minHeight':'275px',
                                                    #    'maxHeight':'700px', 
                                                       'border':'0', 'conversation':'None',
                                    ], style={'margin':'24px 0'}
    return list_twt

@app.callback([Output('output-iframe-share', 'children'),
               Output('output-iframe-rt', 'children')],
              [Input('df-sharing', 'children'), 
               Input('graph-update', 'n_intervals')])    
def _update_div1(df, n_val):

    if ((n_val % 6 != 0 ) and (n_val >= 16)):
        raise PreventUpdate

    df_ = pd.read_json(df, orient='split')
    shared_tweets_list = []
    rt_tweets_list = []
    cols = ['text', 'id_user', 'tweet_id', 
            'is_RT', 'retweet_user', 
            'quote_url', 'retweeted_url', 'count']

    df_['count'] = df_.groupby(["text"])["tweet_id"].transform("count")
    df_princ = df_.drop_duplicates('text', keep='first').sort_values('count', ascending=False)[cols]
    df_princ1 = df_.drop_duplicates('text', keep='last').sort_values('retweet_shares', ascending=False)[cols].rename(columns={'retweet_shares':"# RT's"})

    shared_tweets_list = resume_tweets(df_princ)
    rt_tweets_list = resume_tweets(df_princ1, type='rt')

    return [shared_tweets_list, rt_tweets_list]

I read that it was the only way to work and as I had no other reference, so I tried it.

I really don’t know what to do.

If you want to see the problem in a live app, we can access:

It’s happening in the second part of the app.

Anyway, thank you very much for your attention and I hope that someone can give me a path to solve it!!!


I solved it, Chris, it’s now rendering the Tweets in the correct way.