Twitter Widget Auto Expand Photo Fix

blog

Hello Everyone,

I hope this post will find you well especially if you’re a developer. Twitter recently made changes to their timeline widget that went into effect March 3rd of this year.


What changed?

Webmasters and Web Devs around the world woke up to their footers expanding or where the widget was placed on their websites. This caused disfigurement of the website design and many frustrated people.

Twitter said that this is, “part of their approach to being more about media as well text.” When asked on their dev forums about a fix, they seemed hesitant about an “off switch.

I will show you how to fix the issue.


How do I fix this problem?

After much research, we discovered a fix by Serathium/Richard Harris. We followed his instructions as well added some of our own illustration about the widget id. We no longer have photos displaying in our timeline as seen in our footer below.

  • First, you must wrap your twitter widget in a <div> container. Name the container,“Twitter-Block”.

Your widget should look similar to this:

<div class="twitter-block">
<a class="twitter-timeline" data-dnt="true" href="https://twitter.com/YourBrand"data-widget-id="Insert your Data ID" data-chrome="nofooter noborders noheader 
noscrollbar transparent" data-tweet-limit="2"></a>
<script>Your Unique widget Script</script>
</div>
  • Now you need to add this jQuery code in your footer or in a jQuery(document).ready();

The code you will add is:

<script>
   jQuery('.twitter-block').on('DOMSubtreeModified propertychange',"#twitter-widget-0", function() {
        jQuery(".twitter-timeline").contents().find(".timeline-Tweet-media").css("display", "none");
        jQuery(".twitter-block").css("height", "100%");
    });
	</script>

Now go to your widget as it displays on your website:

  • right click in Chrome and select,”Inspect
  • Look at the source code to the left and scroll up until you see the name of,“twitter-widget-0” or “twitter-widget-1” etc.
  • Make sure the widget number matches the widget number in the jQuery code above.

If you did all of this correctly then your widget will no longer display photos. That is it!


I hope this helps!

At your service,
Jason


Jason Randle
Jason Randle enjoys time with his family, voiceover, gaming, coding, domain names, and general web development.