Canyon R

Google Plus - Social for small conversations

The thrust of many Google+ conversations is, understandably, about how it compares as a service to Twitter and Facebook. This also comprises many of the reviews that have been posted so far. The points generally conclude that it’s not as good at one use case or another. I think that the real difference is that the services are optimized for different ways of sharing. Each taking from the others in subtle ways but still basically designed for different tasks.

I believe that Google+ is optimized for communicating with small groups of 5 to 15 people. It is not designed to easily communicate with the “Public”. Many of the complaints about the way the service works relate to it not working as well for these general public conversations as Twitter does. This is because Twitter is optimized for these conversations. It easily allows a many to many conversation but completely ignores the Few to Few conversations. These are the exact conversations that G+ is setup for.

When looking at 5-15 people Circles many of the functions that people are complaining about become great benefits. Take, for example, the “post move to the top when commented on” ordering of your Stream. This feature fails when trying to follow large public figures who have many comments from their other followers. But for a conversation happening with a circle of 8 friends, it helps to keep you engaged as everyone adds their comments.

The private nature of the Circle itself also lends to this conversation. Facebook groups are public lists that allow conversations among a diverse and unconnected group with a similar interest. Where Circles provide a context group within your own definition. For example, I may have a “tennis” group of friend, of which Brian is a member. He may also have a “tennis” circle, with people that he relates to “tennis” which I happen to be a member of. Yet when I share with my tennis circle, the members of his tennis circle don’t see it unless he chooses to re-share it with them. This is not a flaw but is by design, this is the kind of sharing I wan’t and wasn’t able to easily get anywhere else.

The reason, I believe that many of the people who are on G+ now have these complaints is that they are media and technology people who interact with their “public” on social networks and not just with their Circles of Friends. I only hope that user’s requests don’t try to turn G+ into Facebook or Twitter by asking to remove or change the things that make it different. I hope it’s allowed to grow into it’s own service, with it’s own optimizations and social norms.

Adding Twitter and Facebook buttons to Tumblr

I just finished adding the tweet and like buttons to my site and was amazed how both simple and complicated it was. I found many good sites with helpful information but none had the exact combination I was looking for. So here is how I finally got it to work the way I wanted. Hopefully this will be as helpful to someone else as the other pages I found were to me.

Let me start by thanking the Author of the Tumblr theme. I am using a heavily modified version of the Netpad theme from Jumplex. It offered a great starting point that was very close to what I wanted, but more importantly it was very cleanly put together and easy to modify. Thank you Jumplex, your work is very appreciated.

This theme has many nice features, including Disqus and Google Analytics support. But I wanted to add support for Twitter and Facebook buttons. The first place you might start, as I did, is the Facebook “like box” page. This page offers a wizard for configuring your like box.

It produces a code block that can be used to put the info box on the page. It offers both an iframe and an xfbml option. I chose the xfbml option because I was going to be putting both a site like box and a like button on each post.

<script src=”http://connect.facebook.net/en_US/all.js#xfbml=1”></script> <fb:like-box href="http://www.facebook.com/pages/CanyonRcom/189359354428289" width="225" show_faces="false" stream="false" header="true"></fb:like-box>

But the code produced doesn’t fit smoothly into the dynamic nature of the Tumblr template engine. So I moved the script tag into the <head> section of the template.

<script src=”http://connect.facebook.net/en_US/all.js#xfbml=1”></script>

I then added a meta tag to the template.

<meta name="text:Facebook URL" content="" />

This puts an entry under the Appearance menu to input the URL of the facebook page. I was then able to add my facebook page address to those settings.

http://www.facebook.com/pages/CanyonRcom/189359354428289

And I added this block to the code for the sidebar layout.

{block:ifFacebookURL}
<fb:like-box href="{text:Facebook URL}" width="225" show_faces="false" stream="false" header="true"></fb:like-box>
{/block:ifFacebookURL}

This gave me a site wide box linked to my facebook page for the site.

Now to get twitter and facebook buttons for the individual posts.

Again Face book offers a wizard for the like button that allows customization the layout of the button and presents a code block to insert into a page.

In similar fashon to the like box, the button offers both and iframe and xfbml code. This code is a good starting point but isn’t perfect because I need a custom URL for each posting.

<script src=”http://connect.facebook.net/en_US/all.js#xfbml=1”></script> <fb:like href="http://canyonr.com/post/3355399522/online-safety-info-for-your-non-tech-friends" layout="button_count" show_faces="false" width="55"></fb:like>

The script tag is the same one I already added to the <head> of our theme. This allows me to focus on the fb:like tag. It currently contains the URL of a specific article, I needed to substitute the code for each article. The Tumblr theme docs gives the {Permalink} variable that I can use to insert the URL for each article. Fortunately several other pages suggest using the {URLEncodedPermalink} variable instead. This gives a small block of code to insert to get the like button.

<fb:like href="{URLEncodedPermalink}" layout="button_count" show_faces="false"></fb:like>

Now, where to place it. I put it with in the <div class="detail"> and <div class="ndp"> portions of the theme. For other themes, it can be included at the end of the section that shows up at the bottom of each post.

The twitter button is slightly more complex because of the options they allow. The wizard for the Tweet button only gives a few settings but the dev page lists all of the properties that can be passed.

Once again we get a script tag to add to the <head> of our theme.

<script type=”text/javascript” src=”http://platform.twitter.com/widgets.js”></script>

The twitter button is an <a> tag in order to facilitate browsers that don’t support scripting. I modified the default tag to include several options, most importantly the data-url setting. By using Tumblr’s {ShortURL} tag I was able to send the same shortened URL to twitter that Tumbler’s built in twitter posting uses. I also added a | after the {Title} to give a little visual seperation to the URL.

<a href="http://twitter.com/share" class="twitter-share-button" data-url="{ShortURL}" data-text="{Title} |" data-count="none" data-via="canyon">Tweet</a>

I placed the Tweet button infront of the Like button because when the page has no likes the number baloon isn’t present but the space is still there. Since I wasn’t going to show the count for the tweets, I think it looked better in that order.

But wait, they aren’t lined up. The Tweet button is at least 6 pixels higher than the Like button. What a travesty. Why wouldn’t the competing social giants work together to make sure there buttons looked good together. Turns out this is configured to look correct in IE and looks wrong in Chrome. After much searching I found some ideas on how to resolve this and decided on creating two new span areas to contain the buttons and “fixing” the floating property for each.

I attached some CSS to the end of the section for the containing <div> tags.

#content .detail .ndp .social_buttons {
vertical-align: top;
}
#content .detail .ndp .social_buttons .twitter {
vertical-align: middle;
}

I then wrapped the buttons in corresponding <span> tags. My final button code is:

<span class="social_buttons">
<span class="twitter">
<a href="http://twitter.com/share" class="twitter-share-button" data-url="{ShortURL}" data-text="{Title} |" data-count="none" data-via="canyon">Tweet</a>
</span>
<fb:like href="{URLEncodedPermalink}" layout="button_count" show_faces="false"></fb:like>
</span>

This, somehow, gets the buttons to line up and look correct in both browsers.

And now I have Facebook and Twitter integration for each post and for my site as a whole. I hope this helps the next person who is trying to decipher the confusing realm of social buttons and tumbler themes.