Customize twitter embed widget

[OneT0uch]

Hello,

Is it possible to display for example two tweets on the same line with the twitter widget embed ?

(Schema )

TWEET 1 TWEET 2

TWEET 3 TWEET 4

[niall]

You should be able to display an embedded Tweet in a grid layout and have the Tweet adjust to the available width of the containing element. Have you experienced issues displaying an embedded Tweet inside a grid column?

[OneT0uch]

Hello,

The only solution i have found is javascript.

I display all the tweet 2per2 with an hidden scrollbar.I have add display inline-block to li
Then when you click on the 'load more" button i have add onclick to execute again the script.

http://esportstream.net/web-tv/streams/faceittv You can see it here

I should work on responsive now.

Thank’s for your answer.

[niall]

An example of a two column layout with one embedded Tweet per column using the Bootstrap grid framework:

JS Bin

[OneT0uch]

Thank’s for your link but i think you don’t understand.

Actually i use timeline widget in order to have all tweet from one people in a list.

This one for example :

<a class="twitter-timeline" href="https://twitter.com/OneT0uch" data-widget-id="569044950940393472">Tweets de @OneT0uch</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>

It’s not embed of one tweet but embed of all my tweet.

And the solution i have found it’s to use javascript in order to add rules to the iframe.(Take a look at the link i give you above).

Is it possible to do it another ways ? or it’s the better solution.

[niall]

A Twitter embedded Timeline is currently a single column view of Tweets.

[OneT0uch]

Okay,so i will keep my javascript solution.

Here it is :

     <script>
                 function f1()
        {
       
           hideTwitterBoxElements ();
        } 
            
              if (window.matchMedia("(min-width: 600px)").matches) { 
               var hideTwitterAttempts = 0;
function hideTwitterBoxElements() {
    setTimeout( function fun() {
        if ( $('[id*=twitter]').length ) {
        $('[id*=twitter]').each( function(){
            if ( $(this).width() == 220 ) {
                $(this).width( 198 ); //override min-width of 220px
            }
            var ibody = $(this).contents().find( 'body' );
         ibody.width( $(this).width() + 20 ); //remove scrollbar by adding width

            if ( ibody.find( '.timeline .stream .h-feed li.tweet' ).length ) {
            ibody.find( '.timeline' ).css( 'border', 0 );

                
            ibody.find( '.timeline .stream' ).css( 'overflow-x', 'hidden' );
            ibody.find( '.timeline .stream' ).css( 'overflow-y', 'scroll' );
            ibody.find( '.p-author .profile .p-name' ).css( 'color', 'rgb(23, 57, 105)' );
          ibody.find( '.tweet' ).css( 'display', 'inline-block' );
            ibody.find( '.h-feed li' ).css( 'width', '500px' );
                    ibody.find( '.h-feed li' ).css( 'display', 'inline-block' )
                      ibody.find( '.h-feed li' ).css( 'vertical-align', 'top' )
                 ibody.find( '.tweet-actions' ).hide();
                 ibody.find( '.inline-media' ).hide();
                    ibody.find( '.timeline' ).css( 'overflow', 'hidden' );
         
            ibody.find( '.timeline-header').hide();
            ibody.find( '.timeline-footer').hide();
           
                 ibody.find( 'button.load-more').attr('onclick','parent.f1()');
            }
            else {
                $(this).hide();
            }
        });
        }
        hideTwitterAttempts++;
        if ( hideTwitterAttempts < 3 ) {
            hideTwitterBoxElements();
        }
    }, 1500);
}


hideTwitterBoxElements();}
                   
       
            </script>

vertical-align : top and display : inline-block are the most important

[benward]

Although you can do this, please remember that we don’t support manipulating the HTML within the frame sandbox. The content of a timeline and mark-up for a Tweet may change without notice and we don’t guarantee that there will always be ways to maintain these hacks.

Thanks,

Ben

[OneT0uch]

Thank’s for your answer Benward.

I hope this features will be add in next update ? It will be a good thing.

And i don’t recommend javascript solution but actually this is the only way to do it.

[niall]