A couple of days back @atisz asked me for help with integrating a 'Latest Tweets' PHP script (https://github.com/andrewbiggart/latest ... hp-o-auth/) with his site.
While that was trivial to do, I realized that the script could be made much more flexible and even easier to be used with Couch.
I am attaching what I finally ended up with.
https://github.com/CouchCMS/Tweets
Installation:
1. Extracting the attached zip will yield a folder named 'tweets'.
Place it within your Couch installation's 'addons' folder.
2. Add the follwing line of code to 'addons/kfunctions.php' file
(v1.4 will have a file named 'kfunctions.example.php' in the addons folder. Please rename it to 'kfunctions.php)
Configuration:
Our addon uses Twitter OAuth, API V1.1.
Using it requires registering an application at Twitter developer centre and getting a bunch of keys.
If you are unfamiliar with the process, here it is in detail -
1. Please visit https://dev.twitter.com/apps/ and sign in using your Twitter username and password.
This does not need to be the account you'll display the tweets of. Use any account you have control of.
2. Select 'Create new application' from top-right and enter the details.
- The name and description can be anything.
- The website field can be your main website and doesn’t have to be the site where you'll display the tweets.
- Callback URL can be left blank.
3. On the next screen, click 'Create my access token'.
4. Make a note of the following settings
You need to then enter these keys in 'tweets/config.php' file
The following setting of the config file is also important-
Twitter imposes a 180 accesses per 15 minutes restriction.
To avoid going above this limit, we cache the fetched tweets temporarily.
By default this period is 60 minutes. Feel free to change this depending on your tweeting frequency (keeping in mind that it cannot be made less than one minute).
Usage:
The 'Latest Tweets' addon makes available a single Couch tag named 'tweets'.
To use it, place it within a Couch template like this
Parameters:
By default (as in the example above), the 'tweets' tag fetches tweets of the twitter account used for registering the application.
This, and other properties, can be changed by setting the tag's parameters.
Following is a complete list of the parameters supported by 'tweets' tag -
handle - account to fetch tweets of. If not set, the account used for registering application is used.
count - the number of tweets to fetch. If not set, a default value of '5' is used.
exclude_replies - by default 'replies' are included in the fetched tweets. Set this to '1' to exclude replies.
include_rts - by default 'retweets' are included in the fetched tweets. Set this to '0' to exclude retweets.
twitter_style_dates - by default the date contained in 'tweet_display_time' variable displays 'Twitter style' dates (1.e. '5 min ago'). This can be disabled by setting this parameter to '0'
date_format - Can be set to any value as discussed at http://www.couchcms.com/docs/tags-reference/date.html. By default 'g:i A M jS' is used.
startcount - The 'k_count' variable indicates the number of the tweets being listed. By default this starts from '1'. This can be changed by setting this parameter.
Variables:
The tag loops through all the fetched tweets and makes available the data of each tweet as the following variables -
id - id of the tweet
tweet_text - actual text of the tweet
tweet_display_time - formatted date/time of the tweet. e.g. '2:26 PM Oct 22nd' or '15 min ago'
tweet_date - unformatted date/time e.g. '2013-10-22 14:26:10' . Can be used with cms:date tag
retweet_count - number of times the tweet was retweeted
favorite_count - number of times the tweet was favorited
permalink - permanent link of the tweet
reply_link - link that can be used for replying to the tweet
retweet_link - link that can be used for retweeting the tweet
favorite_link - link that can be used for favoriting the tweet
user_name - user doing the tweet e.g. 'Dr. Web Magazin'
user_screen_name - handle of the user doing the tweet e.g. 'drwebmagazin '
user_profile_image - link to user's gravatar image
is_retweet - will be '1' if the tweet is a retweet
retweeter_name - user retweeting the tweet. Will be set only for retweets.
retweeter_screen_name - handle of the user retweeting the tweet. Will be set only for retweets.
retweeter_profile_image - link to gravatar image of user retweeting the tweet.
k_count - keeps count of the number of the tweet currently being iterated
k_total_records - total number of tweets fetched.
A complete example:
As seen above, the cms:tweets tag fetches in the requested tweets and makes available all the relevant data a variables.
In true Couch style, you as the designer can them use absolutely any HTML markup to display the tweets in whatever fashion you desire (bubbles?!).
Following is a sample markup (taken from http://www.webdevdoor.com/javascript-aj ... on-jquery/ with thanks to Tom Elliott) that can be used as a starting point -
You can use the following CSS/images to style the tweets rendered above
This is the final output (displaying tweets of 'Smashing Magazine')
Hope this helps.
Feedback solicited
While that was trivial to do, I realized that the script could be made much more flexible and even easier to be used with Couch.
I am attaching what I finally ended up with.
tweets.zip- (13.16 KiB) Downloaded 4009 times
Installation:
1. Extracting the attached zip will yield a folder named 'tweets'.
Place it within your Couch installation's 'addons' folder.
2. Add the follwing line of code to 'addons/kfunctions.php' file
(v1.4 will have a file named 'kfunctions.example.php' in the addons folder. Please rename it to 'kfunctions.php)
- Code: Select all
require_once( K_COUCH_DIR.'addons/tweets/tweets.php' );
Configuration:
Our addon uses Twitter OAuth, API V1.1.
Using it requires registering an application at Twitter developer centre and getting a bunch of keys.
If you are unfamiliar with the process, here it is in detail -
1. Please visit https://dev.twitter.com/apps/ and sign in using your Twitter username and password.
This does not need to be the account you'll display the tweets of. Use any account you have control of.
2. Select 'Create new application' from top-right and enter the details.
- The name and description can be anything.
- The website field can be your main website and doesn’t have to be the site where you'll display the tweets.
- Callback URL can be left blank.
3. On the next screen, click 'Create my access token'.
4. Make a note of the following settings
- Untitled-1.png (26.86 KiB) Viewed 44599 times
You need to then enter these keys in 'tweets/config.php' file
- Code: Select all
// Twitter keys (You'll need to visit https://dev.twitter.com and register to get these.
$consumerkey = "xxxxxxxxxxxxxxxxxxxxxx";
$consumersecret = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
$accesstoken = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
$accesstokensecret = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
The following setting of the config file is also important-
- Code: Select all
// Minutes to cache feed (Cannot be less than 1 minute. Default is 60 minutes).
$cachetime = 60;
Twitter imposes a 180 accesses per 15 minutes restriction.
To avoid going above this limit, we cache the fetched tweets temporarily.
By default this period is 60 minutes. Feel free to change this depending on your tweeting frequency (keeping in mind that it cannot be made less than one minute).
Usage:
The 'Latest Tweets' addon makes available a single Couch tag named 'tweets'.
To use it, place it within a Couch template like this
- Code: Select all
<cms:tweets>
<!-- The contents of each fetched tweet will be available here as variables -->
</cms:tweets>
Parameters:
By default (as in the example above), the 'tweets' tag fetches tweets of the twitter account used for registering the application.
This, and other properties, can be changed by setting the tag's parameters.
Following is a complete list of the parameters supported by 'tweets' tag -
handle - account to fetch tweets of. If not set, the account used for registering application is used.
count - the number of tweets to fetch. If not set, a default value of '5' is used.
exclude_replies - by default 'replies' are included in the fetched tweets. Set this to '1' to exclude replies.
include_rts - by default 'retweets' are included in the fetched tweets. Set this to '0' to exclude retweets.
twitter_style_dates - by default the date contained in 'tweet_display_time' variable displays 'Twitter style' dates (1.e. '5 min ago'). This can be disabled by setting this parameter to '0'
date_format - Can be set to any value as discussed at http://www.couchcms.com/docs/tags-reference/date.html. By default 'g:i A M jS' is used.
startcount - The 'k_count' variable indicates the number of the tweets being listed. By default this starts from '1'. This can be changed by setting this parameter.
Variables:
The tag loops through all the fetched tweets and makes available the data of each tweet as the following variables -
id - id of the tweet
tweet_text - actual text of the tweet
tweet_display_time - formatted date/time of the tweet. e.g. '2:26 PM Oct 22nd' or '15 min ago'
tweet_date - unformatted date/time e.g. '2013-10-22 14:26:10' . Can be used with cms:date tag
retweet_count - number of times the tweet was retweeted
favorite_count - number of times the tweet was favorited
permalink - permanent link of the tweet
reply_link - link that can be used for replying to the tweet
retweet_link - link that can be used for retweeting the tweet
favorite_link - link that can be used for favoriting the tweet
user_name - user doing the tweet e.g. 'Dr. Web Magazin'
user_screen_name - handle of the user doing the tweet e.g. 'drwebmagazin '
user_profile_image - link to user's gravatar image
is_retweet - will be '1' if the tweet is a retweet
retweeter_name - user retweeting the tweet. Will be set only for retweets.
retweeter_screen_name - handle of the user retweeting the tweet. Will be set only for retweets.
retweeter_profile_image - link to gravatar image of user retweeting the tweet.
k_count - keeps count of the number of the tweet currently being iterated
k_total_records - total number of tweets fetched.
A complete example:
As seen above, the cms:tweets tag fetches in the requested tweets and makes available all the relevant data a variables.
In true Couch style, you as the designer can them use absolutely any HTML markup to display the tweets in whatever fashion you desire (bubbles?!).
Following is a sample markup (taken from http://www.webdevdoor.com/javascript-aj ... on-jquery/ with thanks to Tom Elliott) that can be used as a starting point -
- Code: Select all
<div id="twitter-feed">
<a href="https://twitter.com/" target="_blank">
<img src="images/twitter-bird-light.png" width="34" style="float:left;padding:3px 12px 0px 6px" alt="twitter bird">
</a>
<h1>Latest Tweets</h1>
<cms:tweets>
<div class="twitter-article" id="tw<cms:show k_count />">
<div class="twitter-pic">
<a href="https://twitter.com/<cms:show user_screen_name />" target="_blank">
<img src="<cms:show user_profile_image />" width="42" height="42" alt="twitter icon">
</a>
</div>
<div class="twitter-text">
<p>
<span class="tweetprofilelink">
<strong><a href="https://twitter.com/<cms:show user_screen_name />" target="_blank"><cms:show user_name /></a></strong> <a href="https://twitter.com/<cms:show user_screen_name />" target="_blank">@<cms:show user_screen_name /></a>
</span>
<span class="tweet-time">
<a href="<cms:show permalink />" target="_blank"><cms:show tweet_display_time /></a>
</span>
<br/>
<cms:show tweet_text />
</p>
<cms:if is_retweet><div id="retweet-indicator"></div></cms:if>
<div id="twitter-actions" style="display: none; opacity: 0; margin-top: -20px;">
<div class="intent" id="intent-reply"><a href="<cms:show reply_link />" title="Reply"></a></div>
<div class="intent" id="intent-retweet"><a href="<cms:show retweet_link />" title="Retweet"></a></div>
<div class="intent" id="intent-fave"><a href="<cms:show favorite_link />" title="Favourite"></a></div>
</div>
</div>
</div>
</cms:tweets>
</div>
You can use the following CSS/images to style the tweets rendered above
- resources.zip
- (4.18 KiB) Downloaded 3928 times
This is the final output (displaying tweets of 'Smashing Magazine')
- Untitled-2.png (13.4 KiB) Viewed 44599 times
Hope this helps.
Feedback solicited
