Coded something up in Couch in an interesting way? Have a snippet or shortcode to share? Post it here for the community to benefit.
31 posts Page 1 of 4
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.
tweets.zip
(13.16 KiB) Downloaded 4224 times
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)
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
Untitled-1.png (26.86 KiB) Viewed 48896 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 4148 times


This is the final output (displaying tweets of 'Smashing Magazine')
Untitled-2.png
Untitled-2.png (13.4 KiB) Viewed 48896 times


Hope this helps.
Feedback solicited :)
I recently embedded the official Twitter widget on a client's News page ... it looks OK - was quick and easy to do and won't fail if Twitter change anything their end.

What exactly is the advantage of using this script - apart from having control over the styling?
Hi potato,

Apart from the obvious fact that the official Twitter widget is a client-side (i.e. JS) solution and ours is server-side, following are two reasons that could make using this addon more attractive -

1. The twitter widget allows for only very limited custom styling.
If you want to make the tweets seamlessly blend with the site, you got to create your own custom widget. Please take a look at
http://wp.smashingmagazine.com/2013/06/ ... er-widget/ for what this process entails and then compare it with the ease with which this addon can be used to do the same thing.
If the default styling is all you want, by all means choose the official widget. Nothing could be easier.

2. Unlike the official widget, the addon being a server-side solution makes it possible to cache tweets. This prevents problems with Twitter API Rate Limiting and over capacity issues.

Finally, you said .."won't fail if Twitter change anything their end.".
Unfortunately, going by what happened when Twitter decided to move to API v1.1 from 1.0, that is not quite true :) The original widget broke on every site and had to be manually upgraded.

Hope this answers the query.
Twitter uses their widgets to track your visitors' browser history. A server-side solution stops that from taking place on your site.
ah - thank you both for your replies - I am fully persuaded to take what at first glance seemed a long way round to do a Twitter embed i.e. via the PHP route!
potato wrote: I recently embedded the official Twitter widget on a client's News page ... it looks OK - was quick and easy to do and won't fail if Twitter change anything their end.

What exactly is the advantage of using this script - apart from having control over the styling?


I have this as well. Will look into it - thank you for this!
Wowwwwww! KK, should I use this instead of what I have implemented few days before? What I have now is working and looking beautiful, completely integrated with my design.
Great add-on,
it's quick, easy to integrate, and you don't have javascript blocking and loading app time that are inevitable with the twitter widget.

Congrats guys (again)
Thank you, Paolo :)
I am glad you found it useful.
brilliant - thanks! Superbly clear instructions KK - great to have full control over embedding tweets.

p.s. I had to enable php extension php_curl via my local WAMPSERVER control panel for it to work on my machine.
31 posts Page 1 of 4