Designing for the Social Web: Integrating Social Media into Web Design
-
Upload
eric-t-tung -
Category
Social Media
-
view
441 -
download
1
description
Transcript of Designing for the Social Web: Integrating Social Media into Web Design
![Page 1: Designing for the Social Web: Integrating Social Media into Web Design](https://reader035.fdocuments.us/reader035/viewer/2022062613/545564c8af795994188b489e/html5/thumbnails/1.jpg)
Designing for the Social Web:What your Social Media Manager Wants to Tell You
@EricTTung, Social Media Manager, @BMCSoftware
![Page 2: Designing for the Social Web: Integrating Social Media into Web Design](https://reader035.fdocuments.us/reader035/viewer/2022062613/545564c8af795994188b489e/html5/thumbnails/2.jpg)
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…
![Page 3: Designing for the Social Web: Integrating Social Media into Web Design](https://reader035.fdocuments.us/reader035/viewer/2022062613/545564c8af795994188b489e/html5/thumbnails/3.jpg)
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
![Page 4: Designing for the Social Web: Integrating Social Media into Web Design](https://reader035.fdocuments.us/reader035/viewer/2022062613/545564c8af795994188b489e/html5/thumbnails/4.jpg)
Why Optimize Web and Graphics for Social?
Well, because it’s prettier?
![Page 5: Designing for the Social Web: Integrating Social Media into Web Design](https://reader035.fdocuments.us/reader035/viewer/2022062613/545564c8af795994188b489e/html5/thumbnails/5.jpg)
“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
![Page 6: Designing for the Social Web: Integrating Social Media into Web Design](https://reader035.fdocuments.us/reader035/viewer/2022062613/545564c8af795994188b489e/html5/thumbnails/6.jpg)
Social Networking is
HUGE.World Populations
China 1,360M India 1,241M
1,060M560M400M
USA 317M Indonesia 249M
240MBrazil 201M
Pakistan 185MNigeria 173M
150M
![Page 7: Designing for the Social Web: Integrating Social Media into Web Design](https://reader035.fdocuments.us/reader035/viewer/2022062613/545564c8af795994188b489e/html5/thumbnails/7.jpg)
Who’s on Social?55-64: Fastest growth on
Twitter (79%)45-54: Fastest growth on
Facebook (46%) and Google+ (56%)
![Page 8: Designing for the Social Web: Integrating Social Media into Web Design](https://reader035.fdocuments.us/reader035/viewer/2022062613/545564c8af795994188b489e/html5/thumbnails/8.jpg)
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
![Page 9: Designing for the Social Web: Integrating Social Media into Web Design](https://reader035.fdocuments.us/reader035/viewer/2022062613/545564c8af795994188b489e/html5/thumbnails/9.jpg)
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
![Page 10: Designing for the Social Web: Integrating Social Media into Web Design](https://reader035.fdocuments.us/reader035/viewer/2022062613/545564c8af795994188b489e/html5/thumbnails/10.jpg)
78.6% of salespeople using Social Media
outsold their peers. Reported by A Sales Guy Consulting
![Page 11: Designing for the Social Web: Integrating Social Media into Web Design](https://reader035.fdocuments.us/reader035/viewer/2022062613/545564c8af795994188b489e/html5/thumbnails/11.jpg)
Online Conversation with Prospects Accelerate Deals
Social Network Usage
41% 60%
Micro-Blogging21%
39%
![Page 12: Designing for the Social Web: Integrating Social Media into Web Design](https://reader035.fdocuments.us/reader035/viewer/2022062613/545564c8af795994188b489e/html5/thumbnails/12.jpg)
94% increase in web click-through
when search & social combined
eMarketer
![Page 13: Designing for the Social Web: Integrating Social Media into Web Design](https://reader035.fdocuments.us/reader035/viewer/2022062613/545564c8af795994188b489e/html5/thumbnails/13.jpg)
Tweets with photos are 94% more likely to be retweeted.Dan Zarrella, Hubspot
![Page 14: Designing for the Social Web: Integrating Social Media into Web Design](https://reader035.fdocuments.us/reader035/viewer/2022062613/545564c8af795994188b489e/html5/thumbnails/14.jpg)
Photos on Facebook Generate 53% More Likes.Rebecca Corliss, Hubspot
![Page 15: Designing for the Social Web: Integrating Social Media into Web Design](https://reader035.fdocuments.us/reader035/viewer/2022062613/545564c8af795994188b489e/html5/thumbnails/15.jpg)
Besides.. It Just Sucks When This Happens.
![Page 16: Designing for the Social Web: Integrating Social Media into Web Design](https://reader035.fdocuments.us/reader035/viewer/2022062613/545564c8af795994188b489e/html5/thumbnails/16.jpg)
Designing for Social Networks
Ya, Why can’t they just keep these the same for a few months?
![Page 17: Designing for the Social Web: Integrating Social Media into Web Design](https://reader035.fdocuments.us/reader035/viewer/2022062613/545564c8af795994188b489e/html5/thumbnails/17.jpg)
Facebook Page Graphics
851x315
180x180(displays as160x160)
![Page 18: Designing for the Social Web: Integrating Social Media into Web Design](https://reader035.fdocuments.us/reader035/viewer/2022062613/545564c8af795994188b489e/html5/thumbnails/18.jpg)
Facebook Feed Graphics
1200x1200
1200x627
![Page 19: Designing for the Social Web: Integrating Social Media into Web Design](https://reader035.fdocuments.us/reader035/viewer/2022062613/545564c8af795994188b489e/html5/thumbnails/19.jpg)
Twitter – Updated April 22!
1500x500
400x
400
![Page 20: Designing for the Social Web: Integrating Social Media into Web Design](https://reader035.fdocuments.us/reader035/viewer/2022062613/545564c8af795994188b489e/html5/thumbnails/20.jpg)
Tweeted Images
880x440 recommendedIf Square Will Take Middle 1/2
![Page 21: Designing for the Social Web: Integrating Social Media into Web Design](https://reader035.fdocuments.us/reader035/viewer/2022062613/545564c8af795994188b489e/html5/thumbnails/21.jpg)
Use the Social Image Maker
erict.co/SocialImageMaker
![Page 22: Designing for the Social Web: Integrating Social Media into Web Design](https://reader035.fdocuments.us/reader035/viewer/2022062613/545564c8af795994188b489e/html5/thumbnails/22.jpg)
Social Media Widgets for Web
Widgets, Widgets, get your Widgets!
![Page 23: Designing for the Social Web: Integrating Social Media into Web Design](https://reader035.fdocuments.us/reader035/viewer/2022062613/545564c8af795994188b489e/html5/thumbnails/23.jpg)
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.
![Page 24: Designing for the Social Web: Integrating Social Media into Web Design](https://reader035.fdocuments.us/reader035/viewer/2022062613/545564c8af795994188b489e/html5/thumbnails/24.jpg)
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
![Page 25: Designing for the Social Web: Integrating Social Media into Web Design](https://reader035.fdocuments.us/reader035/viewer/2022062613/545564c8af795994188b489e/html5/thumbnails/25.jpg)
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.
![Page 26: Designing for the Social Web: Integrating Social Media into Web Design](https://reader035.fdocuments.us/reader035/viewer/2022062613/545564c8af795994188b489e/html5/thumbnails/26.jpg)
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
![Page 27: Designing for the Social Web: Integrating Social Media into Web Design](https://reader035.fdocuments.us/reader035/viewer/2022062613/545564c8af795994188b489e/html5/thumbnails/27.jpg)
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
![Page 28: Designing for the Social Web: Integrating Social Media into Web Design](https://reader035.fdocuments.us/reader035/viewer/2022062613/545564c8af795994188b489e/html5/thumbnails/28.jpg)
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.
![Page 29: Designing for the Social Web: Integrating Social Media into Web Design](https://reader035.fdocuments.us/reader035/viewer/2022062613/545564c8af795994188b489e/html5/thumbnails/29.jpg)
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.
![Page 30: Designing for the Social Web: Integrating Social Media into Web Design](https://reader035.fdocuments.us/reader035/viewer/2022062613/545564c8af795994188b489e/html5/thumbnails/30.jpg)
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.
![Page 31: Designing for the Social Web: Integrating Social Media into Web Design](https://reader035.fdocuments.us/reader035/viewer/2022062613/545564c8af795994188b489e/html5/thumbnails/31.jpg)
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.
![Page 32: Designing for the Social Web: Integrating Social Media into Web Design](https://reader035.fdocuments.us/reader035/viewer/2022062613/545564c8af795994188b489e/html5/thumbnails/32.jpg)
Grabbing Code for Twitter Widgets
![Page 33: Designing for the Social Web: Integrating Social Media into Web Design](https://reader035.fdocuments.us/reader035/viewer/2022062613/545564c8af795994188b489e/html5/thumbnails/33.jpg)
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!
![Page 34: Designing for the Social Web: Integrating Social Media into Web Design](https://reader035.fdocuments.us/reader035/viewer/2022062613/545564c8af795994188b489e/html5/thumbnails/34.jpg)
Using Open Graph & Cards
Force Facebook & Twitter to Use Imagery You Want Them To
![Page 35: Designing for the Social Web: Integrating Social Media into Web Design](https://reader035.fdocuments.us/reader035/viewer/2022062613/545564c8af795994188b489e/html5/thumbnails/35.jpg)
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.
![Page 36: Designing for the Social Web: Integrating Social Media into Web Design](https://reader035.fdocuments.us/reader035/viewer/2022062613/545564c8af795994188b489e/html5/thumbnails/36.jpg)
Sorry Big Design, but What Gives?
Sorry for the callout, but sharing the Big Design Website yields nothing on Facebook…
![Page 37: Designing for the Social Web: Integrating Social Media into Web Design](https://reader035.fdocuments.us/reader035/viewer/2022062613/545564c8af795994188b489e/html5/thumbnails/37.jpg)
Nobody Really Likes Radio Web Design,
But they used Facebook Open Graph to customize the image and description!
![Page 38: Designing for the Social Web: Integrating Social Media into Web Design](https://reader035.fdocuments.us/reader035/viewer/2022062613/545564c8af795994188b489e/html5/thumbnails/38.jpg)
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
![Page 39: Designing for the Social Web: Integrating Social Media into Web Design](https://reader035.fdocuments.us/reader035/viewer/2022062613/545564c8af795994188b489e/html5/thumbnails/39.jpg)
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
![Page 40: Designing for the Social Web: Integrating Social Media into Web Design](https://reader035.fdocuments.us/reader035/viewer/2022062613/545564c8af795994188b489e/html5/thumbnails/40.jpg)
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.
![Page 41: Designing for the Social Web: Integrating Social Media into Web Design](https://reader035.fdocuments.us/reader035/viewer/2022062613/545564c8af795994188b489e/html5/thumbnails/41.jpg)
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
![Page 42: Designing for the Social Web: Integrating Social Media into Web Design](https://reader035.fdocuments.us/reader035/viewer/2022062613/545564c8af795994188b489e/html5/thumbnails/42.jpg)
Also Works for Flickr, Vimeo and Others…
![Page 43: Designing for the Social Web: Integrating Social Media into Web Design](https://reader035.fdocuments.us/reader035/viewer/2022062613/545564c8af795994188b489e/html5/thumbnails/43.jpg)
And For Your Own Site!
All you have to do is add the Twitter Card code.
![Page 44: Designing for the Social Web: Integrating Social Media into Web Design](https://reader035.fdocuments.us/reader035/viewer/2022062613/545564c8af795994188b489e/html5/thumbnails/44.jpg)
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
![Page 45: Designing for the Social Web: Integrating Social Media into Web Design](https://reader035.fdocuments.us/reader035/viewer/2022062613/545564c8af795994188b489e/html5/thumbnails/45.jpg)
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.
![Page 46: Designing for the Social Web: Integrating Social Media into Web Design](https://reader035.fdocuments.us/reader035/viewer/2022062613/545564c8af795994188b489e/html5/thumbnails/46.jpg)
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
![Page 47: Designing for the Social Web: Integrating Social Media into Web Design](https://reader035.fdocuments.us/reader035/viewer/2022062613/545564c8af795994188b489e/html5/thumbnails/47.jpg)
Download this Presentation:erict.co/TheBigD
![Page 48: Designing for the Social Web: Integrating Social Media into Web Design](https://reader035.fdocuments.us/reader035/viewer/2022062613/545564c8af795994188b489e/html5/thumbnails/48.jpg)
Thank You! – Questions?
![Page 49: Designing for the Social Web: Integrating Social Media into Web Design](https://reader035.fdocuments.us/reader035/viewer/2022062613/545564c8af795994188b489e/html5/thumbnails/49.jpg)