Twitframe (iFrame element) - height adjustable

Dash Python
1

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

2

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

3

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([
        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]
        else: 
            pass

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

        if type == 'share':
            text = f"#{i+1} Most Shared - Total Shares: {df['count'].to_list()[i]}"
        else: 
            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'}),
                                    html.Iframe(src=f"https://twitframe.com/show?url={link}", 
                                                id='tweet_', 
                                                style={'width':'550px',
                                                      'position':'relative',
                                                    #    'minHeight':'275px',
                                                    #    'maxHeight':'700px', 
                                                       'border':'0', 'conversation':'None',
                                                       'frameborder':'0',
                                                       'theme':'dark'
                                    })
                                    ], 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
    else:
        pass

    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:
https://bbb-twitter-monitor.herokuapp.com/

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!!!

Best,

4

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