Twitter widget API v1.1 configuration

[livemesh]

Due to API changes by Twitter, we can no longer provide a built in Twitter Widget without significant changes. The JTWT JS plugin we used (and many others on the web) has been retired. There are two good options for the users who want to continue to use the twitter widget. Both have their pluses and minuses.

Second option is feature rich (ex: post, retweet, replies right from the widget is supported) but at times does not blend well with the theme due to custom skinning by Twitter which displays the tweets in an iFrame.

First option is pretty close to what we are used to – displaying just a list of recent tweets, and blends reasonably well with the theme (and we can reskin it too with little effort).

Have provided the screenshots for your help (video would have been better but involves some patience in blurring out some of the details shown during the creation of the widgets). Let us know if you have trouble.

FIRST OPTION –

WordPress Plugin from wordpress.org – http://wordpress.org/plugins/recent-tweets-widget/

1) Login to twitter account after you invoke the link –

https://dev.twitter.com/apps

2) Click on create a new application

https://docs.google.com/file/d/0B9j6FQo4cSQFWDR5Q21OSlo1OEE/edit?usp=drivesdk

3) Fill in the details as shown and hit the Create application button at the bottom –

https://docs.google.com/file/d/0B9j6FQo4cSQFdUl1LVRwc0xOa0E/edit?usp=drivesdk

4) You should now be able to see the details like consumer key, consumer secret etc. as shown in the below screenshot –

https://docs.google.com/file/d/0B9j6FQo4cSQFMGZtRXFqWTI2ODA/edit?usp=drivesdk

Generate OAuth tokens by visiting the OAuth tool tab –

https://docs.google.com/file/d/0B9j6FQo4cSQFWGwxLTFkN0V3QTA/edit?usp=drivesdk

5) Download the plugin from the URL –

http://wordpress.org/plugins/recent-tweets-widget/installation/

Load the plugin, drag and drop the Recent Tweets widget into the desired widget area. Paste the above details – keys and tokens into WordPress widget and you are done –

https://docs.google.com/file/d/0B9j6FQo4cSQFZGtyX2Q4TmRJVVk/edit?usp=drivesdk

The tweets should now appear in the page.

SECOND OPTION –

1) Documentation is here but involves steps detailed below – https://dev.twitter.com/docs/embedded-timelines

Go to

https://twitter.com/settings/widgets

and hit Create Widget button –

https://docs.google.com/file/d/0B9j6FQo4cSQFTEZ5bU0yczVnYjA/edit?usp=drivesdk

2) Should open the widget creation page like this –

https://docs.google.com/file/d/0B9j6FQo4cSQFYzRhZkFJT3liWDQ/edit?usp=drivesdk

Choose a dark or light skin depending on whether you want the widget to appear in the footer or on one of the sidebars. Copy the widget HTML generated at the bottom right –

https://docs.google.com/file/d/0B9j6FQo4cSQFbGFtUWVBMlJaYUU/edit?usp=drivesdk

3) Paste the copied HTML into a WordPress text widget as shown below –

https://docs.google.com/file/d/0B9j6FQo4cSQFdmNyb200NDlRS2M/edit?usp=drivesdk

Your tweets should appear on your page. Hope this helps.

[livemesh]

Optional – If you want to make the recent tweets widget (First Option above) a little prettier with twitter icon instead of regular bullets, edit the plugin CSS as shown below –

https://docs.google.com/file/d/0B9j6FQo4cSQFSG5HSFl1d3lkZEE/edit?usp=drivesdk

The updated CSS to paste into the editor is –

.tp_recent_tweets  li {
	background-image: url('assets/tweet.png') !important;
	background-repeat: no-repeat;	
	background-position: 0px 10px !important;
	padding-left: 32px !important;
	padding-bottom: 20px !important;
	float: left;
	clear: left;
	line-height: 20px;
}

[livemesh]

With the latest updates of our themes, support for Recent Tweets plugin integration is now seamless with the help of TGM plugin activation framework.

[asherp]

This reply has been marked as private.

[livemesh]

The image cascading is happening due to a JS error in the twitter widget which causes the slider to stop working. Can you pls post a temp login to the site so that I can check by inserting this widget into widget area and then troubleshot.

[asherp]

This reply has been marked as private.

[livemesh]

This reply has been marked as private.

[asherp]

Hi,

Any news on this yet? Client needs site launched asap and want to sort this as a prerequisite. Many thanks.

A

[livemesh]

I have already posted a private reply. You are using an older version of the theme. Please update the theme to latest version and the image cascading problem with the Nivo slider will be gone. If you don’t want to update the theme then you can use the Flex slider as the main slider which doesn’t have this problem.

And see my previous reply with the screenshot to know that I was able to add the recent tweets on your installation and there were no issues.

[asherp]

Oh it won’t show your reply unfortunately? I am logged in too.
Thanks for the explanation will go ahead and take a look into it now.

Thanks again!

[asherp]

Have updated the theme to latest version and tried using the *Recent Tweets widget with the Nivo Slider and it is still causing errors (although just not showing images now rather that throwing layout/JS off).

Have tried running it on FlexSlider instead (not preferred) and this is also not working.

The widget is suggesting the details from the application aren’t correct but have double and triple checked and created a new application twice to ensure it wan’t just the application.

Can you please advise what can be done next? Log in details remain the same if you need to check! I have left the widget back out for now so the client can’t see issues.

Thanks! – A

[livemesh]

Sorry you are still having issues with this. The reason you are not seeing those slider images is because of JS errors from the twitter widget.

I can only do so much in this case. I was able to get my twitter account active on your site working with no errors as seen in the screenshot sent to you.

Sorry only way out is to send your twitter account password to check if you have setup the application right. There is no way out. Or you can try other twitter plugins out there on the wordpress plugins site and see if they work any better. Do let me know and I will do my best to help.

[asherp]

This reply has been marked as private.

[livemesh]

The official twitter widget as well the recent tweets widget should be working for you now. Thanks.

[Author]

Posts