Twitter Embed Code and resizing

[Sue Busher]

Hi

We have recently launched our new website on Frog Learn - www,kennetschool.co.uk and I have the Twitter embed code on our main home page using this code:

<script type="text/javascript">
    if (typeof twttr ==="undefined") {
    // <![CDATA[
        !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>

<a class="twitter-timeline" data-height="550" data-dnt="true" href="https://twitter.com/KennetSchool" data-widget-id="431011823488204800">Tweets by @KennetSchool</a>
<script>if (typeof twttr != "undefined") twttr.widgets.load();</script>

 

I would like to amend it somehow to ensure that the Twitter information fills the entire width of the module in which it is places (which also works for tablet, mobile as well as desktop. 

Does anyone know if this is possible? If so, what would I need to change.? Thanks so much in advance for any help.

[adamw]

Try adding: 

 

data-width="100%"

to the a tag. Something like this:

 

<script type="text/javascript">
    if (typeof twttr ==="undefined") {
    // <![CDATA[
        !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>

<a class="twitter-timeline" data-height="550" data-width="100%" data-dnt="true" href="https://twitter.com/KennetSchool" data-widget-id="431011823488204800">Tweets by @KennetSchool</a>
<script>if (typeof twttr != "undefined") twttr.widgets.load();</script>

 

[pconkie]

If you want maximum customization wrap your twitter-timeline in another div and delegate events to it.  Like this for the set-up:

<script type="text/javascript">
  if (typeof twttr === "undefined") {
    <![CDATA[
      !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>


<div class="twitter-block">
  <a class="twitter-timeline" data-dnt="true" data-theme="light" data-link-color="#002070" href="https://twitter.com/Backwell_School?ref_src=twsrc%5Etfw">Tweets by Backwell_School</a>
</div>

<script>if (typeof twttr != "undefined") twttr.widgets.load();</script>

 Then add the following below to catch changes to the twitter feed...

<script>
  jQuery('.twitter-block').delegate('.twitter-timeline','DOMSubtreeModified propertychange', function() {
    //function call to override the base twitter styles
    customizeTweetMedia();
  });

  //also call the function on dynamic updates in addition to page load
  jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-TweetList').bind('DOMSubtreeModified propertychange', function() {
    customizeTweetMedia(this);
  });
  }
</script>

Finally in the same script block as above the actual customize function which you can change to suite your needs...

var customizeTweetMedia = function() {

  jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-Header').remove();
  jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-Tweet-media').css('margin-left', '0px');
  jQuery('.twitter-block').find('.twitter-timeline').contents().find('img.Avatar').css('display', 'none');
  jQuery('.twitter-block').find('.twitter-timeline').contents().find('span.TweetAuthor-avatar.Identity-avatar').remove();
  jQuery('.twitter-block').find('.twitter-timeline').contents().find('span.TweetAuthor-screenName').css('font-size', '16px');
  jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-Tweet-text').css('font-size', '16px');
  jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-Tweet-text').css('margin-left', '0px');
  jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-Tweet-author').remove();
  jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-Tweet-text').css('font-family', 'Open Sans, sans-serif');
  jQuery('.twitter-block').find('.twitter-timeline').contents().find('.Icon--twitter').remove();

}

 

 

The whole thing for easy copy and paste:

 

<script type="text/javascript">
  if (typeof twttr === "undefined") {
     <![CDATA[
    !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>

<div class="twitter-block">
  <a class="twitter-timeline" data-dnt="true" data-theme="light" data-link-color="#002070" href="https://twitter.com/Backwell_School?ref_src=twsrc%5Etfw">Tweets by Backwell_School</a>
</div>

<script>
  if (typeof twttr != "undefined") twttr.widgets.load();

  jQuery('.twitter-block').delegate('.twitter-timeline','DOMSubtreeModified propertychange', function() {
    //function call to override the base twitter styles
    customizeTweetMedia();
  });

  var customizeTweetMedia = function() {

    jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-Header').remove();
    jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-Tweet-media').css('margin-left', '0px');
    jQuery('.twitter-block').find('.twitter-timeline').contents().find('img.Avatar').css('display', 'none');
    jQuery('.twitter-block').find('.twitter-timeline').contents().find('span.TweetAuthor-avatar.Identity-avatar').remove();
    jQuery('.twitter-block').find('.twitter-timeline').contents().find('span.TweetAuthor-screenName').css('font-size', '16px');
    jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-Tweet-text').css('font-size', '16px');
    jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-Tweet-text').css('margin-left', '0px');
    jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-Tweet-author').remove();
    jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-Tweet-text').css('font-family', 'Open Sans, sans-serif');
    jQuery('.twitter-block').find('.twitter-timeline').contents().find('.Icon--twitter').remove();

    //also call the function on dynamic updates in addition to page load
    jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-TweetList').bind('DOMSubtreeModified propertychange', function() {
      customizeTweetMedia(this);
    });
  }
</script>