• Sign in to Neowin Faster!

    Create an account on Neowin to contribute and support the site.

  • 0
Sign in to follow this  

Editing Twitter Widget

Question

iamopaque    0

I'm using twitter's profile widget on my site and I've pin pointed the location where I want to make the changes, but I'm having trouble figuring out the issue with the javascript.

Here is the website link http://www.haas.berkeley.edu/haas/about/dean/about.html

Here is the widget link http://widgets.twimg.com/j/2/widget.js

1st I want to make it so that the name only appears once instead of twice

function l() {
if (k._isProfileWidget) {
return '<img alt="profile" class="twtr-profile-img" src="' + b + '"> <h3></h3> <h4></h4>'
} else {
return "<h3>" + k.title + "</h3><h4>" + k.subject + "</h4>"
}
}

Somehow <h3> and <h4> are being filled in by some function and when I remove <h3> then the widget no longer appears.

2nd I am trying to rearrange the location of Join Conversation and the profile picture, but I'm having trouble rearranging this section of code.

    var h = '&lt;div class="twtr-doc' + i() + '" style="width: ' + this.wh[0] + ';"&gt;            &lt;div class="twtr-hd"&gt;' + l() + '               &lt;div class="twtr-spinner twtr-inactive"&gt;&lt;/div&gt;            &lt;/div&gt;            &lt;div class="twtr-bd"&gt;              &lt;div class="twtr-timeline" style="height: ' + this.wh[1] + ';"&gt;                &lt;div class="twtr-tweets"&gt;                  &lt;div class="twtr-reference-tweet"&gt;&lt;/div&gt;                  &lt;!-- tweets show here --&gt;                &lt;/div&gt;              &lt;/div&gt;            &lt;/div&gt;            &lt;div class="twtr-ft"&gt;              &lt;div&gt;&lt;a target="_blank" href="http://twitter.com"&gt;&lt;img alt="" src="http://widgets.twimg.com/j/1/twitter_logo_s.' + (Z.ie ? "gif" : "png") + '"' + j() + '&gt;&lt;/a&gt;                &lt;span&gt;&lt;a target="_blank" class="twtr-join-conv" style="color:' + this.theme.shell.color + '" href="http://twitter.com/' + this._getWidgetPath() + '"&gt;' + this.footerText + "&lt;/a&gt;&lt;/span&gt;              &lt;/div&gt;            &lt;/div&gt;          &lt;/div&gt;";
                    return h

Is anyone familiar with editing the twitter widget and could help? I've been stuck on this for over 5 hours and nothing seems to work. Thanks!

Share this post


Link to post
Share on other sites

9 answers to this question

Recommended Posts

  • 0
Plarkster    6

I'm not familiar with the widget, but your name isn't being shown twice - your name is displayed with your twitter username underneath. It might look better if you change your name on twitter to Rich Lyons so then it won't look like it's showing the same thing twice.

To move the join conversation link you could try moving the following code:

<span><a target="_blank" class="twtr-join-conv" style="color:' + this.theme.shell.color + '" href="http://twitter.com/' + this._getWidgetPath() + '">' + this.footerText + "</a></span>

or move the whole div:

<div class="twtr-ft"> <div><a target="_blank" href="http://twitter.com"><img alt="" src="http://widgets.twimg.com/j/1/twitter_logo_s.' + (Z.ie ? "gif" : "png") + '"' + j() + '></a> <span><a target="_blank" class="twtr-join-conv" style="color:' + this.theme.shell.color + '" href="http://twitter.com/' + this._getWidgetPath() + '">' + this.footerText + "</a></span> </div> </div>

Like I said, I'm not familiar with the widget but hopefully that might help or get you on the right track. Maybe somebody with more experience will lend a hand...

Share this post


Link to post
Share on other sites
  • 0
Pajter    16

I just edited a Twitter widget last week. I used CSS only to hide various elements of the widget. Also changing colors worked best with CSS.

Afterwards I just added some stuff again. For instance: I wanted to change the position of the Twitter logo, so I hid the original (display:none) and put a new one on top of it.

It might be a bit weird to do it that way, but it works like a charm for me. :)

Share this post


Link to post
Share on other sites
  • 0
klous    0

Pajter;

Any chance of some details on your CSS for these mods? removing the twitter logo, and the Join Conversation link for instance? I'm not very good at all this and would appreciate your help.

Thanks!

Share this post


Link to post
Share on other sites
  • 0
Pajter    16

I'll see if I can dig the old code up for you. I ended up using a different method to display my Twitter feed, for performance reasons. You can see the result on http://www.stroave.com.

I'll get back to this topic asap. I'm not near my own computer right now.

Share this post


Link to post
Share on other sites
  • 0
klous    0

Thanks Pajter...when you're ready that would be superb!

Thanks Pajter...when you're ready that would be superb!

Share this post


Link to post
Share on other sites
  • 0
Pajter    16

Oh crap, totally forgot about this topic! Sorry!

Send me a PM if anyone's still interested. :)

Share this post


Link to post
Share on other sites
  • 0
orangejuice    0

Hi, I would love to know if the OP resolved this. I am working within a very restrictive CMS and can't edit the header. Would be perfect to know if I can edit the JS to hide the username (h4).

Please do let me know... would be much appreciated!

Share this post


Link to post
Share on other sites
  • 0
Zinthos    0

I am PMing you Pajter I would also like to know how to take out the join convo and twitter logo :)

Share this post


Link to post
Share on other sites
  • 0
Caleb W    0

Hi guys ? I found this tip on Twitter's GetSatisfaction page just tonight, so I feel okay about getting the header/footer removed with the following CSS. In order to remove the header and/or footer from the official Twitter Profile Widget, add the

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

I am not sure, yet, how to simply replace the logo down at the bottom (ours needs to be a different color), but I'd love to know! The hint I have for tonight is,

"?I hid the original (display:none) and put a new one on top of it."
from March 7, 2010.

Would love any insight if any is there :)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.