Embed Twitter Feed with new API Support

Recently, Twitter has updated their API to version 1.1. So that Twitter Feeds embed with lot of sites stop working. Then I went through the New API of Twitter and came to know that new API needs Authentication to embed. As a designer, it’s hard to understand and embed it in website. So I decided to do some hack with Jquery and found a simple method from Stackoverflow. Thanks to Sebastiaan Ordelman

The Trick is to hack the Twitter iframe widget that can be embed anywhere. And add some Jquery to hide and style some elements. That’s it. We are done for now.

Heads Up!

This is only a simple trick to reproduce iframe widget and is not the correct way.

Step 1 :

Create New Twitter Widget. Link : https://twitter.com/settings/widgets and copy the Embed code.


Step 2 :

Add it in your HTML where you want to display.

<div id="TwitterBlock">
<div id="TwitterLogo"><img alt="" src="https://twitter.com/images/resources/twitter-bird-light-bgs.png" /></div>
<script type="text/javascript">// <![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 id="TwitterFooter"><a href="https://twitter.com/surjithctly" data-show-count="false" data-size="large">Follow @surjithctly</a><script type="text/javascript">// <![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>

Step 3 :

Add the below Jquery just above the closing of body tag and customize for your needs. And you’re done.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script><script type="text/javascript">// <![CDATA[
// Customize twitter feed
var hideTwitterAttempts = 0;
function hideTwitterBoxElements() {
    setTimeout( function() {
        if ( $('[id*=twitter]').length ) {
        $('[id*=twitter]').each( function(){
            if ( $(this).width() == 220 ) {
                $(this).width( 198 ); //override min-width of 220px
              //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( '.u-url').hide();
           // ibody.find( '.profile').hide();
            ibody.find( '.footer').hide();
            ibody.find( '.inline-media').hide();
            ibody.find( 'li.tweet' ).css({ 'padding' : '10px' });
            ibody.find( '.e-entry-title' ).css({ 'font-family' : 'Georgia, "Times New Roman", Times, serif', 'font-size' : '24px' , 'line-height' : '32px' ,  'text-align' : 'center', 'letter-spacing' : '-1px' , 'font-weight' : 'normal'});

            else {
        if ( hideTwitterAttempts < 3 ) {             hideTwitterBoxElements();         }     }, 1500); } $(window).load(function() { 
hideTwitterBoxElements(); });

You can also download the Full Source code or See a Live demo on left side.

8 CommentsClose Comments


  • Suzanna
    Posted June 30, 2013 at 8:50 am 0Likes

    Thanks for update and the awesome plugin!

  • Triskelion Advies
    Posted July 30, 2013 at 10:26 am 0Likes

    hi, the last part of the code doesnt work, the script doesnt close properly, how can I change it?

    // somewhere in your code after html page load hideTwitterBoxElements(); });
    // ]]>

    • web3canvas
      Posted August 6, 2013 at 4:44 am 0Likes

      Hi, you can remove the commented part from the script. i have updated the code. or you can download the source for reference

      • Triskelion Advies
        Posted August 6, 2013 at 6:44 am 0Likes

        Thanx, gonna try this and let you know

      • Triskelion Advies
        Posted August 6, 2013 at 10:01 am 0Likes

        it worked. But what makes the ticker run? I now only have 1 tweet

        • web3canvas
          Posted August 13, 2013 at 5:47 pm 0Likes

          Sorry. ticker is not available with this script.

  • Glenn Crocker
    Posted November 12, 2013 at 9:51 pm 0Likes

    I ran into trouble with $ and switched all instances to jQuery, which worked. For example: $(window).load(function() became jQuery(window).load(function() etc. for all $

Leave a comment