Fula Fisken

Share screenshots with Sharekit and cocos2d on iPhone

Posting screenshots on Facebook and Twitter is a great way to show high scores and make your game known to the world. The problem is that writing code for authentication and poking around the different APIs is time consuming. Here is where Sharekit comes in handy. It is an open source library that add share features for many social media sites.

Setup Sharekit

There are a few things you need to do to get sharekit up and running.

• First go to sharekit and follow the installation instructions for step 1 and 2.
• Go to http://www.facebook.com/developers/ and create a Facebook app. When the app is created click on “mobile and devices” in the left hand menu and change application type to “Native App”. Save the changes and keep the window with application ID open, you will need it soon.
• Go to dev.twitter.com/apps and create a Twitter app. “Application type” should be set to “Browser”. If you don’t have a url for the game set “Callback url” to whatever you want.

Take screenshot in cocos2d

Manu Corporat has provided code for grabbing screenshots at the cocos2d forum. You can find it here. Paste the code into CCDirector.m. You can now grab a screenshot simply by calling:

//grab screenshot
UIImage *image = [[CCDirector sharedDirector] screenshotUIImage];

Add share buttons

Now you are ready to start sharing. In your .m file add

#import "SHKItem.h"
#import "SHKTwitter.h"
#import "SHKFacebook.h"

and methods for adding share buttons

-(void)showShareMenu {
    CGSize size = [[CCDirector sharedDirector] winSize];
    
    CCLabelTTF *share = [CCLabelTTF labelWithString:@"Share on" fontName:@"Helvetica" fontSize:24];
	share.position = ccp(size.width /2, 80);
	[self addChild:share];
    
    CCMenuItemSprite *fbItem = [CCMenuItemSprite itemFromNormalSprite:[CCSprite spriteWithFile:@"facebook.png"] 
                                                       selectedSprite:[CCSprite spriteWithFile:@"facebook.png"] 
                                                               target:self selector:@selector(shareOnFacebook)];	
    
    CCMenuItemSprite *twitterItem = [CCMenuItemSprite itemFromNormalSprite:[CCSprite spriteWithFile:@"twitter.png"] 
                                                            selectedSprite:[CCSprite spriteWithFile:@"twitter.png"] 
                                                                    target:self selector:@selector(shareOnTwitter)];

    CCMenu *shareMenu = [CCMenu menuWithItems:fbItem, twitterItem, nil];
    [shareMenu alignItemsHorizontallyWithPadding:10.0f];
    shareMenu.position = ccp(size.width /2, 40);
    [self addChild:shareMenu];
}

-(void)shareOnFacebook {   
    //take screenshot
    UIImage *image = [[CCDirector sharedDirector] screenshotUIImageFromHeight:200];
        
    SHKItem *fbItem = [SHKItem image:image title:@"Check out my highscore!"];
    [SHKFacebook shareItem:fbItem];
}

-(void)shareOnTwitter {
    //take screenshot
    UIImage *image = [[CCDirector sharedDirector] screenshotUIImageFromHeight:200];
    
    SHKItem *twitterItem = [SHKItem image:image title:@"Check out my highscore! #BigFish"];
    [SHKTwitter shareItem:twitterItem];
}

The only thing remaining is to give Sharekit access to a UIViewController. The easiest way is to add a UIViewController property and set it on init.

-(id) init
{
	if( (self=[super init])) 
	{
		//ViewController for share.
		self.vc =[[UIViewController alloc] init];
		[[[CCDirector sharedDirector] openGLView] addSubview:vc.view];
		[[SHK currentHelper] setRootViewController:vc];

		[self showHighscore];
		[self showShareMenu];
	}
	return self;
}

Example project

Here’s a working cocos2d project. Just add your API keys to SHKConfig.h. The code for screenshots has been altered slightly to only take part of the screen area as screenshot. This way the share button will not be part of the image.