{"id":28651,"date":"2013-04-17T09:01:08","date_gmt":"2013-04-17T13:01:08","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=28651"},"modified":"2016-02-24T05:11:35","modified_gmt":"2016-02-24T10:11:35","slug":"wordpress-how-to-activate-twitter-widget-based-on-twitter-api-1-1","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/wordpress-how-to-activate-twitter-widget-based-on-twitter-api-1-1.html","title":{"rendered":"WordPress. How to activate Twitter widget (based on Twitter API 1.1)"},"content":{"rendered":"

\r\n<\/p>\r\n

This tutorial shows how to make twitter widget workable based on Twitter API 1.1.<\/p>\r\n

WordPress. How to activate Twitter widget (based on Twitter API 1.1)<\/a><\/p>\r\n

\"\"<\/a><\/p>\r\n

1. Go to dev.twitter.com<\/a>, open My Applications-> Create<\/strong> a new application You need to create new app using this link:
\r\nhttps:\/\/dev.twitter.com\/apps\/new<\/a><\/p>\r\n

2. Fill out the form and agree with terms and rules.<\/p>\r\n

\"\"<\/a><\/p>\r\n

3.In Details <\/strong>tab you need to click on Create my access token<\/strong>. You will need Consumer key, Consumer secret, Access token, Access token secret in order to make widget workable.<\/p>\r\n

\"\"<\/a><\/p>\r\n

4. Download and install oAuth Twitter Feed for Developers<\/strong> plugin using the following link: http:\/\/wordpress.org\/extend\/plugins\/oauth-twitter-feed-for-developers<\/a><\/p>\r\n

5. Open plugin settings in Settings \u2013> Twitter Feed Auth<\/strong>.<\/p>\r\n

\"\"<\/a><\/p>\r\n

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.<\/p>\r\n

\"\"<\/a><\/p>\r\n

7. You need to replace code in twitter widget file. File location depends on the theme.<\/p>\r\n

– In case you are using regular WordPress theme<\/strong>: replace code in themeXXXX\/includes\/widgets\/my-twitter-widget.php<\/strong> file with the one below.<\/p>\r\n

– In case you are using Cherry framework theme<\/strong>: <\/strong>replace code in cherryFramework\/includes\/widgets\/my-twitter-widget.php <\/strong>file with the one below.<\/p>\r\n

<?php\r\n  class MY_TwitterWidget extends WP_Widget {\r\n  function MY_TwitterWidget() {\r\n  $widget_ops = array(\r\n  'classname' => 'twitter',\r\n  'description' => __('A widget that displays the latest tweets', CURRENT_THEME)\r\n  );\r\n  $this->WP_Widget( 'twitter-widget', __('Cherry - Twitter', CURRENT_THEME), $widget_ops );\r\n  }   \/\/ Widget Settings\r\n  \r\n  function widget($args, $instance) {\r\n  extract( $args );\r\n  \r\n  $title      = apply_filters('widget_title', $instance['title'] );\r\n  $numb       = $instance['numb'];\r\n  \r\n  echo $before_widget;\r\n  \r\n  \/\/ Display the widget title\r\n  if ( $title )\r\n  echo $before_title . $title . $after_title;\r\n  \r\n  $opt_args = array(\r\n  'trim_user'         => false,\r\n  'exclude_replies'   => false,\r\n  'include_rts'       => true\r\n  );\r\n  $tweets = getTweets(get_option('tdf_user_timeline'), $numb, $opt_args); \r\n  \r\n  if ( is_array($tweets) ){\r\n  \r\n  \/\/ to use with intents\r\n  echo "<div class='twitter'>";\r\n  echo '<script type="text\/javascript" src="\/\/platform.twitter.com\/widgets.js"><\/script>';\r\n  echo "<ul class='tweet_list unstyled'>";\r\n  \r\n  foreach($tweets as $tweet){\r\n  \r\n  echo '<li class="clearfix">';\r\n  echo '<div class="tweet_item">';\r\n  echo '<div class="tweet_content">';\r\n  $user = $tweet['user'];\r\n  \r\n  \/\/ Tweet author avatar\r\n  if ( array_key_exists('profile_image_url', $user) ) {\r\n  $avatar = $user['profile_image_url'];\r\n  }\r\n  \r\n  \/\/ Tweet author name\r\n  if ( array_key_exists('name', $user) ) {\r\n  $name = $user['name'];\r\n  }\r\n  \/\/ Tweet author @username\r\n  if ( array_key_exists('screen_name', $user) ) {\r\n  $screen_name = $user['screen_name'];\r\n  }\r\n  \r\n  if ( !$name ) $name = 'YOURUSERNAME';\r\n  if ( !$screen_name ) $screen_name = 'YOURUSERNAME';\r\n  \r\n  echo '<div class="stream-item-header">';\r\n  echo '<a class="account-group" href="http:\/\/twitter.com\/'.$screen_name.'" target="_blank">';\r\n  if ( isset($avatar) ) {\r\n  echo '<img class="avatar" src="'.$avatar.'" alt="'.$name.'">';\r\n  }\r\n  echo '<strong class="fullname">' . $name . '<\/strong>';\r\n  echo '<span class="username">@' . $screen_name . '<\/span>';\r\n  echo '<\/a>';\r\n  echo '<\/div>';\r\n  \r\n  if ( $tweet['text'] ){\r\n  $the_tweet = $tweet['text'];\r\n  \r\n  if(is_array($tweet['entities']['user_mentions'])){\r\n  foreach($tweet['entities']['user_mentions'] as $key => $user_mention){\r\n  $the_tweet = preg_replace(\r\n  '\/@'.$user_mention['screen_name'].'\/i',\r\n  '<a href="http:\/\/www.twitter.com\/'.$user_mention['screen_name'].'" target="_blank">@'.$user_mention['screen_name'].'<\/a>',\r\n  $the_tweet);\r\n  }\r\n  }\r\n  \r\n  if(is_array($tweet['entities']['hashtags'])){\r\n  foreach($tweet['entities']['hashtags'] as $key => $hashtag){\r\n  $the_tweet = preg_replace(\r\n  '\/#'.$hashtag['text'].'\/i',\r\n  '<a href="https:\/\/twitter.com\/search?q=%23'.$hashtag['text'].'&src=hash" target="_blank">#'.$hashtag['text'].'<\/a>',\r\n  $the_tweet);\r\n  }\r\n  }\r\n  \r\n  if(is_array($tweet['entities']['urls'])){\r\n  foreach($tweet['entities']['urls'] as $key => $link){\r\n  $the_tweet = preg_replace(\r\n  '`'.$link['url'].'`',\r\n  '<a href="'.$link['url'].'" target="_blank">'.$link['url'].'<\/a>',\r\n  $the_tweet);\r\n  }\r\n  }\r\n  \r\n  echo '<div class="tweet_txt">' . $the_tweet . '<\/div>';\r\n  \r\n  echo '<div class="clearfix">';\r\n  echo '\r\n  <div class="twitter_intents">\r\n  <span><a class="reply-tweet" href="https:\/\/twitter.com\/intent\/tweet?in_reply_to='.$tweet['id_str'].'">Reply<\/a><\/span>\r\n  <span><a class="retweet" href="https:\/\/twitter.com\/intent\/retweet?tweet_id='.$tweet['id_str'].'">Retweet<\/a><\/span>\r\n  <span><a class="favorite-tweet" href="https:\/\/twitter.com\/intent\/favorite?tweet_id='.$tweet['id_str'].'">Favorite<\/a><\/span>\r\n  <\/div>';\r\n  \r\n  echo '\r\n  <div class="timestamp">\r\n  <a href="https:\/\/twitter.com\/'.$screen_name.'\/status\/'.$tweet['id_str'].'" target="_blank">\r\n  '. date('d M', strtotime($tweet['created_at'])) .'\r\n  <\/a>\r\n  <\/div>';\r\n  echo "<\/div>";\r\n  } else {\r\n  echo '\r\n  <br \/><br \/>\r\n  <a href="http:\/\/twitter.com\/'.$screen_name.'" target="_blank">Click here to read '.$screen_name.'\\'S Twitter feed<\/a>';\r\n  }\r\n  echo '<\/div>';\r\n  echo '<\/div>';\r\n  echo '<\/li>';\r\n  }\r\n  echo "<\/ul>";\r\n  echo "<\/div>";\r\n  }\r\n  \r\n  echo $after_widget;\r\n  \r\n  }   \/\/ display the widget\r\n  \r\n  function update($new_instance, $old_instance) {\r\n  $instance = $old_instance;\r\n  \r\n  \/\/Strip tags from title and name to remove HTML\r\n  $instance['title']      = strip_tags( $new_instance['title'] );\r\n  $instance['numb']       = strip_tags( $new_instance['numb'] );\r\n  \r\n  return $instance;\r\n  }   \/\/ update the widget\r\n  \r\n  function form($instance) {\r\n  \/\/Set up some default widget settings.\r\n  $defaults = array(\r\n  'title' => __('Latest Tweets', CURRENT_THEME),\r\n  'numb' => '3',\r\n  'show_info' => true\r\n  );\r\n  $instance = wp_parse_args( (array) $instance, $defaults );\r\n  \r\n  \/\/ Widget Title: Text Input  ?>\r\n<p>\r\n  <label for="<?php echo $this->get_field_id( 'title' ); ?>">\r\n  <?php _e('Title:', CURRENT_THEME); ?>\r\n  <\/label>\r\n  <input type="text" id="<?php echo $this->get_field_id( 'title' ); ?>" class="widefat" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo $instance['title']; ?>" \/>\r\n  <\/p>\r\n  <p>\r\n  <label for="<?php echo $this->get_field_id( 'numb' ); ?>">\r\n  <?php _e('Number of Twets:', CURRENT_THEME); ?>\r\n  <\/label>\r\n  <input type="text" id="<?php echo $this->get_field_id( 'numb' ); ?>" class="widefat" name="<?php echo $this->get_field_name( 'numb' ); ?>" value="<?php echo $instance['numb']; ?>" \/>\r\n  <\/p>\r\n  <?php }  \/\/ and of course the form for the widget options\r\n  }   \/\/ The twitter widget class\r\n  ?>\r\n<\/pre>\r\n
Alternatively you can download modified file using this link<\/a>.<\/p>\r\n
8. Change widget styles in style.css<\/strong> file to<\/p>\r\n
\r\n\/* Twitter widget *\/\r\n  .twitter {\r\nposition: relative;\r\n}\r\n.twitter .tweet_list {\r\noverflow: hidden;\r\nmargin: 0;\r\n}\r\n.twitter .tweet_list > li {\r\nmargin: 0 0 15px 0;\r\npadding: 0;\r\nlist-style-type: none;\r\noverflow: hidden;\r\n}\r\n.twitter .tweet_list .timestamp {\r\nposition: absolute;\r\ntop: 0;\r\nright: 0;\r\ndisplay: block;\r\nfont-size: 11px;\r\n}\r\n.twitter .tweet_list .timestamp a {\r\ncolor: #999;\r\n}\r\n.twitter .tweet_item {\r\nborder-bottom: 1px solid #E8E8E8;\r\nmin-height: 51px;\r\npadding: 9px 12px;\r\nposition: relative;\r\n}\r\n.twitter .tweet_content {\r\nmargin-left: 58px;\r\n}\r\n.twitter .tweet_txt {\r\npadding: 0 0 5px 0;\r\n}\r\n.twitter .tweet_txt a {\r\nfont-weight: bold;\r\n}\r\n.twitter_intents {\r\ntext-align: right;\r\nfloat: right;\r\nfont-size: 11px;\r\n}\r\n.twitter_intents span {\r\ndisplay: inline-block;\r\npadding-left: 5px;\r\n}\r\n.twitter .stream-item-header .account-group {\r\ncolor: #999;\r\n}\r\n.twitter .stream-item-header .avatar {\r\nposition: absolute;\r\ntop: 12px;\r\nleft: 12px;\r\n}<\/pre>\r\n
9. Go to Appearance->Widgets<\/strong>. Find Cherry-Twitter\/My-Twitter widget and set it to appropriate area. <\/p>\r\n
\"\"<\/a><\/p>\r\n
Refresh your site. Twitter posts should show up in case all actions were done properly.<\/p>\r\n
\"\"<\/a><\/p>\r\n
Feel free to check the detailed video tutorial below:<\/p>\r\n
WordPress. How to activate Twitter widget (based on Twitter API 1.1)<\/a><\/p>\r\n<\/p>\r\n<\/p>\r\n<\/p>\r\n
<\/p>","protected":false},"excerpt":{"rendered":"
This tutorial shows how to make twitter widget workable based on Twitter API 1.1.<\/p>\n","protected":false},"author":39,"featured_media":28664,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[728],"tags":[1314,1508,1387,559,2405],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/28651"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/39"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=28651"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/28651\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/28664"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=28651"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=28651"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=28651"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}