WP to Twitter | Joe Dolson Accessible Web Design.

I’ve just discovered the craziest, awesomest plugin for WordPress. This little fella allows your WP blog to automatically update your Twitter with the the blog title, a shortlink URL (cli.gs or bit.ly), and even an excerpt!

It has a lot of customizable options, so you can do a ton of things with it. You can use the custom fields in your blog (they’re under the posting options when you’re writing your post) and add them there. One great thing is that there’s an option which lets this plugin add all of the tags you add to the post, as hashtags.

For those of you not literate with twitter a hashtag is a sort of tag that you’d normally use on your blog posts, deviantart submissions (for you crazy art people), and other places. It is preceded by a hash (#) and followed by the tag word. Look at the trends, most of them are hashtags. It makes searching twitter much easier.

Anyways, here’s what’s happening. The sample twitter update should read something like this:

New Post: WP to Twitter Plugin (http://bit.ly/whatever) #twitter #web #social #etc

I think that’s reasonable, no? You can, of course customize this! EVEN FOR SEPARATE AUTHORS AND THEIR RESPECTIVE TWITTER ACCOUNTS!

Anyways Enjoy!

P.S. It also notifies you if the tweet could not be update and saves all options just in case you want to re-tweet

Share and Enjoy:

]]> http://www.davepcguy.com/archive/wp-to%c2%a0twitter-plugin/feed/ 1 http://www.davepcguy.com/archive/tweet-this-and-url-shortening-api/ http://www.davepcguy.com/archive/tweet-this-and-url-shortening-api/#comments Sat, 19 Dec 2009 23:00:26 +0000 Admin http://www.davepcguy.com/?p=1004

Alright, you’ve all seen those CRAZY “Tweet This” buttons on so many websites, (mainly wordpress). You may have also noticed that some just send you to twitter and you have to manually input the twitter message. Well, how about we just make a button that will automate all this for us?

I really do love it when I click on that button and twitter pops up with a pre-written message like “Check out this site : URL GOES HERE” or “Crazy CSS tutorial on backgrounds. Check it out: URL GOES HERE”, it makes it much easier for me to share my finds. Here’s a great demo.

Okay, I’m working on a new website and it has various posts on it that I want the readers to be able to automatically share on twitter. I also want to include a backlink so that their twitter followers can visit the actual article. Basically, here’s a tutorial on shortening URLs using API and for creating a twitter button.

URL shortening

As you may know, there are tons of URL shortening services. Most, including bit.ly and tinyurl.com support API services which basically means, you can use PHP (and AJAX) in order to use their services on another server. That’s BASICALLY what it means. I’m not a master of this. Bit.ly requires an account so I won’t be getting into that. I don’t want my account to be spammed with a ton of different links. But, if you want to keep track of how many people clicked and posted your link, you are more than welcome to read a tutorial on it elsewhere.

I’m not too big on tinyurl.com anymore because it requires way too many characters. And for twitter use, it’s basically useless so I browsed around and found to.ly which has really basic API info already posted. Let me copy it real quick:

function CompressURL($url) {

  $ch = curl_init();

  curl_setopt($ch, CURLOPT_URL, "http://to.ly/api.php?longurl=".urlencode($url));
  curl_setopt($ch, CURLOPT_RETURNTRANSFER,1);
  curl_setopt($ch, CURLOPT_HEADER, 0);

  $shorturl = curl_exec ($ch);
  curl_close ($ch);

  return $shorturl;

}

Add this function to your function.php, if you use an external function list (use require() to add it to your site), or just add this function in your header on your site so that whenever you call upon it later, it will be at your disposal. Now, let’s get the URL of the site you’re on. Let’s say you have a dynamic page and don’t feel like manually writing each separate link. We can use the $_SERVER variable for that. A combination actually:

echo "http://".$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].$_SERVER['QUERY_STRING'];

This will echo out the whole URL, including any GET statements you may have entered. If you don’t want those statements, erase the last $_SERVER variable. Okay, so let’s put it all together to shorten the link using the previous function:

$permalink = "http://".$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].$_SERVER['QUERY_STRING'];
$url = CompressURL ("$permalink");

Now that we have the compressed URL, let’s move on to the tweet button.

Tweet This Button!

Well, go out and find some great twitter icon. Or make your own. It’s easy. You go into photoshop and make a 150 x 50 px rectangle and write twitter in it. That’s not what this tutorial is about.
Twitter has an easy-to-use API (Is it even API?).

http://twitter.com/home?status= MESSAGE GOES HERE

So there goes the message. Very easy, no? Now, here lies the problem. What kind of message do you want? You could use different functions and variables that describe each page on your site. If you set them manually (in the META tag), use this instead so that the description is already stored for later use. In my newest site, I used the actual content of the page (a quote) for the message:

$description = "An article about php scripting and creating a simple tweet this button.";
echo $description

Twitter has a character limit of one forty, right? We can take care of that too. “substr()” is a function that will allow you to cut up your description. It works like this: substr($string, begin cut, end cut). I use a 100 character cut off:

$twittermsg = substr($description, 0, 100);

$twittermsg .= "...more on".$url;

The message is complete. A hundred character message ending with “…more on URL”. Finally, the button and link:

<a href="http://twitter.com/home?status=<?php echo $twittermsg;?>" target="_blank"> <img src="pictures/images/twitter_button.png" title="Tweet it!" onmouseover="this.src='pictures/images/twitter_button_hover.png'"
onmouseout="this.src='pictures/images/twitter_button.png'" /></a>

The “onmouseover” and “onmouseout” are used for a nice hover effect (onmouseover will be the hoveved, and onmouseout is the non-hovered). Using CSS would be a literal pain because you’d have to create a clickable div or a span…display none. Well, just trust me, this is MUCH easier.

I hope you enjoyed this short tutorial!

Check out my next tutorial for bit.ly API!

Google Social Search is a new Google feature that seems to be another addition to Google’s long list of diverse services that include AdSense, Blogspot, etc

It’s finally here, or it will be pretty soon. The “Social Search” is basically an extension to google that searches through your friend’s list on variety of social networks, including Twitter, Facebook, and Flickr. Okay, now don’t start laughing. Why do I say that? Oh COME ON! FLICKR?! Flickr is owned by Yahoo inc. who is THE competitor to Google Inc. in every way possible. Yahoo teamed up with Microsoft to create bing. Yahoo has its own Ad system, and so does Google with Google Ads.

It’s quite strange to me that Yahoo allows, willingly (or unwillingly?) Google to use Flickr in its social search.

Okay, so what’s Google Social Search?

Basically, whenever you search on Google (and you’re signed in), Google brings up its usual stuff, the webpages, a map maybe, pictures, and perhaps products. Now though, what will also come up will be your and your friends’ tweets, status updates (on facebook), pictures (on flickr) and wherever else. I have to agree, it’s a really nice idea because I don’t have to sift through thousands of tweets to find one exact one (in case I forgot to “favorite” it).

Here are a couple videos explaining the concept:


Here’s the official Google blog

PROBLEMS:

I think this whole concept is a huge problem, why?

This way, google will have access to all your data to cache and store in their databases. They will have even more data they can use for ad targetting by basically accessing your private information. This bit was for you all Google Conpiracists

Have you noticed how many link shortening services have become available? It’s crazy. Every major website even has their own. Myspace automatically converts any links posted on there to a “lnk.ms” format. There is nothing on the actual website, so you can’t use this service for your own purposes. There is tinyurl.com, bit.ly, and tons more. So let’s go over these and the features they grant us.

Why use such a service in the first place?

I think we should ask ourselves what’s the importance of these new URL shortening websites.

Reason 1. It’s simple, they make websites shorter. The best use is probably for twitter where you only have 140 characters to tell your message to others.  Here’s an example:

http://www.davepcguy.com/archive/custom-e-mail-form/

becomes

http://tinyurl.com/yzx5f4d

And already my character count has decreased from 52 to a measly 25.  Let’s go further:

bit.ly/2Sub4k

And the character count is down to 13. It’s amazing huh? Now I can write a full 127 character message instead of only 88 characters.

Reason 2. The next reason to use the url shortening services is to mask our websites. It’s not only good for spammers but everyone else as well. Let’s say I wrote an article you didn’t like, you’d probably watch out whenever I’d post an article on the same website again. If it was masked, you’d automatically give me a second chance.

Also, here’s something I commonly do. I get on good-tutorials.com and submit my tutorials. The submission is usually for others to look through and if I get enough attention, the moderators will look it over and evaluate it. Well, since I’m already posting links to my article from elsewhere, I use their link. Here, let’s look at the progress:

Original: http://www.davepcguy.com/archive/custom-e-mail-form/

Good-tutorial tracker: http://www.good-tutorials.com/track/41945

Final URL:  http://is.gd/4rTIb

No one will know that the website was redirected twice, because it happens instantaneously and I get a good measure of how many people clicked on my links through good-tutorials.com. Which is great, because not only do I know how many people visited my website, but I also boost my popularity on the online tutorial submission websites.

TinyURL.com

tinyurl website

TinyURL.com is nothing fancy but it’s a good website. I love it because it’s so simple. You type in the address, press a button and that’s it. Most links are already copied onto your clipboard. The beauty of this website is the SIMPLICITY! There are no annoying ads, there are no special effects. Just copy and paste the link and you’re done.

Features:

1. Simple, minimalistic web design
2. preview function
3. custom short URLs

Average Link Size: 25 characters

Bit.ly

Bit.ly homepage

Bit.ly is basically the opposite of tinyurl. It’s fancy and that’s good. I like the interface, the use of jQuery and it’s quite a lovely site. The best part is, you can create an account and log in. Bit.ly will monitor your previously shortened URLs and the clicks it received, as well as if anyone else shortened that link. Also, this is my own personal choice of URL shorteners.

Features:

1. Account creation
2. History (of your shortened links)
3. Tracking of clicks and link usage
4. basically features Google Analytics on the link itself
5. shorter URL than most URL shorteners (by about 10 characters)
6. Firefox toolbar

Average Links Size: 20 characters

Is.Gd

Is.GD homepage

I personally don’t use is.gd, but I really don’t have a reason why I don’t. There are just so many URL shorteners. Is.GD is similar to tinyurl.com in a way because it’s simple. You paste the address and you get the result. But you won’t get anything else.

Features:

1. Paste&Click interface

Average Link Size: 18 characters

Tr.Im

Tr.IM homepage

Lovely little site. It integrates twitter (our short URL beast!) into the process so that you can automatically tweet the link. You can create an account which will keep up with your user stats as well as any custom URLs you come up with.

Features:

1. Twitter integration
2. Google Analytics-like stats (similar to Bit.ly)
3. Custom URL (password locked)
4. Account creation

Average Link Size: 17 characters

TweetBurner

TweetBurner homepage

Despite the long name (tweetburner), its links are quite short with a “twurl.nl” root. It has a twitter integration that allows you to update twitter without having an account at tweetburner.com which is great for us busy individuals who have hundreds of accounts all over the internet.

Features:

1. Awesome twitter/friendfeed integration
2. Link tracker

Average Link Size:22 characters
I’m sure if you look around, you’ll ind many more URL shorterners but these are the best of the best as far as I’m concerned. Don’t be shy and let me know if I missed any big ones!

This morning I went to the rent-a-coder website and found a guy who actually had a project open that asked for twitter integration on WordPress. Naturally, I bid but unfortunately did not win the bid (I’ve just registered, you see) but the guy paid $10 nevertheless. So here is a short tutorial that will save you $10 or about fifteen minutes on google.

Let’s start with the easy stuff:

Twitter Updates

Plugins

1. Let’s add a twitter widget to your sidebar. Go to the plugins section of you WordPress menu on the left. Click on add new. Search for “Wickett Twitter Widget” and click on install on the right. There are lots of twitter plugins and I cannot start reviewing them all because there are so many. I just use this one because I got it first. If you’re having problem installing the plugin, consult the wordpress guide. Once you click install, the plugin should download to your wordpress directory and activate.

Twitter Widget

2. Next go to appearance > widgets. Drag the twitter rectangle from the left where it says “available widgets” to the right where it should say “sidebar”. The picture on the left should come up. Type in the title, such as “My Twitter Updates”, then your twitter account name which is the twitter.com/accountname. In my case “WAjanusdesigns”. You can set the maximum number of tweets from just one up to twenty. You can also hide replies. At the end, you can customize the text between your tweet and timestamp. Here’s an example:

“I just finished a new #CSS #tutorial, go check davepcguy.com and read it!” Alexander said 20h ago.

If you don’t want the widget anymore, simply remove it. Go to plugins > installed, and deactivate the plugin, and then you can delete it.

“Twitter THIS!”

I love those “twitter this” buttons on the bottom of almost all blogs on the internet. Well, let’s go one step further, let’s install a plugin that can “stumble this”, “facebook this”, and support tens of other websites. By far, there is one plugin that basically EVERYONE knows. It’s called “sociable”. Go to plugins > add new and type in “sociable” and it should be the first plugin to come up. Install it real quick and go down to settings > Sociable. Here’s what you’ll see:

Sociable

So above, you can you click off all the different sites you want at the end of every post you make. All of them are pre-formatted in the “twitter this!” kind of way. Try it out at the end of this post and you’ll see what I mean. You can also choose to add the “print” button as well as the “e-mail” button.
Scroll down and check out the rest of the features.

share this

Ignore the first two features, I don’t even know what they mean. The “tagline” is equivalent to the “Share and Enjoy” in the picture above. You can change it to anything else you wish to. “Position” gives you the option to customize where the above bar will show up. It can show up only at the front page, individual pages, every blog post (my choice). Next is CSS and Text Links. Leave CSS checked and text links unchecked. “Text Links” will disable images. You can switch out and use your favorite icons under “image directory”. Next you can use a “thickbox” or an “iframe”, just set the width and height. Next you can choose if the links will open new windows or just redirect the reader to the page. I’d rather the links open new windows so I left that checked. The next two options are completely up to you. Don’t forget to rate them!

Conclusion

And that’s it! Now your blog is completely integrated with twitter! There are hundreds more plugins and all offer you different features. Most though, offer you the basic features of the above plugins. If you want more from twitter, scout around and see what you can find. If you follow some of the people I do on twitter, they frequently post links to new and better twitter plugins.
I hope you enjoyed my short article! Don’t forget to try out my sociable bar right below !