CODEWITHSUNDEEP
javascripthtmlcsstwitter
Justmac
Justmac

Reputation: 550

How to get logo out of twitter widget

I am using the Twitter widget from Twitter itself. You can download it at http://twitter.com/about/resources/widgets/widget_profile

Now i get this code:

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 6000,
  width: 180,
  height: 320,
  theme: {
    shell: {
      background: '#6e6e6e',
      color: '#ffffff'
    },
    tweets: {
      background: '#fefefe',
      color: '#545454',
      links: '#b05c5c'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    hashtags: true,
    timestamp: true,
    avatars: false,
    behavior: 'all'
  }
}).render().setUser('SchmidtGlobal').start();
</script>

When I embed this in my website I get my logo at the top left side. Is there any possibility to get this out?

It's refereing to this script: http://widgets.twimg.com/j/2/widget.js

Any help would be appreciated.

Thanks

Upvotes: 3

Views: 11446

Answers (3)

Ahmed
Ahmed

Reputation: 11

find twtr-hd in the script, add

style="display:none"

find twtr-ft in the script, add

style="display:none"

this should do it.

inspired by the Queen of Nerds' solution

Upvotes: 1

Queen of the Nerds
Queen of the Nerds

Reputation: 91

The easiest way would be to use CSS. Create a CSS document and link it to your web page. In the css paste:

.twtr-hd, .twtr-ft{display: none;}

This will remove the header and footer. Hope this helps!

Upvotes: 9

Marcel Korpel
Marcel Korpel

Reputation: 21763

In the full source the location of the logo is defined here:

var logo = isHttps ? 'https://twitter-widgets.s3.amazonaws.com/i/widget-logo.png' : 'http://widgets.twimg.com/i/widget-logo.png';

and embedded in HTML here:

<a target="_blank" href="http://twitter.com"><img alt="" src="' + logo + '"></a>

So you should just drop that part and you're done.

That said, I wonder if this isn't against the license agreement.

UPDATE: Above method indeed removes the Twitter logo, as the OP suspected, but it is not that difficult to remove the profile image. A look at the resulting widget (using 'Test Settings') shows me that the image's markup is

<a class="twtr-profile-img-anchor" href="http://twitter.com/***" target="_blank">
    <img src="http://a1.twimg.com/profile_images/***/***.jpg" class="twtr-profile-img" alt="profile">
</a>

so it's just a matter of finding code that sets class twtr-profile-img-anchor in the source code. And look, it's there:

/**
  * @public
  * @param {string}
  * sets the profile image source to display in the widget
  * @return self
  */
setProfileImage: function(url) {
  this._profileImage = url;
  this.byClass('twtr-profile-img', 'img').src = isHttps ? url.replace(httpsImageRegex, httpsImageReplace) : url;
  this.byClass('twtr-profile-img-anchor', 'a').href = 'http://twitter.com/' + this.username;
  return this;
}

I highly suspect that removing the line that calls setProfileImage will suffice:

this.setProfileImage(resp[0].user.profile_image_url);

The only thing you'll notice is that the header will now be too far to the right. You'll have to override this CSS rule:

.twtr-widget-profile h3, .twtr-widget-profile h4 {
    margin: 0 0 0 40px !important;
}

Upvotes: 6

Related Questions