Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Designing for the Social Web: 
What your Social Media Manager Wants to Tell You 
@EricTTung, Social Media Manager, @BMCSof...
Hi, I’m @EricTTung (Shameless Follow Plug) 
Social Media Manager from 
@BMCSoftware 
Recently ranked #33 Social 
Media P...
What We’re Noodlin’ About 
 Why Optimize Web and Graphics for Social? 
 Designing for Social Profiles & Posts 
 Social ...
Why Optimize Web and Graphics 
for Social? 
Well, because it’s prettier?
“A brand is no longer 
what we tell the consumer 
it is – it is what consumers 
tell each other it is.” 
- Scott Cook, co-...
Social Networking is 
HUGE. 
World Populations 
China 1,360M 
India 1,241M 
1,060M 
560M 
400M 
USA 317M 
Indonesia 249M 
...
Who’s on Social? 
55-64: Fastest growth on 
Twitter (79%) 
45-54: Fastest growth on 
Facebook (46%) 
and Google+ (56%)
Who’s on Social? 
1000 B2B Global Buyers Surveyed by IBM: 
33% already used social to engage with vendors 
75% likely to u...
55% in B2B search for info on social 
Reported by Business.com 
70% of a buyer’s journey is complete 
before it gets to sa...
78.6% 
of salespeople using Social Media 
outsold their peers. 
Reported by A Sales Guy Consulting
Online Conversation with Prospects 
Accelerate Deals 
Social Network Usage 
41% 60% 
Micro-Blogging 
21% 39%
94% 
increase in web 
click-through when 
search & social 
combined 
eMarketer
Tweets with 
photos are 
94% more 
likely to be 
retweeted. 
Dan Zarrella, Hubspot
Photos on 
Facebook 
Generate 
53% More 
Likes. 
Rebecca Corliss, Hubspot
Besides.. It Just Sucks When This Happens.
Designing for Social Networks 
Ya, Why can’t they just keep these the same for a few months?
Facebook Page Graphics 
851x315 
180x180 
(displays as 
160x160)
Facebook Feed Graphics 
1200x1200 
1200x627
Twitter – Updated April 22! 
1500x500 
400 
x 
400
Tweeted Images 
880x440 recommended 
If Square Will Take Middle 1/2
Use the Social Image Maker 
erict.co/SocialImageMaker
Social Media Widgets for Web 
Widgets, Widgets, get your Widgets!
Why Integrate with Facebook? 
 The average media site integrated with Facebook has seen a 300% 
increase in referral traf...
Facebook Social Plugins 
 Like Button: share pages and content from your site back to their 
Facebook profile 
 Share Bu...
American Eagle’s Like Button 
 American Eagle 
added the Like 
button next to every 
product on their site. 
Facebook-ref...
Facebook Social Plugins 
 Embedded Post: put public posts - by a Page or a person on 
Facebook - into the content of your...
Facebook Social Plugins 
 Follow Button: lets people subscribe to the public updates of others 
on Facebook. 
 Comments:...
Facebook Social Plugins 
 Activity feed displays the most interesting, 
recent activity taking place on your site, 
using...
Facebook Social Plugins 
 Like Box is a special version of the 
Like Button designed only for 
Facebook Pages. It allows ...
Twitter Widgets 
 Embedded Timelines: You 
can embed a timeline for 
Tweets from an individual 
user, a user's favorites,...
Twitter Widgets 
 Favorites: a favorites timeline may be created for any public Twitter 
user, and displays that user's f...
Grabbing Code for Twitter Widgets
Where Should Sharing Buttons Go on Blogs? 
Top or Bottom? 
Or middle if it’s a long post? 
Research shows do both top a...
Using Open Graph & Cards 
Force Facebook & Twitter to Use Imagery You Want Them To
WTF is OG? Original Gangsta’? 
Facebook Open Graph tags are included in the 
HTML and allow the Facebook Crawler to 
gene...
Sorry Big Design, but What Gives? 
 Sorry for the callout, but 
sharing the Big Design Website 
yields nothing on Faceboo...
Nobody Really Likes Radio Web Design, 
 But they used Facebook Open 
Graph to customize the image 
and description!
Facebook Open Graph Tags 
 og:title – The title of your article, excluding any branding. 
 og:site_name - The name of yo...
Facebook Open Graph Tips 
 Learn what people like to share (if you have a Facebook Page, use 
Insights) 
 Check Facebook...
What are Twitter Cards? 
With Twitter Cards, you can attach rich photos, videos 
and media experience to Tweets that driv...
You’ve Seen YouTube Embeds into Twitter, 
 Here’s one from my company, 
BMC Software. 
 Twitter grabs the video and 
emb...
Also Works for Flickr, Vimeo and Others…
And For Your Own Site! 
 All you have to do is add the Twitter 
Card code.
Twitter Card Tags 
 twitter:site - @username for the website used in the card footer. 
 twitter:site:id - Same as twitte...
Twitter Card Tips 
 Specify the type of card for your content (summary, photo, gallery, 
product, app, or player) 
 Each...
Recap 
Social is big – use it to drive pageviews. 
Format images correctly for networks for maximum 
engagement. 
Use a...
Download this Presentation: 
erict.co/TheBigD
Thank You! – Questions?
Designing for the Social Web: Integrating Social Media into Web Design
Nächste SlideShare
Wird geladen in …5
×

Designing for the Social Web: Integrating Social Media into Web Design

1.372 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Soziale Medien
  • Als Erste(r) kommentieren

Designing for the Social Web: Integrating Social Media into Web Design

  1. 1. Designing for the Social Web: What your Social Media Manager Wants to Tell You @EricTTung, Social Media Manager, @BMCSoftware
  2. 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. 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. 4. Why Optimize Web and Graphics for Social? Well, because it’s prettier?
  5. 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. 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. 7. Who’s on Social? 55-64: Fastest growth on Twitter (79%) 45-54: Fastest growth on Facebook (46%) and Google+ (56%)
  8. 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. 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. 10. 78.6% of salespeople using Social Media outsold their peers. Reported by A Sales Guy Consulting
  11. 11. Online Conversation with Prospects Accelerate Deals Social Network Usage 41% 60% Micro-Blogging 21% 39%
  12. 12. 94% increase in web click-through when search & social combined eMarketer
  13. 13. Tweets with photos are 94% more likely to be retweeted. Dan Zarrella, Hubspot
  14. 14. Photos on Facebook Generate 53% More Likes. Rebecca Corliss, Hubspot
  15. 15. Besides.. It Just Sucks When This Happens.
  16. 16. Designing for Social Networks Ya, Why can’t they just keep these the same for a few months?
  17. 17. Facebook Page Graphics 851x315 180x180 (displays as 160x160)
  18. 18. Facebook Feed Graphics 1200x1200 1200x627
  19. 19. Twitter – Updated April 22! 1500x500 400 x 400
  20. 20. Tweeted Images 880x440 recommended If Square Will Take Middle 1/2
  21. 21. Use the Social Image Maker erict.co/SocialImageMaker
  22. 22. Social Media Widgets for Web Widgets, Widgets, get your Widgets!
  23. 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. 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. 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. 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. 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. 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. 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. 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. 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. 32. Grabbing Code for Twitter Widgets
  33. 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. 34. Using Open Graph & Cards Force Facebook & Twitter to Use Imagery You Want Them To
  35. 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. 36. Sorry Big Design, but What Gives?  Sorry for the callout, but sharing the Big Design Website yields nothing on Facebook…
  37. 37. Nobody Really Likes Radio Web Design,  But they used Facebook Open Graph to customize the image and description!
  38. 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. 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. 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. 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. 42. Also Works for Flickr, Vimeo and Others…
  43. 43. And For Your Own Site!  All you have to do is add the Twitter Card code.
  44. 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. 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. 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. 47. Download this Presentation: erict.co/TheBigD
  48. 48. Thank You! – Questions?

×