1 / 24

HTML 5 and CSS 3, Illustrated Complete Unit M: Integrating Social Media Tools

HTML 5 and CSS 3, Illustrated Complete Unit M: Integrating Social Media Tools. Objectives. Understand social networking Integrate a Facebook account with a Web site Integrate a Twitter account feed Add a Twitter hash tag feed Participate in social bookmarking. Objectives (continued).

tana
Download Presentation

HTML 5 and CSS 3, Illustrated Complete Unit M: Integrating Social Media Tools

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. HTML 5 and CSS 3, Illustrated CompleteUnit M: Integrating Social Media Tools

  2. Objectives • Understand social networking • Integrate a Facebook account with a Web site • Integrate a Twitter account feed • Add a Twitter hash tag feed • Participate in social bookmarking HTML 5 and CSS 3 – Illustrated Complete

  3. Objectives (continued) • Create a blog • Embed a YouTube video • Link to an RSS feed HTML 5 and CSS 3 – Illustrated Complete

  4. Understanding Social Media • Social networking site: Web site that enables people to share information about common interests, news, and events • Also known as social networks • Open to most anyone with restricted access to unknown users • Prewritten HTML or JavaScript code HTML 5 and CSS 3 – Illustrated Complete

  5. Understanding Social Media (continued) • Blog: special-purpose Web site that enables one person or a small number of people to post news or updates • Usually focused on a narrow topic • Microblog: site that shares aspects with both social networking sites and blogs • Twitter is an example HTML 5 and CSS 3 – Illustrated Complete

  6. Understanding Social Media (continued) • Video hosting sites • Enable users to create videos and distribute them widely • YouTube is a prime example • Visually powerful way to connect with an audience HTML 5 and CSS 3 – Illustrated Complete

  7. Understanding Social Media (continued) • Common features on many social networking sites HTML 5 and CSS 3 – Illustrated Complete

  8. Integrating a Facebook Account with a Web Site • Opportunity to let people know about social media presence and invite them to become part of network • Enables you to integrate into own Web site in unique ways • Use provided widgets • Quick, effective way to create bridge to social network HTML 5 and CSS 3 – Illustrated Complete

  9. Integrating a Facebook Account with a Web Site (continued) • Inline frame: acts as self-contained web page within the HTML document • Feed: most recent set of updates created by the organization • Social networking sites have more user updates that static Web pages • Widget showing feed can be useful Web site addition HTML 5 and CSS 3 – Illustrated Complete

  10. Integrating a Facebook Account with a Web Site (continued) • HTML for Web page containing widget code HTML 5 and CSS 3 – Illustrated Complete

  11. Integrating a Twitter Account Feed • Way to communicate about specials or provide coupon codes • Use site to listen to what people are saying about them • Enables quick responses to customers’ concerns • Tweets: name for Twitter postings HTML 5 and CSS 3 – Illustrated Complete

  12. Integrating a Twitter Account Feed (continued) • Web page incorporating Twitter user feed HTML 5 and CSS 3 – Illustrated Complete

  13. Adding a Twitter Hash Tag Feed HTML 5 and CSS 3 – Illustrated Complete • Hash tags: (#) searchable codes that allow users to find postings on a given topic • Type in Search Query, Title, and Caption boxes and click Test settings button • Web page displays a preview of widget • Explore available settings

  14. Adding a Twitter Hash Tag Feed(continued) • Replacement code uses same script from Twitter to search for and display recent updates based on #minnesota hash tag HTML 5 and CSS 3 – Illustrated Complete

  15. Participating in Social Bookmarking • Social bookmarking: making connections through social networking sites • Add social media widgets to Web sites • Insert button onto Web Site users can click to join network on social networking site • Facebook and Twitter both have these options HTML 5 and CSS 3 – Illustrated Complete

  16. Participating in Social Bookmarking (continued) • Social bookmarking icons added to Web page HTML 5 and CSS 3 – Illustrated Complete

  17. Creating a Blog • Built and edited using dedicated blogging platform • WordPress is a popular platform • Simplify content creation • Enable users to use templates to apply uniform style to blog parts • Useful for easily including content that changes rapidly HTML 5 and CSS 3 – Illustrated Complete

  18. Creating a Blog (continued) • WordPress Dashboard HTML 5 and CSS 3 – Illustrated Complete

  19. Embedding a YouTube Video • Make user-generated video available to anyone with Internet access • Important complement to social networking sites • Can be incorporated into status updates • Businesses or organizations can share links and invite interested customers or clients to spread news HTML 5 and CSS 3 – Illustrated Complete

  20. Embedding a YouTube Video (continued) • Blog containing a YouTube video HTML 5 and CSS 3 – Illustrated Complete

  21. Linking to an RSS Feed • News aggregator: feed reader that lets you bookmark blogs and view latest headlines and content in single place • RSS: short for Rich Site Summary or Really Simple Syndication • Format for document that contains feed information for a Web site • Copy links from Blog platforms that generate and update RSS documents automatically HTML 5 and CSS 3 – Illustrated Complete

  22. Linking to an RSS Feed (continued) • RSS Syndication code added to Web page HTML 5 and CSS 3 – Illustrated Complete

  23. Summary • You can integrate a Web Site with different aspects of social networking • Facebook, Twitter, blogs, YouTube videos, RSS feeds • Social networking sites enable people to share information about common interests • Blogs and microblogs enable people to post news or updates on various topics HTML 5 and CSS 3 – Illustrated Complete

  24. Summary (continued) • Inline frames act as self-contained page • Hash tags are searchable codes that allow users to find topic postings • Social bookmarking is important way to make connections through social networking sites • News aggregators let you bookmark blogs to view content in single place HTML 5 and CSS 3 – Illustrated Complete

More Related