Skip to content

Commit

Permalink
Added social media icons to the headers
Browse files Browse the repository at this point in the history
  • Loading branch information
@ahelkit
ahelkit committed Aug 3, 2012
1 parent e89f211 commit 8b6a727
Show file tree
Hide file tree
Showing 6 changed files with 72 additions and 53 deletions.
Binary file modified img/banner_image.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/facebook.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/flickr.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/twitter.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/youtube.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
125 changes: 72 additions & 53 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ <h1>Why use social media?</h1>

<!-- Facebook -->
<div class="main_cont" id="facebook">
<h1>Facebook</h1>
<h1><img src="img/facebook.png"> Facebook</h1>
<div class="top_art_cont">
<p>There is 1 main Facebook page for the City of Honolulu's follower community: <a href="https://www.facebook.com/honolulu.gov">facebook.com/honolulu.gov</a>. With over 900 million active users, Facebook is the most widely-used social networking site. Many cities have been using Facebook fanpages to provide citizens with information about government services, local events, and other relevant topics. For reference, see the
<a href="http://www.facebook.com/SF">City of San Francisco</a>, or the
Expand Down Expand Up @@ -117,29 +117,46 @@ <h6><span class="numbers">7.</span> Add other administrators to aid in managing
<h6><span class="numbers">8.</span> To add a cover image or additional photos, click on a photo and follow the prompts displayed.</h6>


<h3 class="ribbon">The Fundamentals</h3>
<ul class="a"><li>“Like” other cities pages and follow relevant personal pages (community groups, community members, local businesses, key influencers, and other governments). It’s the best way to get more people to follow you and grow your community.</li>
<li> With Facebook you can share photos, videos, status updates, or other relevant info with the public using the share menu visible from your home page.</li>
<li> Each user has his or her own page, which can be found at <a href="http://facebook.com/username">facebook.com/<i>username</i></a>. </li>
<li> There are two main viewpoints to browse, “Timeline” and “News Feed.” </li>
<li> The “Timeline” is a collection of photos, updates and interactions between you and your community. </li>
<li> The “News Feed” is an aggregate of updates from the organizations, businesses, and people you follow. You can share these messages to your followers by clicking on “Share”.</li></ul>
<h3 class="ribbon">Some Tactics</h3>
<ul class="a"><li> Tag others in messages and photos. When typing a post, include an @ and continue typing the name to select who you are tagging. Notifications will be sent to each party being tagged.</li>
<li> When someone posts to your timeline and is looking for a response, it's called "social" media after all, respond!</li>
<li> You can utilize “Facebook Questions” from the Share menu to gain insights from community members, get feedback, and encourage participation.
<ul class="b"> <li> How to set up a poll: <a href="http://www.facebook.com/help/facebook-questions"> facebook.com/help/facebook-questions</a></li></ul></li>
<li> You can also share other constituent information or relevant links to keep your fans informed and build community involvement.</li>
<li>Useful resources:
<ul class="b"><li><a href="http://www.facebook.com/government/app_4949752878">Government on Facebook FAQ</a></li>
<li><a href="http://www.facebook.com/help/?page=260315770650470&ref=hcnav">Facebook Help</a></li></ul></li></ul>
<h3 class="ribbon">The Fundamentals</h3>
<h6>“Like” other cities pages and follow relevant personal pages<h6>
<ul>
<li><span class="arrows">></span> Relevant personal pages include community groups, community members, local businesses, key influencers, and other governments. It’s the best way to get more people to follow you and grow your community.</li>
</ul>
<h6>Share photos, videos, status updates, or other relevant info with the public using the share menu visible from your home page.</h6>
<ul>
<li><span class="arrows">></span> Each user has his or her own page, which can be found at <a href="http://facebook.com/username">facebook.com/<i>username</i></a>. </li>
<li><span class="arrows">></span> There are two main viewpoints to browse, “Timeline” and “News Feed.” </li>
<li><span class="arrows">></span> The “Timeline” is a collection of photos, updates and interactions between you and your community. </li>
<li><span class="arrows">></span> The “News Feed” is an aggregate of updates from the organizations, businesses, and people you follow. You can share these messages to your followers by clicking on “Share”.</li>
</ul>

<h3 class="ribbon">Some Tactics</h3>
<h6>Tag others in messages and photos</h6>
<ul>
<li><span class="arrows">></span> When typing a post, include an @ and continue typing the name to select who you are tagging. Notifications will be sent to each party being tagged.</li>
</ul>
<h6>Respond to posts on your timeline</h6>
<ul>
<li><span class="arrows">></span> When someone posts to your timeline and is looking for a response, it's called "social" media after all, respond!</li>
</ul>
<h6>Utilize "Facebook Questions"</h6>
<ul>
<li><span class="arrows">></span> You can utilize “Facebook Questions” from the Share menu to gain insights from community members, get feedback, and encourage participation.</li>
<li><span class="arrows">></span> How to set up a poll: <a href="http://www.facebook.com/help/facebook-questions"> facebook.com/help/facebook-questions</a></li>
</ul>
<h6>Share other constituent information or relevant links to keep your fans informed and build community involvement.</h6>
<h6>Useful resources:<h6>
<ul>
<li><a href="http://www.facebook.com/government/app_4949752878">Government on Facebook FAQ</a></li>
<li><a href="http://www.facebook.com/help/?page=260315770650470&ref=hcnav">Facebook Help</a></li>
</ul>
</div>
<div id="finish_line_cont"></div>
</div>

<!-- Twitter -->
<div class="main_cont" id="twitter">
<h1>Twitter</h1>
<h1><img src="img/twitter.png"> Twitter</h1>
<div class="top_art_cont">
<p>There are 3 main City of Honolulu accounts for exchanging information with citizens:<br /> <a href="http://www1.honolulu.gov/imgs/twitter_acctinfo.jpg">www1.honolulu.gov/imgs/twitter_acctinfo.jpg</a></p>
</div>
Expand All @@ -165,7 +182,7 @@ <h6><span class="numbers">2.</span> Edit your profile</h6>
<h6><span class="numbers">3.</span> Confirm the email address and you're done!</h6>

<h3 class="ribbon">The Fundamentals</h3>
<ul class="a">
<ul>
<li>With Twitter, you create tweets to share information with the public and follow others to stay informed.</li>
<li>Follow other community groups, community members, local businesses, key influencers, and other governments.</li>
<li>Each user has his or her own page, which can be found at <a href="https://twitter.com/username">twitter.com/<i>username</i></a>.</li>
Expand All @@ -178,17 +195,17 @@ <h3 class="ribbon">The Fundamentals</h3>
<p><i>Sample tweet</i>: &nbsp; “Reminder! The <a href="https://twitter.com/CityofSunnyvale">@CityOfSunnyvale</a> &nbsp; <a href="https://twitter.com/search/%23art">#Art</a> and <a href="https://twitter.com/#!/search/%23wine">#Wine</a> Festival starts today. &nbsp; Join us downtown from 10-6: <a href="http://bit.ly/GMO3FV">bit.ly/GMO3FV</a> &nbsp; <a href="https://twitter.com/#!/search/%23food">#food</a> &nbsp; <a href="https://twitter.com/#!/search/%23music">#music</a>”</p>

<h3 class="ribbon">Some Tactics</h3>
<ul class="a">
<ul>
<li>Keep active accounts to a minimum. Multiple Twitter accounts will only fragment your audience and the community of followers you wish to develop won’t be attainable unless account consolidation occurs.
<ul class="b">
<ul>
<li>Here’s how the accounts can be consolidated in Honolulu: &nbsp; <a href="http://www1.honolulu.gov/imgs/twitter_acctinfo.jpg">www1.honolulu.gov/imgs/twitter_acctinfo.jpg</a></li>
</ul>
</li>
<li>Follow others. An easy way to get more people to follow you and grow your impression.</li>
<li>Don’t start tweets with “ @ ” unless you're tweeting <i>at someone</i>. They look like a conversation and get ignored.</li>
<li>Create hashtags for a given topic or event (#sfprideparade). This allows for broader awareness of your message.</li>
<li>Garner responses by promoting a hashtag.
<ul class="b">
<ul>
<li>Example: “What do you think of the new play structure at <a href="https://twitter.com/#!/search/%23dolorespark">#DoloresPark</a>? Include <a href="https://twitter.com/#!/search/%23dolorespark">#DoloresPark</a> in reply”</li></ul></li>
<li>When you tweet at someone, use a Twitter handle (name) at the beginning of the tweet. This allows for minimal viewing and indicates that you are speaking directly to that person.</li>
<li>Reply when mentioned or tweeted at. It's called “social” media after all!</li>
Expand All @@ -202,9 +219,9 @@ <h3 class="ribbon">Some Tactics</h3>

<!--Flickr-->
<div class="main_cont" id="flickr">
<h1>Flickr</h1>
<h1><img src="img/flickr.png"> Flickr</h1>
<div class="top_art_cont">
<p>There is 1 main Flickr page for the City of Honolulu's photos:<br /> <a href="http://www.flickr.com/photos/honolulugov">flickr.com/photos/honolulugov</a> </p>
<p>There is 1 main Flickr page for the City of Honolulu's photos: <a href="http://www.flickr.com/photos/honolulugov">flickr.com/photos/honolulugov</a> </p>
</div>
<div class="program_cont row">
<h3 class="ribbon">Getting Started</h3>
Expand All @@ -228,23 +245,23 @@ <h6><span class="numbers">3.</span> Personalize your profile</h6>
</ul>

<h3 class="ribbon">The Fundamentals</h3>
<ul class="a">
<ul>
<li>Upload photos! You can do this one at a time or in batches.
<ul class="b">
<ul>
<li>To upload all photos in a folder, hold down command [Mac] or control [Windows] and press A. Then click “Upload.”</li>
<li>To upload selected photos, hold down command [Mac] or control [Windows] and click on the specific photos desired. Then click “Upload.”</li></ul></li>
<li>Tag and Organize
<ul class="b">
<ul>
<li>Click on “Set” (a set is a group of photos that go together (ex: Town Hall, June 2012)
<ul class="c">
<ul>
<li>Select appropriate photos for one set, then click and drag into the workspace</li>
<li>Add tags: words to identify the picture (ex: Town Hall, June, City of Sunnyvale, Mayor Melinda Hamilton)</li></ul></li>
<li>You can add sets to “Galleries.” Galleries allow you to bundle sets (ex: Town Halls) </li></ul></li><li>Under the “You” tab, scroll down to "Your Account" and set your licensing. Through <a href="http://creativecommons.org">Creative Commons</a> you can permit others to use your photos to varying degrees.</li></ul>

<h3 class="ribbon">Some Tactics</h3>
<ul class="a">
<ul>
<li>Share your photos across Facebook and Twitter.
<ul class="b">
<ul>
<li>Use Flickr as your centralized hub so all your city’s photos can be easily viewable in a single location.</li>
<li>Each photo uploaded to Flickr will have a unique URL. You can link directly to a specific photo, a set, or a gallery of photos.</li>
<li>Each photo uploaded will also have a unique HTML embed code. Use this embed code for websites and email blasts if you would like to display that photo.</li></ul></li>
Expand All @@ -257,9 +274,9 @@ <h3 class="ribbon">Some Tactics</h3>

<!-- YouTube -->
<div class="main_cont" id="youtube">
<h1>YouTube</h1>
<h1><img src="img/youtube.png"> YouTube</h1>
<div class="top_art_cont">
<p>There is 1 main YouTube page for the City of Honolulu's videos:<br /> <a href="http://www.youtube.com/user/candcofhonolulu">youtube.com/user/candcofhonolulu</a> </p>
<p>There is 1 main YouTube page for the City of Honolulu's videos: <a href="http://www.youtube.com/user/candcofhonolulu">youtube.com/user/candcofhonolulu</a> </p>
</div>
<div class="program_cont row">
<h3 class="ribbon">Getting Started</h3>
Expand All @@ -270,20 +287,20 @@ <h6><span class="numbers">1.</span> Go to <a href="http://www.youtube.com/">yout
</ul>

<h3 class="ribbon">The Fundamentals</h3>
<ul>
<li>To create a channel, click the arrow in the top right and click under the YouTube list on My Channel.
<h6>To create a channel, click the arrow in the top right and click under the YouTube list on My Channel.</h6>
<ul>
<li>Click on Channel Settings, and it will prompt you to design your page.</li>
<li>Edit the Channel URL under the Info &amp; Settings tab to your preferred username for easier recognition and results in search.</li>
<li>Under the Tabs tab, choose the preferred “Activity you will share” settings.</li>
<li>Choose your preferred Feed Settings to best manage the comments that may be posted on your channel.</li></ul></li>
<li>Upload videos by selecting Video Manager.
<li><span class="arrows">></span> Click on Channel Settings, and it will prompt you to design your page.</li>
<li><span class="arrows">></span> Edit the Channel URL under the Info &amp; Settings tab to your preferred username for easier recognition and results in search.</li>
<li><span class="arrows">></span> Under the Tabs tab, choose the preferred “Activity you will share” settings.</li>
<li><span class="arrows">></span> Choose your preferred Feed Settings to best manage the comments that may be posted on your channel.</li>
</ul>
<h6>Upload videos by selecting Video Manager.</h6>
<ul>
<li>Click "Upload" and choose your preferred method to upload/record.</li>
<li>Change the Title, add a Description, and add tags (ex: Town Hall, June, City of Sunnyvale, Mayor Melinda Hamilton).</li>
<li>Choose preferred settings for Privacy, Category, and License. For License, note that Creative Commons - Attribution allows other users to copy and re-edit your video if desired.</li>
<li>Click Advanced Settings to choose additional preferred settings.</li>
</ul></li>
<li><span class="arrows">></span> Click "Upload" and choose your preferred method to upload/record.</li>
<li><span class="arrows">></span> Change the Title, add a Description, and add tags (ex: Town Hall, June, City of Sunnyvale, Mayor Melinda Hamilton).</li>
<li><span class="arrows">></span> Choose preferred settings for Privacy, Category, and License. For License, note that Creative Commons - Attribution allows other users to copy and re-edit your video if desired.</li>
<li><span class="arrows">></span> Click Advanced Settings to choose additional preferred settings.</li>
</ul>

<h3 class="ribbon">Some Tactics</h3>
<ul>
Expand Down Expand Up @@ -326,18 +343,20 @@ <h3 class="ribbon">Frequency</h3>
<li>Don’t overwhelm others by over-posting: people will become fatigued and you will lose fans/followers.</li>
<li>Don’t repeat the same message more than once: it will overwhelm and annoy your audience. </li>
<li>Don’t become obsolete due to lack of sharing of new information. Try to update your networks a minimum of once per day.</li>
<li>Don’t post just because you can, only share things worth sharing.</li></ul>
<li>Don’t post just because you can, only share things worth sharing.</li>
</ul>

<h3 class="ribbon">Tone of Voice</h3>
<ul>
<li>Create messages that will inspire others to share, like, and comment. The goal is to get your messages reposted and retweeted: this will help the word spread and reach many more people.</li>
<li>Be casual and engaging, not authoritative and distant.</li>
<li> Active voice is better than passive voice.
<ul>
<li>Instead of “Advisory Message: Motorists are urged to avoid Keeaumoku Street in Honolulu”, write “Avoid Keeaumoku Street while driving.”</li></ul></li>
<li>Speak colloquially and use diction that is easy to understand.</li>
<li>Stay consistent, try to keep a similar style and language for each post. </li>
<li>Be short and stick to the point.</li></ul>
<li>Create messages that will inspire others to share, like, and comment. The goal is to get your messages reposted and retweeted: this will help the word spread and reach many more people.</li>
<li>Be casual and engaging, not authoritative and distant.</li>
<li> Active voice is better than passive voice.
<ul>
<li>Instead of “Advisory Message: Motorists are urged to avoid Keeaumoku Street in Honolulu”, write “Avoid Keeaumoku Street while driving.”</li></ul></li>
<li>Speak colloquially and use diction that is easy to understand.</li>
<li>Stay consistent, try to keep a similar style and language for each post. </li>
<li>Be short and stick to the point.</li>
</ul>

<h3 class="ribbon">Unique Approaches</h3>
<ul>
Expand Down

0 comments on commit 8b6a727

Please sign in to comment.