How to design graphics for social media pages posts, how to use Facebook Plugins and Twitter Widgets to add social capabilities to your website, and how to use Facebook Open Graph and Twitter Cards to help increase engagement of social posts from your website.

1. Designing for the Social Web:
What your Social Media Manager Wants to Tell You
@EricTTung, Social Media Manager, @BMCSoftware

2. Hi, I’m @EricTTung (Shameless Follow Plug)
Social Media Manager from
@BMCSoftware
Recently ranked #33 Social
Media Professional in the World
by Forbes!
Designed my first website when I
was 12…

3. What We’re Noodlin’ About
 Why Optimize Web and Graphics for Social?
 Designing for Social Profiles & Posts
 Social Widgets for Web Design
 Using Facebook & Twitter Open Graph & Cards

4. Why Optimize Web and Graphics
for Social?
Well, because it’s prettier?

5. “A brand is no longer
what we tell the consumer
it is – it is what consumers
tell each other it is.”
- Scott Cook, co-founder Intuit, Board
Member Ebay, P&G

6. Social Networking is
HUGE.
World Populations
China 1,360M
India 1,241M
1,060M
560M
400M
USA 317M
Indonesia 249M
240M
Brazil 201M
Pakistan 185M
Nigeria 173M
150M

7. Who’s on Social?
55-64: Fastest growth on
Twitter (79%)
45-54: Fastest growth on
Facebook (46%)
and Google+ (56%)

8. Who’s on Social?
1000 B2B Global Buyers Surveyed by IBM:
33% already used social to engage with vendors
75% likely to use social in purchasing in the future

9. 55% in B2B search for info on social
Reported by Business.com
70% of a buyer’s journey is complete
before it gets to sales
according to Sirius Decisions

10. 78.6%
of salespeople using Social Media
outsold their peers.
Reported by A Sales Guy Consulting

11. Online Conversation with Prospects
Accelerate Deals
Social Network Usage
41% 60%
Micro-Blogging
21% 39%

12. 94%
increase in web
click-through when
search & social
combined
eMarketer

13. Tweets with
photos are
94% more
likely to be
retweeted.
Dan Zarrella, Hubspot

14. Photos on
Facebook
Generate
53% More
Likes.
Rebecca Corliss, Hubspot

15. Besides.. It Just Sucks When This Happens.

16. Designing for Social Networks
Ya, Why can’t they just keep these the same for a few months?

17. Facebook Page Graphics
851x315
180x180
(displays as
160x160)

18. Facebook Feed Graphics
1200x1200
1200x627

19. Twitter – Updated April 22!
1500x500
400
x
400

20. Tweeted Images
880x440 recommended
If Square Will Take Middle 1/2

21. Use the Social Image Maker
erict.co/SocialImageMaker

22. Social Media Widgets for Web
Widgets, Widgets, get your Widgets!

23. Why Integrate with Facebook?
 The average media site integrated with Facebook has seen a 300%
increase in referral traffic
 Users coming to NHL.com from Facebook spend 85% more time,
read 90% more articles and watch 85% more videos than a non-connected
user.
 Outdoor sporting goods retailer Giantnerd.com saw a 100%
increase in revenue from Facebook within two weeks of adding the
Like button.

24. Facebook Social Plugins
 Like Button: share pages and content from your site back to their
Facebook profile
 Share Button: share to Facebook, share with particular friends or
with a group or via private message.
 Send Button: privately send content on your site to one or more
friends in a Facebook message, email address, or group

25. American Eagle’s Like Button
 American Eagle
added the Like
button next to every
product on their site.
Facebook-referred
visitors spent an
average of 57% more
money than visitors
who weren’t.

26. Facebook Social Plugins
 Embedded Post: put public posts - by a Page or a person on
Facebook - into the content of your web site or web page

27. Facebook Social Plugins
 Follow Button: lets people subscribe to the public updates of others
on Facebook.
 Comments: lets people comment on content on your site using
their Facebook profile and shows this activity to their friends in news
feed

28. Facebook Social Plugins
 Activity feed displays the most interesting,
recent activity taking place on your site,
using actions (such as likes) by your friends
and other people.
 The Recommendations feed displays the
most recommended content on your site,
using actions (such as likes) by your friends
and other people. It is different from the
Activity feed which displays recent actions
on your site.

29. Facebook Social Plugins
 Like Box is a special version of the
Like Button designed only for
Facebook Pages. It allows admins
to promote their Pages and
embed a simple feed of content
from a Page into other sites.
 The Facepile plugin displays the
Facebook profile photos of
people who have connected with
your Facebook page or app.

30. Twitter Widgets
 Embedded Timelines: You
can embed a timeline for
Tweets from an individual
user, a user's favorites,
Twitter lists, or any search
query or hashtag.

31. Twitter Widgets
 Favorites: a favorites timeline may be created for any public Twitter
user, and displays that user's favorited Tweets.
 Tweets from a specific list of users. The header of the list widget
contains the list name, description, and links to the list creator's
profile. Retweets by members of the list are included in the timeline.
 Search and #Hashtag: create a search timeline for any query or
#hashtag. You may also choose to enable “safe mode”, which will
exclude Tweets with common profanity and those marked possibly
sensitive from appearing on your website.

32. Grabbing Code for Twitter Widgets

33. Where Should Sharing Buttons Go on Blogs?
Top or Bottom?
Or middle if it’s a long post?
Research shows do both top and bottom for
best results!

34. Using Open Graph & Cards
Force Facebook & Twitter to Use Imagery You Want Them To

35. WTF is OG? Original Gangsta’?
Facebook Open Graph tags are included in the
HTML and allow the Facebook Crawler to
generate previews when your content is shared on
Facebook.

36. Sorry Big Design, but What Gives?
 Sorry for the callout, but
sharing the Big Design Website
yields nothing on Facebook…

37. Nobody Really Likes Radio Web Design,
 But they used Facebook Open
Graph to customize the image
and description!

38. Facebook Open Graph Tags
 og:title – The title of your article, excluding any branding.
 og:site_name - The name of your website. Not the URL, but the name. (i.e. "IMDb" not
"imdb.com".)
 og:url – This URL serves as the unique identifier for your post. It should match your
canonical URL used for SEO, and it should not include any session variables, user
identifying parameters, or counters. If you use this improperly, likes and shares will not be
aggregated for this URL and will be spread across all of the variations of the URL.
 og:description – A detailed description of the piece of content, usually between 2 and
4 sentences. This tag is technically optional, but can improve the rate at which links are
read and shared.
 og:image – This is an image associated with your media. We suggest that you use an
image of at least 1200x630 pixels.
 fb:app_id – The unique ID that lets Facebook know the identity of your site. This is crucial
for Facebook Insights to work properly. Please see our Insights documentation to learn
more. erict.co/FacebookOG

39. Facebook Open Graph Tips
 Learn what people like to share (if you have a Facebook Page, use
Insights)
 Check Facebook Crawler settings for public and private content.
 Use proper Open Graph Tags.
 Optimize image sizes to generate great previews (1200x630
preferred, 600x315 minimum)
 Use Open Graph Debug Tool
 Encourage Your Content Creators to turn on Follow.
 Get more info: erict.co/FacebookOG

40. What are Twitter Cards?
With Twitter Cards, you can attach rich photos, videos
and media experience to Tweets that drive traffic to your
website. Simply add a few lines of HTML to your webpage,
and users who Tweet links to your content will have a
"Card" added to the Tweet that’s visible to all of their
followers.

41. You’ve Seen YouTube Embeds into Twitter,
 Here’s one from my company,
BMC Software.
 Twitter grabs the video and
embeds into the Twitter Stream

42. Also Works for Flickr, Vimeo and Others…

43. And For Your Own Site!
 All you have to do is add the Twitter
Card code.

44. Twitter Card Tags
 twitter:site - @username for the website used in the card footer.
 twitter:site:id - Same as twitter:site, but the website's Twitter
user ID instead. Note that user ids never change, while @usernames
can be changed by the user.
 twitter:creator - @username for the content creator / author.
 twitter:creator:id- Same as twitter:creator, but the Twitter
user's ID.
erict.co/TwitterDev

45. Twitter Card Tips
 Specify the type of card for your content (summary, photo, gallery,
product, app, or player)
 Each card has built-in content attribution by website or content
creator
 Twitter’s crawlers will respect robots.txt when scanning URLs
When multiple URLs are tweeted, preference goes to
pic.twitter.com and vine.com, then URLs processed in order of
appearance.
 Twitter’s Card Processor looks for Twitter tags first. If not present, will
fall back to Open Graph.

46. Recap
Social is big – use it to drive pageviews.
Format images correctly for networks for maximum
engagement.
Use appropriate social widgets to make sharing your web
content easier.
Use Facebook Open Graph and Twitter Cards to make
shared web content more engaging.
Follow me @EricTTung

47. Download this Presentation:
erict.co/TheBigD

48. Thank You! – Questions?