Your SlideShare is downloading. ×
SMBTV Presentation
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

SMBTV Presentation

335
views

Published on

A presentation on integration social media into an existing site and using social media to market to end-users.

A presentation on integration social media into an existing site and using social media to market to end-users.

Published in: Marketing

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
335
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Social Media Matthew Gerrior @MatthewGerrior Lead Software Engineer @greanetree
  • 2. Twitter
  • 3. Twitter Tweet Button ● Allows users to share your content or tell their friends about your content without having to navigate away from your site ● Include your Twitter account in the Tweet using the "via" parameter, driving people to visit your Twitter account ● Recommend up to two additional Twitter accounts that the user may be interested in following
  • 4. Twitter Tweet Button
  • 5. Twitter Tweet Button Make your own: http://bit.ly/12Noi1R
  • 6. Twitter Embedded Tweets ● Allows you to embed a specific Tweet in any given page, maintaining the Twitter look and feel if desired ● Provides the same rich media experience that users would find in their Timeline ● Allows users to follow the Tweeter, reply, retweet, and favorite the Tweet all without leaving your site
  • 7. Twitter Embedded Tweets Additional Information: http://bit.ly/YZWl2q
  • 8. Twitter Embedded Timelines ● Embed a timeline of your own tweets, or those of any public user ● Embed a timeline of your favorite tweets, or the favorite tweets of any public user ● Embed a timeline of tweets from a list of users (great for a site that wants to promote many local businesses) ● Embed a timeline for hashtags or other search results
  • 9. Twitter Embedded Timelines Create your own: http://bit.ly/10GcYH1 Additional Information / Customization: http://bit.ly/17n4d3q
  • 10. Twitter Cards ● Allow rich media from your website to be embedded directly in Tweets ● Approval required for specific cards ● Implemented by adding metadata to the page markup.
  • 11. Twitter Cards What is metadata? Metadata is data about data. Example: <meta name="keywords" content="HTML,CSS,XML,JavaScript">
  • 12. Twitter Cards ● ● ● ● ● ● ● Summary Card Large Image Summary Card Photo Card Gallery Card App Card Player Card Product Card
  • 13. Twitter Cards Summary Card ● Great for Blog Posts and Articles ● Allows users to preview your content without having to leave their timeline ● Allows for site and content creator attribution within the Tweet, increasing number of users viewing your Twitter Account
  • 14. Twitter Cards Summary Card Desktop Mobile
  • 15. Twitter Cards Summary Card Example Metadata <!-- Card Type (optional for summary cards) --> <meta name="twitter:card" content="summary"> <!-- Twitter Account for Website (optional) --> <meta name="twitter:site" content="@nytimes"> <!-- Twitter Account for Content Creator (optional) --> <meta name="twitter:creator" content="@SarahMaslinNir"> <!-- Title (required) --> <meta name="twitter:title" content="Parade of Fans for Houston’s Funeral"> <!-- Description (required) --> <meta name="twitter:description" content="NEWARK - The guest list and parade of limousines with celebrities emerging from them seemed more suited to a red carpet event in Hollywood or New York than than a gritty stretch of Sussex Avenue near the former site of the James M. Baxter Terrace public housing project here."> <!-- Image (optional) --> <meta name="twitter:image" content="http://graphics8.nytimes.com/images/2012/02/19/us/19whitneyspan/19whitney-span-article.jpg"> Additional Information: http://bit.ly/ZAoHVR
  • 16. Twitter Cards Large Image Summary Card ● Similar to Summary Card, but provides more emphasis on the image ● Requirements are the same as the Summary Card, except images should be at least 280px wide and 150px tall
  • 17. Twitter Cards Large Image Summary Card Desktop Mobile
  • 18. Twitter Cards Large Image Summary Card Example Metadata: <!-- Card Type (required) --> <meta name="twitter:card" content="summary_large_image"> <!-- Title (required) --> <meta name="twitter:title" content="Parade of Fans for Houston’s Funeral"> <!-- Description (required) --> <meta name="twitter:description" content="NEWARK - The guest list and parade of limousines with celebrities emerging from them seemed more suited to a red carpet event in Hollywood or New York than than a gritty stretch of Sussex Avenue near the former site of the James M. Baxter Terrace public housing project here."> <!-- Image (optional) --> <meta name="twitter:image" content="http://graphics8.nytimes. com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg"> Additional Information: http://bit.ly/ZTx3Cv
  • 19. Twitter Cards Photo Card ● Use when your image should be the center of attention ● Useful for image sharing sites such as Flickr and Instagram ● Useful for photography studios or other businesses where the main content is photographs
  • 20. Twitter Cards Photo Card Desktop Mobile
  • 21. Twitter Cards Photo Card Example Metadata: <!-- Card Type (required) --> <meta name="twitter:card" content="photo"> <!-- Title (optional) --> <meta name="twitter:title" content="Good Morning, San Francisco"> <!-- Description (optional) --> <meta name="twitter:description" content="Great view this morning"> <!-- Image (required) --> <meta name="twitter:image" content="http://example.com/photo/a/image.jpg"> <!-- Image Width (recommended) --> <meta name="twitter:image:width" content="610"> <!-- Image Height (recommended) --> <meta name="twitter:image:height" content="610"> Additional Information: http://bit.ly/14ljALK
  • 22. Twitter Cards Gallery Card ● Similar to Photo Card but allows you to display four photos in the Tweet ● Great for Blog Posts or Articles that revolve around a group of photos
  • 23. Twitter Cards Gallery Card Desktop Mobile
  • 24. Twitter Cards Gallery Card <!-- Card Type (required) --> Example Metadata: <meta name="twitter:card" content="gallery"> <!-- Title (optional) --> <meta name="twitter:title" content="Hack Week"> <!-- Description (optional) --> <meta name="twitter:description" content="A look at Hack Week at Twitter HQ (@twoffice) and all of our offices around the world."> <!-- First Photo in Gallery (required) --> <meta name="twitter:image0" content="http://farm9.staticflickr. com/8236/8383176221_44f50afaba_b.jpg"> <!-- Second Photo in Gallery (required) --> <meta name="twitter:image1" content="http://farm9.staticflickr. com/8186/8393798794_3a3d27a621_c.jpg"> <!-- Third Photo in Gallery (required) --> <meta name="twitter:image2" content="http://farm9.staticflickr. com/8189/8384260164_511782a797_c.jpg"> <!-- Fourth Photo in Gallery (required) --> <meta name="twitter:image3" content="http://farm9.staticflickr. com/8188/8383177259_f927f13d81_b.jpg"> Additional Information: http://bit.ly/120pOtJ
  • 25. Twitter Cards App Card ● Use to embed mobile app descriptions directly in user Timelines ● Allow users to spread the word about your application, driving the number of installs ● Gathers all pertinent information ( # of reviews, # of stars, etc) from app stores for you
  • 26. Twitter Cards App Card
  • 27. Twitter Cards App Card Example Metadata: <!-- Card Type (required) --> <meta name="twitter:card" content="app"> <!-- Additional Description (optional) --> <meta name="twitter:description" content="The perfect for grabbing a nearby taxi. Try it by downloading today."> <!-- App ID for iPhone App (required)--> <meta name="twitter:app:id:iphone" content="306934135"> <!-- Appi ID for iPad App (required, can be same as iPhone App) --> <meta name="twitter:app:id:ipad" content="306934135"> <!-- App ID for Google Play (required) --> <meta name="twitter:app:id:googleplay" content="com.example.app"> Additional Information: http://bit.ly/182CIL5
  • 28. Twitter Cards Product Card ● Allow potential customers to view your products directly in their timeline ● Increased word of mouth about your products ● Allow your users to advertise for you
  • 29. Twitter Cards Product Card Desktop Mobile
  • 30. Twitter Cards Product Card Example Metadata: <!-- Card Type (required) --> <meta name="twitter:card" content="product"> <!-- Title (required) --> <meta name="twitter:title" content="Logo Mug"> <!-- Description (required) --> <meta name="twitter:description" content="The perfect pick-me-up. Enjoy your favorite blend with this coffee mug featuring the Twitter logo. Make every work day good to the lastdrop."> <!-- Image (required) --> <meta name="twitter:image" content="https://twitter.siglercompanies.com/graphics/00000001/mugnew.jpg"> <!-- Value of First Additional Detail (required) --> <meta name="twitter:data1" content="$3"> <!-- Label of First Additional Detail (required) --> <meta name="twitter:label1" content="Price"> <!-- Value of Second Additional Detail (required) --> <meta name="twitter:data2" content="Black"> <!-- Label of Second Additional Detail (required) --> <meta name="twitter:label2" content="Color"> Additional Information: http://bit.ly/Z00DqF
  • 31. Twitter Cards Player Card ● Allows users to view your video content directly in their timeline ● Can drastically increase the number of people that your video will reach ● Provides a consistent viewing experience for all major platforms
  • 32. Twitter Cards Player Card Desktop Mobile
  • 33. Twitter Cards Player Card Do not: ● Automatically play content. ● Require users to sign-in to your experience. ● Commingle sharing features from other networks inside your player.
  • 34. Twitter Cards Player Card Example Metadata: <!-- Card Type (required) --> <meta name="twitter:card" content="player"> <!-- Title (required) --> <meta name="twitter:title" content="Example Video"> <!-- Description (required) --> <meta name="twitter:description" content="This is a sample video from example.com"> <!-- Preview Image (required) --> <meta name="twitter:image" content="http://example.com/keyframe/a.jpg"> <!-- URL to Player iFrame (required) --> <meta name="twitter:player" content="https://example.com/embed/a"> <!-- Player Width (required) --> <meta name="twitter:player:width" content="435"> <!-- Player Height (required) --> <meta name="twitter:player:height" content="251"> <!-- Video Stream (recommended) --> <meta name="twitter:player:stream" content="https://example.com/raw-stream/a.mp4"> <!-- Video Stream Format (required if specifying a video stream) --> <meta name="twitter:player:stream:content_type" content="video/mp4; codecs=&quot;avc1.42E01E1, mp4a.40.2&quot;" > Additional Information: http://bit.ly/15Xzcox
  • 35. Twitter Cards Deep Linking Drive users to install your application right from their timeline. Allow users to open Tweet content within your application, directing traffic from Twitter to your application.
  • 36. Twitter Cards Deep Linking
  • 37. Twitter Cards Deep Linking
  • 38. Twitter Cards Deep Linking Example Metadata: <!-- Name of iPhone App --> <meta name="twitter:app:name:iphone" content="Example App"/> <!-- App Store ID for iPhone App --> <meta name="twitter:app:id:iphone" content="306934135"/> <!-- URL to open tweet in iPhone App --> <meta name="twitter:app:url:iphone" content="example://action/5149e249222f9e600a7540ef"/> <!-- Name of iPad App --> <meta name="twitter:app:name:ipad" content="Example App"/> <!-- App Store ID for iPad App (can be same as iPhone) --> <meta name="twitter:app:id:ipad" content="306934135"/> <!-- URL to open tweet in iPad App --> <meta name="twitter:app:url:ipad" content="example://action/5149e249222f9e600a7540ef"/> <!-- Name of Google Play App --> <meta name="twitter:app:name:googleplay" content="Example App"/> <!-- ID of Google Play App --> <meta name="twitter:app:id:googleplay" content="com.example.app"/> <!-- URL to open tweet in Google Play App --> <meta name="twitter:app:url:googleplay" content="http://example.com/action/5149e249222f9e600a7540ef"/> Additional Information: http://bit.ly/10GAuDy
  • 39. Facebook
  • 40. Facebook Like Button ● Allow users to like the page they are on, useful for blog posts or articles, or allow users to like your Facebook Page ● Powerful analytics available through Facebook about user demographics.
  • 41. Facebook Like Button Create your own: http://bit.ly/13A50Mb
  • 42. Facebook Follow Button Allow users to follow your public updates without leaving your site. Create your own: http://bit.ly/ZpUfMX
  • 43. Facebook Follow Button
  • 44. Facebook Comments ● Drop-in solution for commenting which doesn't require users to register with your site to comment. ● Powerful moderation tools including blacklisting words, banning users, and enabling grammar filters.
  • 45. Facebook Comments ● Promotes socially relevant content from friends and friends of friends, allowing users to receive more targeted content. ● Allows wide spread distribution of comments made on your page. Users can interact with and post additional comments from their newsfeed when their friends comment.
  • 46. Facebook Comments Build your own: http://bit.ly/17nbGj2
  • 47. Facebook Like Box Allows users to: ● View the number of people who liked your Facebook Page ● See which friends liked your Facebook Page ● View recent activity from your Facebook Page ● Like your Facebook Page
  • 48. Facebook Like Box Create your own: http://bit.ly/ZSiZKe
  • 49. Facebook Open Graph Any page can be turned into an object by adding metadata in accordance with the Open Graph Protocol: http://bit.ly/17s2gmv Specifying objects in this manner allows Facebook to create a rich user experience around your content, allowing users to do things like stream your videos in their Timeline.
  • 50. Facebook Open Graph Allows for custom actions and objects to be created by applications. Allow users to tell a story through their timeline by taking action on these objects.
  • 51. Facebook Open Graph Standard Objects and Actions: Music: Listen, Create a Playlist Movies & Television: Watch, Rate, Wants to Watch Books: Rate, Read, Quote, Wants to Read Fitness: Bike, Walk, Run General: Like, Recommend, Follow
  • 52. Facebook Open Graph Allows actions to be tagged with locations, creating location based posts in the timeline:
  • 53. API
  • 54. API What's an API? An Application Programming Interface is used to interact with services such as Facebook and Twitter to provide additional functionality for users.
  • 55. API What can be done using APIs? Build applications that use APIs to make social networking easier, e.g. Buffer http://bit.ly/ZYSZfs Provide unique experiences for every user that enters your site by extracting data from their social networks, e.g. Books, Movies, etc. More info: http://bit.ly/ZYTOok
  • 56. Examples
  • 57. Thank you: Contact Information: All Good Bakers Cohoes Music Hall SMBTV Greane Tree Technology Matthew Gerrior mgerrior@greanetree.com 518-380-6500