Jump to content
Sign in to follow this  
Sue Busher

Twitter Embed Code and resizing

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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>

 

  • Thanks 1

Share this post


Link to post
Share on other sites

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>

 

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...