How to customize the default html output of javascript of default twitter widget?
In the default widget I want to remove Header and footer from output source (**not from using display:none in css)** (**green crossed)** of this, just want to keep the tweet area.
This is default twitter code.
<script src=".js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 1,
interval: 6000,
width: 'auto',
height: 300,
theme: {
shell: {
background: '#333333',
color: '#ffffff'
},
tweets: {
background: 'transparent',
color: '#ffffff',
links: '#4aed05'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: false,
timestamp: false,
avatars: false,
behavior: 'all'
}
}).render().setUser('tutsplus').start();
</script>
And this is the output of default code
<div id="twtr-widget-1" class="twtr-widget twtr-widget-profile">
<div style="width: 100%;" class="twtr-doc">
<div class="twtr-hd">
<a class="twtr-profile-img-anchor" href="" target="_blank">
<img src=".jpg" class="twtr-profile-img" alt="profile"></a>
<h3>
Tuts+</h3>
<h4>
<a href="" target="_blank">tutsplus</a></h4>
</div>
<div class="twtr-bd">
<div style="height: auto;" class="twtr-timeline">
<div class="twtr-tweets">
<div class="twtr-reference-tweet">
</div>
<div id="tweet-id-1" class="twtr-tweet">
<div class="twtr-tweet-wrap">
<div class="twtr-avatar">
<div class="twtr-img">
<a href="" target="_blank">
<img src=".jpg" alt="tutsplus profile"></a></div>
</div>
<div class="twtr-tweet-text">
<p>
<a class="twtr-user" href="" target="_blank">tutsplus</a> If you like Rockable books, consider following Rockable on Twitter (@<a href="" class="twtr-atreply" target="_blank">rockablepress</a>) or Facebook (<a href="" target="_blank" class="twtr-hyperlink">/...</a>) <em><a href="" time="Thu Feb 17 22:45:25 +0000 2011" class="twtr-timestamp" target="_blank">2 days ago</a> · <a href="/?status=@tutsplus%20&in_reply_to_status_id=38368449310760960&in_reply_to=tutsplus" class="twtr-reply" target="_blank">reply</a> </em>
</p>
</div>
</div>
</div>
<!-- tweets show here -->
</div>
</div>
</div>
<div class="twtr-ft">
<div>
<a href="" target="_blank">
<img src=".png" alt=""></a> <span><a href="" style="color: rgb(255, 255, 255);" class="twtr-join-conv" target="_blank">Join the conversation</a></span>
</div>
</div>
</div>
</div>
And I want to get this part only as a output in source from the above default source.
<div class="twtr-tweet-text">
<p>
<a class="twtr-user" href="" target="_blank">tutsplus</a> If you like Rockable books, consider following Rockable on Twitter (@<a href="" class="twtr-atreply" target="_blank">rockablepress</a>) or Facebook (<a href="" target="_blank" class="twtr-hyperlink">/...</a>) <em><a href="" time="Thu Feb 17 22:45:25 +0000 2011" class="twtr-timestamp" target="_blank">2 days ago</a> · <a href="/?status=@tutsplus%20&in_reply_to_status_id=38368449310760960&in_reply_to=tutsplus" class="twtr-reply" target="_blank">reply</a> </em>
</p>
</div>
JsFiddle example link of this /
How to customize the default html output of javascript of default twitter widget?
http://twitter./about/resources/widgets/widget_profile
In the default widget I want to remove Header and footer from output source (**not from using display:none in css)** (**green crossed)** of this, just want to keep the tweet area.
This is default twitter code.
<script src="http://widgets.twimg./j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 1,
interval: 6000,
width: 'auto',
height: 300,
theme: {
shell: {
background: '#333333',
color: '#ffffff'
},
tweets: {
background: 'transparent',
color: '#ffffff',
links: '#4aed05'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: false,
timestamp: false,
avatars: false,
behavior: 'all'
}
}).render().setUser('tutsplus').start();
</script>
And this is the output of default code
<div id="twtr-widget-1" class="twtr-widget twtr-widget-profile">
<div style="width: 100%;" class="twtr-doc">
<div class="twtr-hd">
<a class="twtr-profile-img-anchor" href="http://twitter./tutsplus" target="_blank">
<img src="http://a2.twimg./profile_images/63581538/tutsplus_normal.jpg" class="twtr-profile-img" alt="profile"></a>
<h3>
Tuts+</h3>
<h4>
<a href="http://twitter./tutsplus" target="_blank">tutsplus</a></h4>
</div>
<div class="twtr-bd">
<div style="height: auto;" class="twtr-timeline">
<div class="twtr-tweets">
<div class="twtr-reference-tweet">
</div>
<div id="tweet-id-1" class="twtr-tweet">
<div class="twtr-tweet-wrap">
<div class="twtr-avatar">
<div class="twtr-img">
<a href="http://twitter./tutsplus" target="_blank">
<img src="http://a2.twimg./profile_images/63581538/tutsplus_normal.jpg" alt="tutsplus profile"></a></div>
</div>
<div class="twtr-tweet-text">
<p>
<a class="twtr-user" href="http://twitter./tutsplus" target="_blank">tutsplus</a> If you like Rockable books, consider following Rockable on Twitter (@<a href="http://twitter./rockablepress" class="twtr-atreply" target="_blank">rockablepress</a>) or Facebook (<a href="http://www.facebook./rockablepress" target="_blank" class="twtr-hyperlink">http://www.facebook./...</a>) <em><a href="http://twitter./tutsplus/status/38368449310760960" time="Thu Feb 17 22:45:25 +0000 2011" class="twtr-timestamp" target="_blank">2 days ago</a> · <a href="http://twitter./?status=@tutsplus%20&in_reply_to_status_id=38368449310760960&in_reply_to=tutsplus" class="twtr-reply" target="_blank">reply</a> </em>
</p>
</div>
</div>
</div>
<!-- tweets show here -->
</div>
</div>
</div>
<div class="twtr-ft">
<div>
<a href="http://twitter." target="_blank">
<img src="http://widgets.twimg./i/widget-logo.png" alt=""></a> <span><a href="http://twitter./tutsplus" style="color: rgb(255, 255, 255);" class="twtr-join-conv" target="_blank">Join the conversation</a></span>
</div>
</div>
</div>
</div>
And I want to get this part only as a output in source from the above default source.
<div class="twtr-tweet-text">
<p>
<a class="twtr-user" href="http://twitter./tutsplus" target="_blank">tutsplus</a> If you like Rockable books, consider following Rockable on Twitter (@<a href="http://twitter./rockablepress" class="twtr-atreply" target="_blank">rockablepress</a>) or Facebook (<a href="http://www.facebook./rockablepress" target="_blank" class="twtr-hyperlink">http://www.facebook./...</a>) <em><a href="http://twitter./tutsplus/status/38368449310760960" time="Thu Feb 17 22:45:25 +0000 2011" class="twtr-timestamp" target="_blank">2 days ago</a> · <a href="http://twitter./?status=@tutsplus%20&in_reply_to_status_id=38368449310760960&in_reply_to=tutsplus" class="twtr-reply" target="_blank">reply</a> </em>
</p>
</div>
JsFiddle example link of this http://jsfiddle/ZUVzd/
Share Improve this question asked Feb 20, 2011 at 5:26 Jitendra VyasJitendra Vyas 153k240 gold badges586 silver badges867 bronze badges3 Answers
Reset to default 3To remove header and footer from the widget you can simply add css:
.twtr-hd, .twtr-ft { display: none; }
The widget they provide is meant to be dropped in. It's not really intended for heavy customization beyond the few options they give you. You're better off just building this yourself than fighting it. Here's a jQuery plugin for it. It sounds like you probably want what the first demo is doing, though there are plenty of options for it.
If you prefer Prototype, mootools, or whatever, some rudimentary searching should turn up equivalents.
I think that you are going to have to edit the .js file and host the edited one on your own server.
"For full documented source see http://twitter./javascripts/widgets/widget.js"
Grab that and edit this section.
var html = '<div class="twtr-doc' + isFull() + '" style="width: ' + this.wh[0] + ';">\
<div class="twtr-hd">' + getHeader() + ' \
</div>\
<div class="twtr-bd">\
<div class="twtr-timeline" style="height: ' + this.wh[1] + ';">\
<div class="twtr-tweets">\
<div class="twtr-reference-tweet"></div>\
<!-- tweets show here -->\
</div>\
</div>\
</div>\
<div class="twtr-ft">\
<div><a target="_blank" href="http://twitter."><img alt="" src="' + logo + '"></a>\
<span><a target="_blank" class="twtr-join-conv" style="color:' + this.theme.shell.color + '" href="http://twitter./' + this._getWidgetPath() + '">' + this.footerText + '</a></span>\
</div>\
</div>\
</div>';
I did this to remove the footer and it works fine for me.