I'm using the twitter profile widget on my website.I changed the settings as i want,got the code from twitter site. https://twitter.com/about/resources/widgets/widget_profile
The problem with this widget is ,each time it want me to refresh the page to see the tweets.
I want to load the tweets with out refreshing the page. Is there any way,i implement this on my widget.
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 30000,
width: 250,
height: 300,
theme: {
shell: {
background: '#333333',
color: '#ffffff'
},
tweets: {
background: '#000000',
color: '#ffffff',
links: '#4aed05'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
behavior: 'all'
}
}).render().setUser('twitter').start();
</script>
Thanks in advance!
You can force this widget to load new tweets with live parameter set to true. Change it in your script or grab a new one at https://twitter.com/about/resources/widgets/widget_profile and make sure you check Poll for new results? in settings tab.
Related
I have used pie chart in Highcharts and I have a strange issue with chrome browser. I am using it with rails and when the load the link for the first time everything looks fine.(find the image below)
When I navigate other menu and come back to Dashboard, the chart exceed the actual container which is in bootstrap column
<div class="row">
<div class="col-lg-6">
...
</div>
<div class="col-lg-6" id="chart_issues_count">
</div>
</div>
Highcharts code
$('#chart_issues_count').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Issues',
align: 'center',
verticalAlign: 'middle',
y: 5
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
dataLabels: {
enabled: true,
distance: -50,
style: {
display:'none',
fontWeight: 'bold',
color: 'white',
textShadow: '0px 1px 2px black'
}
},
size: 300,
startAngle: 0,
endAngle: 360,
center: ['50%', '50%']
}
},
series: [{
type: 'pie',
name: 'Issues',
innerSize: '70%',
data: [
['Open', open],
['In - Process', process],
['Solved', solved],
['Closed', closed],
['Re - Open', reopen]
]
}]
});
This happens only with chrome.I have tested with firefox, IE, Safari and in all the three browsers it works fine.
Is there any workaround for chrome?
Also I have tried with reflow as below and its not working
$(window).load(function(){
$('#chart_issues_count').highcharts().reflow();
});
edit
Chrome Version 51.0.2704.106 m
update
I noticed that styles are being applied only after the page loads. As a result it flashes content without styles for a moment and then the styles are applied. Is it a behaviour of rails?( I am pretty new to Ruby on Rails) It never happened with PHP which I am familiar with.
Finally I found the solution. I was using bootstrap CDN link and rails seems to load the CDN Link after $(document).ready(); ( I am not sure of it). I load the highchart in ready method where it takes 100% width of the column where the chart is being loaded(before bootstrap applies).
I installed the bootstrap gem and now everything working fine as expected.
https://github.com/twbs/bootstrap-sass
I should have better learning in rails structure and its working.
When you add the Twitter Search Widget to your website, you see that the widget starts with only 1 tweet right after the page is loaded.
Is it possible to get the widget populated with more tweets on pageload?
It also seems that the interval can't be lowered due it's '30000' microseconds minimum. I tried to lower the interval in the code but it doesn't work. Is it possible to create a workaround for that?
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'search',
search: '#myhash',
interval: 5000,
title: '',
subject: '',
width: 'auto',
height: 294,
theme: {
shell: {
background: '#ffffff',
color: '#000000'
},
tweets: {
background: '#ffffff',
color: '#444444',
links: '#1985b5'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
behavior: 'default'
}
}).render().start();
</script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 3,
interval: 30000,
width: 240,
height: 300,
features: {
hashtags: false,
timestamp: false,
avatars: false,
scrollbar: false,
loop: false,
live: false,
behavior: 'all'
}
}).render().setUser('USERNAME&exclude_replies=true').start();
</script>
rpp being the number of tweets to show: Change the number to what ever you like. Also - I added &exclude_replies=true to turn off replies in my feed.
I can only seem to get the twitter search widget to display the most recent three tweets. Can this be extended? How far back in time does the widget retrieve information?
It's strange that there are only three tweets showing, because the default is 30 in the widget as I know, except if there are only three tweets related to the search term!
However, you can add whatever optional properties you want to the widget, see all with details here. For going back in time I think since_id and until are going to interest you.
If you want to determine the number of tweets to show, you should use the rpp property, which can have a max value 0f 100, this is an example:
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'search',
search: 'rainbow',
interval: 30000,
rpp: 50, // WE ARE HERE IN THE VERY BODY OF THE OBJECT!
title: 'It\'s a double rainbow',
subject: 'Across the sky',
width: 250,
height: 300,
theme: {
shell: {
background: '#8ec1da',
color: '#ffffff'
},
tweets: {
background: '#ffffff',
color: '#444444',
links: '#1985b5'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
behavior: 'default'
}
}).render().start();
</script>
Hope that's useful!
I am trying to add an option to a profile page for twitter widget and I have a field where users can add their twitter accounts and below it shows a preview of the widget. It works fine if I enter an account and click save and come back. But what I am trying to do is make it dynamic, to refresh the widget with corresponding account when blur event occurs on the text-field.
I have the following code:
var twitterWidget = new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 'auto',
height: 300,
theme: {
shell: {
background: '#cccccc',
color: '#333333'
},
tweets: {
background: '#ffffff',
color: '#333333',
links: '#0099cc'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: true,
behavior: 'all'
}
});
twitterWidget.setUser(twitterUser).render().start();
$('#twitter_widget_id').change(function(){
twitterWidget.setUser($(this).val()).render().start();
});
In this case it works wrong: it shows only the newest tweets from all the accounts that I entered and in general I'm getting an empty widget.
If I delete the object and create a new one it makes the page blank and then adds the widget.
Does anyone know some public methods for the TWTR.Widget() like re-render() or something like that?
Thanks.
The documented Twitter widget source code is available at http://twitter.com/javascripts/widgets/widget.js and reading through it will tell you everything you need to know about how to manipulate its behavior. Briefly, the widget works like this:
When the widget is first created with new TWTR.Widget it calls .init() and takes note of where it's embedded in the page, inserting the widget HTML code into the DOM at that position. (It always assumes you're embedding, which is why if you create a new widget in a head script or in the context of the window it will end up embedding itself in the root of the window.)
But, you can still create the widget using a function (as long as it's called from the embedded script) and then hold onto a reference to the widget for later. When you call .render() later the widget just re-renders itself wherever it happens to be.
There are some pseudo-private methods on the TWTR object that you might try for fun, such as _getWidgetHtml() - which is called by .render() but you shouldn't need to use those.
I just wrote the following code, and it works well for me. Call this function from your embedded script (as shown), then call it again later with a new search parameter to re-render it.
<div id="my_widget_region">
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>do_twitter_widget('"#winning" or "justin bieber"');</script>
</div>
function do_twitter_widget(search_query, title, subtitle) {
if (!window.widgetRef) {
window.widgetRef = new TWTR.Widget({
version: 2,
type: 'search',
search: search_query,
interval: 6000,
title: title || 'Tweets related to',
subject: subtitle || search_query,
width: 'auto',
height: 500,
theme: {
shell: {
background: '#8EC1DA',
color: '#FFFFFF'
},
tweets: {
background: '#FFFFFF',
color: '#444444',
links: '#1985B5'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
behavior: 'default'
},
ready: function() {
// when done rendering...
}
});
window.widgetRef
.render()
.start();
}
else {
if (search_query != window.old_twitter_search) {
window.widgetRef
.stop()
.setSearch(search_query)
.setTitle(title || 'Tweets related to')
.setCaption(subtitle || search_query)
.render()
.start();
}
}
window.old_twitter_search = search_query;
return window.widgetRef;
}
You can just reload the widget by create a new instance using "id" params as html id of the the widget element.
Exemple below. (Works fine for me)
window.twitterCreateOrUpdateProfile = function (username) {
var opts = {
version: 2,
type: 'profile',
rpp: 4,
interval: 30000,
width: 298,
height: 320,
theme: {
shell: {
background: '#86b9d1',
color: '#ffffff'
},
tweets: {
background: '#ffffff',
color: '#444444',
links: '#0b0d0d'
}
},
features: {
scrollbar: true,
loop: false,
live: false,
behavior: 'all'
}
};
if (window.twitterCreateOrUpdateProfile.instance) {
opts.id = window.twitterCreateOrUpdateProfile.instance.widgetEl.id;
}
window.twitterCreateOrUpdateProfile.instance = new TWTR.Widget(opts);
window.twitterCreateOrUpdateProfile.instance.render().setUser(username).start();
}
window.twitterCreateOrUpdateProfile('evaisse');
I've been using similar code to the following to get list of recent tweets on a website. There is one problem however which I'd like to have solved. I have to put this code exactly in the place where I want the tweets to be rendered and I'd like to move it to a separate file to keep HTML clean. However I can't really find a way to do it.
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'list',
rpp: 5,
interval: 6000,
title: '#palafo',
subject: 'Linkers',
width: 250,
height: 300,
theme: {
shell: {
background: '#ad0000',
color: '#ffffff'
},
tweets: {
background: '#ffffff',
color: '#444444',
links: '#ad0000'
}
},
features: {
scrollbar: true,
loop: false,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
behavior: 'all'
}
}).render().start();
</script>
Source code for the library is available here
Put this in your separate JS file:
twitterWidget = new TWTR.Widget({
version: 2,
type: 'list',
rpp: 5,
interval: 6000,
title: '#palafo',
subject: 'Linkers',
width: 250,
height: 300,
theme: {
shell: {
background: '#ad0000',
color: '#ffffff'
},
tweets: {
background: '#ffffff',
color: '#444444',
links: '#ad0000'
}
},
features: {
scrollbar: true,
loop: false,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
behavior: 'all'
}
}));
and then, at the point in your document where you're ready to load the widget, put
<script type="text/javascript>
twitterWidget.render().start();
</script>
Simon is right however has forgotten to include the src. When your ready to load the document, type -
<script type="text/javascript src="path/to/.js/file">
twitterWidget.render().start();
</script>