- Web templates
- E-commerce Templates
- CMS & Blog Templates
- Facebook Templates
- Website Builders
WordPress. How to activate Twitter widget (based on Twitter API 1.1)
April 17, 2013
This tutorial shows how to make twitter widget workable based on Twitter API 1.1.
WordPress. How to activate Twitter widget (based on Twitter API 1.1)
1. Go to dev.twitter.com, open My Applications-> Create a new application You need to create new app using this link:
http://dev.twitter.com/apps/new
2. Fill out the form and agree with terms and rules.
3.In Details tab you need to click on Create my access token. You will need Consumer key, Consumer secret, Access token, Access token secret in order to make widget workable.
4. Download and install oAuth Twitter Feed for Developers plugin using the following link: http://wordpress.org/extend/plugins/oauth-twitter-feed-for-developers
5. Open plugin settings in Settings –> Twitter Feed Auth.
6. Fill out the form. You need Consumer key, Consumer secret, Access token, Access token secret and twitter name in order to make widget workable.
7. You need to replace code in twitter widget file. File location depends on the theme.
– In case you are using regular WordPress theme: replace code in themeXXXX/includes/widgets/my-twitter-widget.php file with the one below.
– In case you are using Cherry framework theme: replace code in cherryFramework/includes/widgets/my-twitter-widget.php file with the one below.
'twitter', 'description' => __('A widget that displays the latest tweets', CURRENT_THEME) ); $this->WP_Widget( 'twitter-widget', __('Cherry - Twitter', CURRENT_THEME), $widget_ops ); } // Widget Settings function widget($args, $instance) { extract( $args ); $title = apply_filters('widget_title', $instance['title'] ); $numb = $instance['numb']; echo $before_widget; // Display the widget title if ( $title ) echo $before_title . $title . $after_title; $opt_args = array( 'trim_user' => false, 'exclude_replies' => false, 'include_rts' => true ); $tweets = getTweets(get_option('tdf_user_timeline'), $numb, $opt_args); if ( is_array($tweets) ){ // to use with intents echo ""; echo ''; echo ""; } echo $after_widget; } // display the widget function update($new_instance, $old_instance) { $instance = $old_instance; //Strip tags from title and name to remove HTML $instance['title'] = strip_tags( $new_instance['title'] ); $instance['numb'] = strip_tags( $new_instance['numb'] ); return $instance; } // update the widget function form($instance) { //Set up some default widget settings. $defaults = array( 'title' => __('Latest Tweets', CURRENT_THEME), 'numb' => '3', 'show_info' => true ); $instance = wp_parse_args( (array) $instance, $defaults ); // Widget Title: Text Input ?>"; foreach($tweets as $tweet){ echo '
"; echo "- '; echo '
'; } echo "'; echo ''; echo ''; $user = $tweet['user']; // Tweet author avatar if ( array_key_exists('profile_image_url', $user) ) { $avatar = $user['profile_image_url']; } // Tweet author name if ( array_key_exists('name', $user) ) { $name = $user['name']; } // Tweet author @username if ( array_key_exists('screen_name', $user) ) { $screen_name = $user['screen_name']; } if ( !$name ) $name = 'YOURUSERNAME'; if ( !$screen_name ) $screen_name = 'YOURUSERNAME'; echo ''; echo ''; echo ''; if ( isset($avatar) ) { echo ''; if ( $tweet['text'] ){ $the_tweet = $tweet['text']; if(is_array($tweet['entities']['user_mentions'])){ foreach($tweet['entities']['user_mentions'] as $key => $user_mention){ $the_tweet = preg_replace( '/@'.$user_mention['screen_name'].'/i', '@'.$user_mention['screen_name'].'', $the_tweet); } } if(is_array($tweet['entities']['hashtags'])){ foreach($tweet['entities']['hashtags'] as $key => $hashtag){ $the_tweet = preg_replace( '/#'.$hashtag['text'].'/i', '#'.$hashtag['text'].'', $the_tweet); } } if(is_array($tweet['entities']['urls'])){ foreach($tweet['entities']['urls'] as $key => $link){ $the_tweet = preg_replace( '`'.$link['url'].'`', ''.$link['url'].'', $the_tweet); } } echo ''; } echo '' . $name . ''; echo '@' . $screen_name . ''; echo ''; echo '
' . $the_tweet . ''; echo '"; } else { echo '
Click here to read '.$screen_name.'\'S Twitter feed'; } echo '
Alternatively you can download modified file using this link.
8. Change widget styles in style.css file to
/* Twitter widget */ .twitter { position: relative; } .twitter .tweet_list { overflow: hidden; margin: 0; } .twitter .tweet_list > li { margin: 0 0 15px 0; padding: 0; list-style-type: none; overflow: hidden; } .twitter .tweet_list .timestamp { position: absolute; top: 0; right: 0; display: block; font-size: 11px; } .twitter .tweet_list .timestamp a { color: #999; } .twitter .tweet_item { border-bottom: 1px solid #E8E8E8; min-height: 51px; padding: 9px 12px; position: relative; } .twitter .tweet_content { margin-left: 58px; } .twitter .tweet_txt { padding: 0 0 5px 0; } .twitter .tweet_txt a { font-weight: bold; } .twitter_intents { text-align: right; float: right; font-size: 11px; } .twitter_intents span { display: inline-block; padding-left: 5px; } .twitter .stream-item-header .account-group { color: #999; } .twitter .stream-item-header .avatar { position: absolute; top: 12px; left: 12px; }
9. Go to Appearance->Widgets. Find Cherry-Twitter/My-Twitter widget and set it to appropriate area.
Refresh your site. Twitter posts should show up in case all actions were done properly.
Feel free to check the detailed video tutorial below:
WordPress. How to activate Twitter widget (based on Twitter API 1.1)