WPChatR & WCP License Plugin Installation
- Every one of the WickedCoolPlugins requires a valid WCP License Key in order to work. Go to the “Downloads” page in the member’s area and download both WCP License Key Plugin and WPChatR Plugin ZIP files. You will find your WCP license key on the Downloads page on WickedCoolPlugins.com. Without entering a valid license key, the WPChatR plugin will not work. You can install these plugins (WCP License Key and WPChatR) just like any other standard WordPress plugin, activate both of them, and enter your WCP license key under WP Admin – > Settings -> WickedCoolPlugins License section. Click Here for step-by-step installation instructions for the WCP License Key Plugin.
- After you have activated both the WPChatR and WCP License Plugins, you should see this on your WP Admin > Plugins page.
You can use WPChatR with users logging in via either Twitter or FaceBook (FB).
If you’re using it with Twitter, then please note that all chat messages will also be posted to Twitter.com, to the chatter’s own Twitter feed.
So if you want to set up a private chat room, then use the FB integration. FB authentication is used just for logging in to the chat room – no messages will be posted to the user’s FB wall or anywhere for that matter.
If you want to use it with Twitter, just set up the Twitter part below. Or if you wish to use just FB authentication, then just set up the FB part. No need to set up both, unless you will have more than one chatroom, one using Twitter, and another using FB.
STEP 1: Twitter Integration
[Skip to STEP 5 if you wish to only set up a private chat room with just FaceBook authentication.]
In order to use the WPChatR WordPress Plugin, you’ll first need to register your blog with Twitter by creating a “Twitter App”. This is a one-time activity per chat room that you wish to publish on your web site.
Go to the Twitter App Setup page – you’ll need to sign-in with your Twitter account credentials.
Create a new Twitter App as shown below.
Click on “Create your Twitter application” at the bottom of the above screen.
Now click on the “Settings” tab. On this page, towards the bottom, under Application Type”, choose “Read and Write” and then save changes.
Click on “Update” to save changes.
Go back to “Details” tab.
Towards the bottom of this page, click on “Create my access token” button.
Then when page refreshes, you will still be on the “Details” tab.
Scroll down towards the bottom of the page and note down these two items in a text editor window (like notepad)
Consumer Secret Key
The Consumer Key and Consumer Secret Key are the only two things you need from Twitter.
Now, back to the WPChatR plugin setup screen on your web site.
STEP 5: FaceBook Integration
Go to the FaceBook Developer page. You will need to log in there using your FaceBook account login info
Click on “Create New App” in the right top corner of your screen, to create a new FaceBook app
Fill in the App Name and click on Continue
Enter the captcha (security code), and click Submit.
a) Make a note of App ID and App Secret
b) For App Domain, enter your web site domain name where you are using WPChatR – like YourSite.com
c) For Website with Facebook Login, enter the full URL to your web site – like http://YourSite.com
Save the settings, and now go back to WP admin on your web site.
Log in to WordPress admin, and under Settings, click on the new option WPChatR.
You will now see the WPChatR setup page, which are marked as three sections: A, B & C
Click image to enlarge
Twitter App Consumer Key: Enter the consumer key you previously copied, from Step 4 above.
Twitter App Secret Key: Enter the secret key you previously copied, from Step 4 above.
FaceBook App Consumer Key: Enter the consumer key you previously copied, from Step 9 (a) above.
FaceBook App Secret Key: Enter the secret key you previously copied, from Step 9 (a) above.
All other fields from Section A are optional for initial setup. You can always customize them later. But here’s what they mean.
Chatroom Welcome Message: “Welcome to WPChatR” (default)
Enter the text that you want your chatters to see right above the chat box.
Chatroom Closed Message: “Chatroom is currently closed” (default)
Enter the text that you want your chatters to see when they arrive at the chatroom page and the chat room has been disabled by you.
Chatroom Empty Message: “No Tweets Found”
Message shown when there are no tweets/chat messages yet (brand new chat room)
Sign-in Button Image: Use default, or enter path to your own image
Sign-out Button Image: Use default, or enter path to your own image
Total # of allowed chat messages per hour (Hourly Limit): 9999 (default)
This is the max number of hourly messages per hour – just a precautionary field to prevent possible abuse.
Block/Ban Ids: Here you can enter a comma separated list of twitter id’s (without the @ sign) that you wish to ban from your chat room – will not prevent them from entering messages, but their messages will not show in the chat room for others to see.
Add Chat Room Name: Enter a name for your chat room. This will be shown on chat room page.
Add Chat Room Hashtag: Do this regardless of whether you use Twitter or FaceBook. All tweets from the chatters will be marked with this hashtag on twitter, so that the WPChatR plugin can pick up all of those tweets and display it here on this page. So pick a small, unique hashtag that has an important keyword relevant to your niche or web site. If you are selling WordPress plugins, like we are, you could pick the hashtag “wordpress-plugins” or “plugins” or “wp-plugins” or even your site name – like “wickedcoolplugins”. Whatever you choose, a “hash” character (“#”) will be added to it when it shows up on twitter. For example, here’s a list of tweets with the hashtag “#olympics”.
Chat Room Connected To? Set to FACEBOOK (for private chat), or TWITTER (for public chat, posted on twitter)
Chat Room Enabled: Set this to “Y” (for “Yes”)
Page will refresh, and you will now see Section C populated with your chat room settings.
Click on the GENERATE CHAT CODE button at the end of the row of your chat room. You will see a popup with the code you need for your chat room. Copy it.
8. Create a new WordPress page for your WPChatR chat room. Let’s say you gave it the title “Mysite Chat”. It will then be available at http://YourSite.com/mysite-chat/
In the body of the page, enter the WPChatR CHAT CODE you copied from Section C above.
It will look something like this:
[ WPChatR welcomemsg=”Welcome+To+WPChatR%21″ tweetdisplaylimit=”20″ signin=”http://WickedCoolPlugins.com/geeksonly/wp-content/plugins/WPChatR/images/signin.png” signout=” http://WickedCoolPlugins.com/geeksonly/wp-content/plugins/WPChatR/images/signout.gif ” tweethashtag=”wickedcoolplugins” refreshchatroom=”10″ ][ /WPChatR ]
Save the page, and visit the page.
You will now be looking at your brand new WPChatR Chat Room where your visitors/members can chat with each other about anything at all.
NOTE: You can have multiple chat rooms (one WP page per chat room). Each page can be setup to look for a specific hashtag so all the tweets using that hashtag will automatically show up in that page.
Behind The Chat Code (a.k.a Shortcode)
The WPChatR chat code looks something like this…
[ WPChatR welcomemsg=”Welcome+To+WPChatR%21″ tweetdisplaylimit=”20″ signin=”http://WickedCoolPlugins.com/geeksonly/wp-content/plugins/WPChatR/images/signin.png” signout=” http://WickedCoolPlugins.com/geeksonly/wp-content/plugins/WPChatR/images/signout.gif ” hashtag=”wickedcoolplugins” connectto=”FACEBOOK” refreshchatroom=”10″ ][ /WPChatR ]
Here’s what the various parameters mean…
Welcome message shown to your visitors right above the chat box.
The number 20 means, show the latest 20 tweets containing the selected hashtag. You can make it as high as you want (like 10000)
You can use the default “Sign In” button that comes with the plugin, or you can use your own.
signout=” http://WickedCoolPlugins.com/wp-content/plugins/WPChatR/images/signout.gif “
You can use the default “Sign Out” button that comes with the plugin, or you can use your own.
“wickedcoolplugins” is the hashtag that this example is using. If using Twitter, then this is the hashtag used for this tweet. If using FaceBook, then this hashtag is only used for internal purposes within the plugin. Nothing is posted to FB.
This could be FACEBOOK or TWITTER depending on which one you’re integrating with.
Recommended: 10. This denotes how often (in seconds) the chat room should be refreshed with newer incoming chat messages. 10 is an optimal number to set. You could set it to a lower number like 5, but please remember that the faster you want your chat room to refresh with newer tweets, and the more chatters you have in your chat room, the more database queries will be made on your server. So just be aware of that. On a shared host, 10 is an optimal and recommended number.