GV Posting Guide
This page has moved to: http://community.globalvoicesonline.org/guide/editorial-guides/gv-posting-guide/
Welcome to the Global Voices Posting Guide. This is designed to help you with the more technical side of creating GV content.
Other important documents:
- Style Guide Information about our stylistic standards like tone of voice.
- Lingua Translators Guide Technical information about using the Lingua system to translate posts.
If you are not a Global Voices contributor yet, please see the Get Involved page to learn how to become an author or translator.
Contents
GV WordPress System
To write for Global Voices, you have to log in to the GV WordPress installation. WordPress is software we run on our server that makes it easy to write posts.
Authors should receive a login name from the editor who creates their user account. The system login page for WordPress is always available by adding /wp-admin/ after the URL. For Global Voices in English, it's: http://www.globalvoicesonline.org/wp-admin
If you don't have a password or have forgotten it, simply use the Lost your password? link and the site will email you a link to reset it. Remember to make your passwords unique and complex (capital letters and symbols) for security!
If you want to learn more about WordPress, there's good documentation on their wiki.
Creating Posts
Generally speaking, the main task you'll be using WordPress for is creating posts. To get started with a new post, click Posts in the sidebar, and choose New Post.
Posts in WordPress start off as a Draft, which means the post is only visible to you and editors. Eventually your post will get the Published status and be visible on the site itself. Only editors on the site have the ability to publish posts, so you need to use the Submit for Review button on the post and notify your editor that it's ready to be edited and approved.
The content of your post inside WordPress will be autosaved on a regular basis, so you should never lose your work, but it's still good to press the Save Draft button sometimes to ensure that your changes are properly recorded. While you are logged in, changes to posts will automatically be associated with you, and you can go back to old versions of posts using the Revisions block in the post editor.
Notifying Your Editor
When you are happy with your post and have gone through the Story Checklist to make sure it's ready, you should send it to your editor for review. The most basic way to do this would be to copy the URL of the story (in the address bar of your browser) and email it to your editor.
A better way is to make use of the Edit Flow tools in the post editor, specifically the Notifications and Editorial Comments boxes at the bottom.
Subscribe your editor in the "Notifications" box, then add an "Editorial Comment" so they get an email.
To notify your editor is to scroll to the bottom of the post editing screen to find the Notifications block, search for your editor and tick the box next to their name.
That will "subscribe" them to the post, so they will receive an email notification when the post's status changes or when someone adds an Editorial Comment. Keep an eye on their name and make sure the background flashes green, indicating that it saved correctly. If you aren't sure re-save the post and make sure their name is still checked in the "Selected" section of the Notifications list.
Once your editor is subscribed in the Notifications block, go to the Editorial Comments block and leave a new comment explaining that the post is ready, or asking any questions you have. The comment and a link to your post will automatically be emailed to your editor
Pushing the Submit for Review button, which will give your post Pending status, will also send an email to your editor, but it's important to remember that the "Submit for Review" button only sends an email the first time you press it, so just in case you should always leave an Editorial Comment at the bottom when your post is ready to be edited.
For more details about how the notification system works see the Edit Flow page.
Visual and HTML Editing Mode
The post editor in WordPress includes a Visual (what you see is what you get) mode as well as the raw Text (HTML) mode. Posts for Global Voices should work in both modes, so you can use whichever best suits your style and needs. The Visual mode is usually more comfortable for writing, while the HTML mode is extremely useful when you need to figure out a tricky problem.
Aside from the editors built into WordPress, it is a good idea to also use a text editor on your local computer as a backup. Regularly copying your post into a text file and saving it is insurance against a mishap with the website that could potentially lose all your hard work.
Good plain text editors include Textwrangler for Mac, Notepad++ for Windows and [1] for Linux (simply called "Editor" in Ubuntu).
Important: Never copy directly from Microsoft Word!
Pasting text from Microsoft Word into WordPress will cause many formatting problems that can be a disaster to fix. If possible, avoid Microsoft Word entirely. If you must use it always paste the text into a simple plain text editor, then copy it again before pasting into WordPress. This will remove the bad formatting of Microsoft Word. Alternately, you can use the "Paste From Word" button in the Visual editor, which should insert the content while removing the unnecessary formatting.
Important: All code in GV posts should work in both Visual and HTML editors!
Occasionally you may want to use HTML in your post that is deleted or broken when you switch to the Visual editor because of automatic "validation" it performs. Often this happens when embedding an object from a third-party site, like a video or slideshow. When this happens it's tempting to just avoid the Visual editor but you must not do so. Many authors, editors and translators within GV depend on the Visual editor, and any one of them might open your post in the Visual editor, thus breaking your code and making the post confusing to readers. Always make sure that the final code in a post works in the Visual and HTML/Text tabs of the editor before publishing.
Post Types
On Global Voices there are several "types" of post that we create. Each has particular needs and standards.
Long Stories
"Stories" are the main content of GV, full-length articles with several quotes from multiple sources. Typically, they are detailed explanations of one big idea or several related ideas between 500-1000 words long.
They normally make use of links, quotes and images from a variety of citizen media about the subject covered, which are displayed in ‘block quote’ sections or ‘translation boxes’.
Stories are displayed as excerpts on the left-hand side of GV, with their thumbnail and a short description that was entered in the "Optional Excerpt" box in wp-admin. Any GV author is welcome to create posts.
Aside from the "Quick Reads" section below, the rest of this document explains the formatting and metadata that should be used for "Long Stories".
See the Style Guide for stylistic (tone, ethics, grammar) considerations to keep in mind when writing posts on Global Voices.
Quick Reads
Full article: Quick Reads
Quick Reads are short posts on Global Voices that highlight and briefly explain compelling citizen media content from the web within 20 - 200 words. Quick Reads are very popular in terms of traffic and sharing, but have a simpler display on the homepage, where only their headline shows (no thumbnail or featured image).
The way to make a post a Quick Read is to check the following category: TYPE -> Quick Reads
For Global Voices in English, content editors are responsible for Quick Reads.
For Lingua sites, Lingua editors work in collaboration with Content Editors, when available, to publish Quick Reads about stories happening in the regions of their languages.
Lingua Quick Reads do not have to be translated into English, but can be, at the discretion of content editors. See more in the Lingua Content page.
To learn more about how to write great Quick Reads see Quick Reads.
Interview Posts
Sometimes GV posts are based on an interview, if so please use our simple standard format based on bold text ("strong" tag) and blockquotes:
- Format interview questions as bold text, starting with the name of the person talking.
- Place responses in blockquotes, starting with the name of the person talking in bold.
- At the first mention of a speaker write out their name in full followed by their initials in brackets (e.g. Solana Larsen (SL): How long have you been blogging?).
- Afterward use the initials only. (e.g. SL: What was your first post about?)
For example:
Solana Larsen (SL): How long have you been blogging?
Jeremy Clarke (JC): Ever since I was born!
SL: Wow! What was your first post about
JC: It was mostly crying and wishing for some milk.
Text Formatting
Quotes
HTML blockquotes should be used for any text taken directly from an external source that is more than a few words long.
<blockquote>Quoted text goes here.</blockquote>
Remember that quotation marks are not necessary in a blockquote unless the quote itself contains them.
HTML editor
In the WordPress "HTML" editor, you can either type the <blockquote> tag directly or select the quote text and press the b-quote button.
If you have text selected, the "b-quote" button will add the <blockquote> tags around the text; otherwise it will open a new tag or close the current one.
Visual editor
In the "Visual" editor you can use the quote button (giant “ marks) to create blockquotes.
If you have text selected the button will convert it into a blockquote, otherwise the button will turn the current line into a blockquote (or turn it into non-blockquote normal text if it's already a blockquote).
Tip: If you are editing a blockquote in the Visual editor and want to "get out" of it, hit Enter to create a new line inside the blockquote, then use the quote button to disable the blockquote for the current line, which ends the quote on the line above and lets you do something else with the current line.
Not all quotes require a blockquote tag. Some can be included in a post simply using quotation marks. Please see the Style Guide for more details.
Translation Quotes
When a post contains a long quote in a different language you should always include both the original text in a blockquote (see above) and the translated text in a Translation Quote. Translation quotes are powered by the .translation class, which changes the style of a quote so that when a normal blockquote and a Translation Quote are one after the other, the relationship is clear from how they are designed.
<blockquote>Original Text</blockquote> <blockquote class="translation">Translated Text</blockquote>
HTML editor
In the HTML editor you can use the .translation button to wrap the currently-selected text in a translation quote.
Visual editor
In the Visual editor you can use the .translation choice in the Styles pulldown menu on the second row of buttons. This will convert the currently selected paragraph or blockquote into a Translation Quote.
If you can't see the "Styles" button': You need to push the "Kitchen Sink" button on the right side of the top row to show the second row which has "Styles" in it.
Tip: The .translation buttons work just like the quote button, see the Quotes section above for more details.
Right-to-Left Language Quotes
Arabic, Farsi, Hebrew, Urdu and other languages are written from right-to-left, so they need a special .rtl class that fixes how they are displayed when we quote them.
<blockquote class="rtl">بدأت تتوالى</blockquote>
HTML Editor
In the HTML editor of the system there is a .rtl button that will wrap the currently-selected text in a right-to-left blockquote.
Visual Editor
In the Visual editor you can use the .rtl choice in the Styles pulldown menu on the second row of buttons. This will convert the currently selected paragraph or blockquote into a right-to-left blockquote.
If you can't see the "Styles" button': You need to push the "Kitchen Sink" button on the right side of the top row to show the second row which has "Styles" in it.
Left-to-Right Language Quotes
When writing in or translating to a right-to-left language the opposite class, .ltr, is needed so that quotes in English or other LTR languages display appropriately. The process is the same as described above for RTL, but use the .ltr class and buttons in the different editors.
Contributors
It is important to credit everyone who helped create a post, not just the main author. We do this by listing additional contributors at the end of the post as there can only be one author per post in the system. A contributor could be someone who helped translate the post, did a lot of sub-editing, or helped in any other way.
Place the contributors paragraph at the very end of every post, under even any ‘Extra Notes’ (see below) added. This allows it to match the author credit directly below.
<p class="contributors">This post was proofread in English by <a href="http://globalvoicesonline.org/author/solana-larsen/">Solana Larsen</a>.</p>
If you are listing the name of someone who is part of Global Voices, please always link to their GV profile page (like this one) so that people can find their posts and bio information easily.
HTML Editor
In the HTML editor of the system there is a .contributors button that will wrap the currently-selected text with a .contributors tag.
Visual Editor
In the Visual editor you can use the .contributors choice in the Styles pulldown menu on the second row of buttons. This will convert the currently selected paragraph into a contributors paragraph.
If you can't see the "Styles" button': You need to push the "Kitchen Sink" button on the right side of the top row to show the second row which has "Styles" in it.
Notes
Extra notes can be used at the end of posts to add necessary context or information for readers, as well as to give a special style to updates to the post added after publishing.
<div class="notes">text</div>
The display and functioning of the .notes class is exactly the same as the .contributors class outlined above. All instructions apply, just use the .notes buttons and/or CSS class in either the Visual or HTML editor.
Excerpts
All posts should have a short excerpt that is a compelling tease of your story. The text is edited in the Excerpt box of the post editor, which has a word counter to remind you of the maximum number of words you should use (it turns red when the excerpt is too long).
Excerpts appear on the homepage and other post listings on the site, as well as on Facebook and other social sites when a post is shared.
If a post doesn't have an excerpt, one will automatically be created from the first words of a post, but the results are rarely interesting and often cut off mid-sentence. For advice on how to write a compelling excerpt, please read Tips for Writing Tempting Excerpts.
Categories
Global Voices posts are sorted into many different categories so that visitors can find posts about specific places and topics. It takes time because there are so many, but it’s important to ensure all the categories relevant to a post are selected before publishing.
For a list of current GV categories see here. Authors should never add categories, we carefully select each one to avoid making the list any longer.
In the WordPress post editor the category box is in the right sidebar. Categories are sorted by their types (WORLD, TOPIC) then alphabetically within each type.
Region and country categories
GV has a full set of country categories organized into detailed regions. To find a country first find "WORLD", then the appropriate region, then the countries will be inside it. Here are some quick guidelines for choosing the right countries and regions for a post:
- When you tick a country category always tick it's parent region as well.
- You can choose multiple regions and countries as long as they are all the subject of your post.
- That said, only choose countries that are really related. Ask yourself "would this story make sense in a list of posts about that country?"
- If your post is about a region generally but not a specific country you don't have to choose a country.
- If your post is about the entire world but no country or region in particular then don't add any categories, it will automatically show on the homepage. Never tick all the regions!
Topic Categories
Select as many topic categories as are specifically relevant to your post.
If you aren't sure exactly what a topic category means visit it's archive on the site and see what previous posts were about. When in doubt only use the categories you are sure are related to a post.
Language Categories
GV uses language categories to indicate that a post contains quotes and references to citizen media in that language.
If a post was written in English but has translated Chinese blockquotes and links to a Spanish news story, the Chinese and Spanish language categories should be selected.
Note that language categories are totally separate from country categories and the "main" language of a country. If a post about Tunisia has French quotes then use the "French" category, not "Arabic".
Remember: The language the post is written in should not be checked as a category, only the languages of the external content being linked to.
Type Categories
GV uses type categories to help users find posts with a particular type of content.
- Quick Read posts are short posts that link away from GV. See Quick Reads.
- Photo posts contain several compelling photos, and have those photos or photography as a central topic. (i.e. not just an example photo to illustrate the topic, but photos that are the topic).
- Video posts contain video of some kind.
- Podcast posts are about a podcast online and preferably have links to listen to audio.
- Featured posts are chosen by the managing editors to be promoted to users. Authors should not use this category.
Geolocation
Starting in 2015, the Global Voices sites use a plugin to add a "geolocation" to each post. The geolocations are used to display embedded Google Maps with pins for each post.
To save a geolocation in the post editor:
- Scroll down to the Location box.
- Use Find a new location field to search for a specific place.
- Make sure the pin is in the right area on the map.
- Save your post.
The location is saved as co-ordinates that define where a pin should show, but you can search for almost anything and Google Maps will predict what co-ordinates will work.
Be as specific and precise as possible.
If there is a city or neighborhood please use it rather than the country.
Avoid using the same spot over and over.
The map works best when pins aren't directly on top of each other.
If there are multiple countries/locations in the post pick the most appropriate one to geolocate it.
Consider a user clicking the pin and try to find a place that makes sense for the story.
If there is no clear location for a post don't geolocate it at all.
Not every post needs to be geolocated, we can leave this box empty for stories about the whole world or with many equal locations.
Permalink URL
The "permalink" of a story is the text used in it's URL to identify it on the site. Anyone who uses links to your posts will see the permalink before they click, and search engines like Google use the words in permalinks to know what they are about, so it's very useful to have the words people will search for related to your story inside the URL/permalink.
Default Permalink: In WordPress the permalink of a post is, by default, automatically generated by converting the title into a URL (replacing spaces with dashes and removing any special symbols and punctuation). This system is very useful because by default it makes sure that keywords in your title are in your URL, but it isn't always the most effective. Some kinds of headlines, like questions or "teasers" designed for sharing on social media might not have all the important keywords in it, so it's often good to edit the permalink and make sure that it is the ideal URL, regardless of what you chose as your title.
Never edit a permalink on a published post
As soon as a post is published it's URL is sent out to the internet in our RSS feed and many other ways, and changing the permalink will make all those links lead to 404 errors, so never edit it after this point unless there's a very important reason! Instead always double-check the permalink before publishing your posts.
Editing The Permalink
A draft's permalink can be edited using the Permalink display right below the post's title on the edit screen. Once a draft is saved you'll see the Permalink listed along with an Edit button. Clicking Edit will show a field where you can change the text, then click OK when you're done and save the draft immediately to make sure your changes aren't lost.
Note that you should never leave empty spaces or special symbols in URLs, instead keep it to simple words separated by hyphens (-).
Multimedia
All posts should include some multimedia because it them more appealing to readers. The most important thing to remember regarding any use of multimedia is that a credit of some sort is required every time. For more information on copyright and permissions for use, please refer to Multimedia Copyright and Attribution.
Adding Images
All posts should have an image at the top. If images are the focus of a post or it contains many beautiful photos, please select the Photos category. If you want to include an image in a post that is graphic or violent, please be sure to review our obscene, offensive and graphic content guidelines.
Uploading and Inserting Images
You should always re-upload images from other sites to our WordPress installation before inserting them into a post. While it's possible to insert them using the image URL from another site (commonly referred to as "hotlinking"), it a bad idea to do so for various security and longevity reasons.
Steps to upload and insert an image:
- Ensure you have permission to use the image.
- Find the largest version of the image available (ideally over 800px wide).
- Download the file to your own computer.
- Rename the file so that its name is descriptive. This is important because Google shows results based on image names having keywords. For example:
- Bad: IMG003893.jpg
- Good: bangladeshcomputerlab.jpg
- Upload the file to WordPress. Click the Add Media button above the post editor, then the "Upload Files" link in the popup.
- Fill in the image metadata fields (described below) with as much detail as possible.
- Choose the alignment, link and size settings that fit your image.
- Use the Insert into Post button to add it to the post.
- The image will go where the cursor was before you pushed the Add Media button.
Image Shapes, Sizes and Alignment
Uploaded images can be inserted at three sizes: Medium (about half the post width), Large (full post width) and Full Size (Full is whatever size the image was before uploading).
If possible, posts should begin with a full-width "Large" image that illustrates the story and sets the tone. You can have as many other images as you want throughout the post, either photos at full width or right/left-aligned images at half-size.
Here are guidelines for choosing how to embed an image:
- Landscape Images (wider than tall):
- If a wide image is important, use "Large" size with no alignment (full post width).
- If the image isn't quite big enough for "Large" size, use "Full" (original) size with no alignment.
- If the image is small or poor quality, use "Medium" size and align right or left.
- Portrait Images (taller than wide):
- Tall images should usually be inserted at "Medium" size because the "Large" size will be too tall for smaller screens.
- Consider cropping tall images to square or 4:3 format so they can be shown at full width.
- Align tall images right or left.
- Right or Left-Aligned Images:
- For all aligned or floated images, use "Medium" size.
- Aligned or floated images will be shown at 50% of post width regardless of size.
- Avoid having many aligned images in a row. There should be paragraphs between them to avoid rendering issues.
Note on "Center" alignment: Images should almost never be centered in a post because it makes them fit badly against the frame of the site. Either use the "Right" or "Left" alignment (to make the image half width) or leave the alignment at "None" (which will make it left-aligned in most languages but right-aligned for right-to-left languages like Arabic).
Note on super-tall infographic images: If a tall image must be more than 600px tall (i.e. an infographic where users are expected to scroll to see it all) then embed the “Full” (original) size rather than "Large", but before uploading such an image please resize it to 800px wide to avoid wasting bandwidth.
Image Settings
For each image you upload, please look through all of the fields and settings before inserting it into a post:
Title: Short text identifying the photo, like a headline just for this image. If the image is a link people will see the title when they hover over the image.
Caption: Text that shows below the image. It should summarize the content briefly and attribute the author and source of the photo as well as indicate permission for use. See the Style Guide section on images for more information.
Alt Text: Usually the same as Title. Should describe what the photo shows, this is used for visually impaired people to know what is in the image.
Description (optional): A more detailed explanation of the photo, if you want.
Alignment: Whether the image will float to the left, center, right or not at all. See Image Shapes, Sizes and Alignment section above for guidelines.
Link to: Where the visitor is taken when they click the photo. Whenever possible choose "Custom URL" and enter the URL where you found the photo. Never use "Attachment Page".
Size: Whether to insert the "Large", "Medium" or "Full" size of the image. See Image Shapes, Sizes and Alignment section above for guidelines.
Tip: Always check how images look using the Preview button
Image embeds can have strange interactions with text styles that aren't obvious when editing a post. Before publishing always check the post preview to make sure everything looks right.
Image-related screencasts:
Note: These are out of date. Please be patient and we will make some new videos soon.
- Screencast: Images and thumbnails in posts on Global Voices
- Screencast: Links in images and image captions on Global Voices
- Screencast: Copyright and Creative Commons Basics on Global Voices
Thumbnails
Thumbnails are the small square images that show in all archives next to the post excerpt. Every post should have a thumbnail chosen.
For attribution purposes, a full (non-square) version of the thumbnail should also be present inside the post content along with a caption stating the image's source. If the image can't be inserted in the post add a note at the bottom of the post stating its source.
Choosing a thumbnail
To set a thumbnail, find the GV Post Thumbnail Chooser box on the post editing screen and click on the image you want to use. Images uploaded to a post should be present in the box once you have saved the post (i.e. save the post as a draft after uploading a new image so that it will show in the thumbnail box).
If you already have the URL of a square thumbnail image from another GV post (i.e. if you are working on a translation) then it can be entered in the Use this URL field in the thumbnail box. Be very careful with this setting though; only square images should be used.
Cropping thumbnails for visibility
Some photos become confusingly small when shrunk down to thumbnail size. In such cases, you should upload a new version that is cropped to show a smaller part of the image and use that for the thumbnail.
You can crop it on your local computer (Preview on Mac works well) or use the image cropping tool inside WordPress after uploading, but if you use the WordPress tool please re-upload the image first so that your cropping doesn't affect the original version of the image that you embed inside the post.
Featured Images
Featured images on GV are similar to thumbnails but much larger (400px wide by 300px high). They are used if the post is featured by an editor so that it shows in the sliding features box on the home and category pages.
Like thumbnails, featured images should also be in the body of the text with a caption for proper attribution.
Before adding a featured image, check that the size is at least 400 x 300px. Otherwise it won't fit.
Choosing a featured image
To add a featured image use the "Featured Image" box in the right sidebar of the WordPress post editor. Click "Set Featured Image" to open the image uploader popup. Either upload a new image or go to the "Media Library" tab at the top to see a list of photos already uploaded.
Click the image you want and use the Set Featured Image button to save your choice.
When the post has been published please check the homepage to ensure your featured image looks good in the slider.
Adding Videos
Videos can be a dynamic addition to a post, either as the subject of the story or for background information or flavor. We don't usually create original video at Global Voices and our site is not set up to actually host custom video. We do, however, encourage you to embed video from YouTube or similar sites when it is relevant to your story.
Always describe the video and link to its original source in addition to embedding it. Please see the Style Guide for more details. If you want to include a video in a post that is graphic or violent, please be sure to review the graphic content guidelines first.
Make sure embeds work in both the Visual and Text/HTML tabs of the editor. Some embeds may not work in the Visual editor because of its strict standards even though they work in the HTML editor. You should never depend on using only the HTML editor in these cases, and instead find another way to link to the content. See the Visual and HTML Editing Modes section for details.
Embedding YouTube Videos
Embedding a YouTube video is easy, but it's important you do it the right way. The HTML code you can copy on the YouTube site is very finicky and can break when viewed in the Visual editor and/or when it is imported for translation. To avoid this issue, you should always use the simplified WordPress embed system. See the WordPress Codex article about embeds for more.
The process is simple: Copy the URL of the video you want to embed and paste it into the post on its own line, like this:
Here is a video that illustrates my point:[embed]http://www.youtube.com/watch?v=k0jNwMR9FiM[/embed]
There you have it.
This system is great because if the video or the embedding system ever break your visitors will still see the link to the video. It will still work if you skip the [embed] and [/embed] tags, but if the embed ever stops working those tags will help visitors understand what you expected them to see.
Embedding Other Kinds of Video
The YouTube embedding system is actually very general (based on a standard called oEmbed), and a lot of other kinds of videos can be embedded the same way.
The full list is very long and includes Vimeo, Flickr, DailyMotion and Viddler, among others.
If you try the [embed] method and it doesn't work, then you can use whatever HTML the video site gives you for embedding, but please make sure that the embed code works well with both the HTML and Visual editors.
If the Embed Just Won't Work
If an embed does not work with both the HTML and Visual editors (or if it doesn't work with either) you can always take a screenshot of the video and embed it in the post instead. Hyperlink the screenshot to the video from its original source so that when people click they will be taken to the video.
That is a foolproof method when things get too complicated and is not likely to cause any problems during saving or translation.
Video Subtitles
Formerly known as "Universal Subtitles", Amara is a service that lets you add subtitles to videos hosted on YouTube. GV sites support embedded videos with Amara subtitles, so translators are free to use the service. To embed, use the normal [embed] system, but with the unisubs attribute set to 1. For example:
[embed unisubs="1"]http://www.youtube.com/watch?v=k0jNwMR9FiM[/embed]
Note: Currently, Amara is unable to handle the YouTube short URLs with the domain youtu.be. You must always use the full youtube.com version of the URL instead.
Global Voices Amara Team
Global Voices has a team you can join on Amara, where videos that need subtitles can be added and worked on. Read the Using Amara To Subtitle Videos guide to learn how to become a member of the team and add subtitles to videos.
Adding Sound
Like video the method for embedding a sound file in a post with a player depends on the source of the audio file.
Soundcloud
Embedding soundcloud files only requires the URL of the audio file and the [embed] tag, similar to YouTube:
[embed]https://soundcloud.com/radioambulante/los-43-11[/embed]
The post will show a big player for the audio file.
Embedding an MP3
Embedding an MP3 that's already on the web is easy. Our podcasting plugin "Powerpress" has a shortcode that will output a small player for your audio:
[powerpress url='https://archive.org/download/GvPodcast8/GV8.mp3']
Note: This will only output the small player. You should always have text above or below the player explaining what the audio is, linking to the source website and with a direct "download" link for the file itself.
Note: Please don't upload audio files to the GV WordPress installation! Our server is not set up for audio hosting and it is very innefficient. Instead upload your audio to Archive.org as described below.
Archive.org
The recommended way to embed audio files on Global Voices is to first upload them to Archive.org, then insert that file in the post using the MP3 method described above.
Why we upload to Archive.org
Archive.org is a non-profit similar to GV but specializing in hosting Creative Commons media for free. Their site is specifically configured to host audio and video, so it's fast and reliable even though it costs nothing.
Uploading a file to Archive.org
- Visit archive.org/create
- Create an account or log in.
- Use the Upload tool and choose your file.
- Fill out the metadata options to the best of your knowledge. Specifically
- Give your audio a Creative Commons Attribution-only license (CC-BY) in the License section by choosing "Creative Commons" then checking the box for "Allow remixing" (this matches the license used on GV posts).
- In Subject Tags add 'globalvoices' and any other tags that make sense.
- When it finishes uploading you'll see the media page for your item.
- Find the Download Options listed in the right-hand sidebar.
- Copy the url for "VBR MP3" by right-clicking it and choosing "Copy Link Address" (or equivalent in your browser).
Inserting the file in a post Once you have the link copied, embed it in your post with [powerpress url=] as described above.
Note about archive.org URLs: There is a quirk in the Archive.org system where the URL you copy from the link is not the same as the one you arrive at when you click it, because you are redirected to a special optimized URL at that point. Please always use the original URL copied from the link (like https://archive.org/download/...) rather than the optimized one (which looks like https://ia902600.us.archive.org/.....)
PRI.org
We embed audio players from Public Radio International as part of a partnership with them.
Currently the best format for the embed (iframe) code is as follows, which is the default embed code they give with style='width:100%; added.
<iframe frameborder="0" src="http://www.pri.org/node/80307/embedded" height="75" width="320" style='width:100%;'></iframe>
Of course you would replace the URL with the URL for a particular piece of audio.
Note: There may be issues loading the PRI embed over HTTPS, so please ensure there is always a link to another site where the player is working.
Adding Social Media
Quoting and embedding social media from around the world is a big part of many Global Voices stories. Below are guidelines for the technical aspects of including content from various services.
In all situations, be mindful of other people's expectations of privacy in their online postings. Don't quote or embed postings that are private and consider the safety of the original author before quoting from any service. For editorial guidelines, please see the Commentary section of the Style Guide.
Embedding tweets from Twitter.com
In most cases the best way to quote a tweet is using the embed code from Twitter:
- Find the tweet on Twitter.com
- Hover over the tweet and click the "•••more" button.
- Choose "Embed" and copy the HTML that pops up.
- Click on the "Text" tab of your post in WordPress, paste the embed HTML in to the post editor.
Note: This will not work with the "Visual" editor in WordPress. You will have to use the "Text" editor while embedding tweets.
The resulting code will have a <blockquote> with the full tweet text as well as a name credit and timestamp, which is convenient because it means you don't have to worry about those things. Even though it's simple in the editor, when you preview and publish your post, the tweet will show with images and Twitter styling because of Javascript.
Manually creating a tweet quote
If you decide for some reason not to use the embed code from Twitter, you should wrap the tweet text in a <blockquote> and ensure that it has the following elements inside:
- The @name of the Twitter user linking to their profile.
- The full text of the tweet, including any links.
- If there are other @mentions in the tweet, link them to the relevant Twitter user.
Never insert a screenshot of a tweet into a posts
A screenshot of a tweet can seem like a simple solution, but has several flaws that make it unacceptable, including that they are not readable by visually impaired people and are hard for translators to manage. Please never use screenshots when quoting from Twitter.
Translating tweets
When the tweet is not in the same language as your post, simply include a translation blockquote (<blockquote class='translation'>) after the tweet embed code (<blockquote>). See the #Translation_Quotes section of this document for details and tips for using them.
- Only translate the content of the tweet itself. The links, date and username will already be visible inside the original tweet embed.
- Never translate the tweet embed code. Add a new translation blockquote for the translated text.
- Do not translate hashtags.
- If you need to add an editors note into your translation (e.g. to explain an abbreviation), wrap it in square brackets ([...]).
For editorial guidelines on using tweets in a post, please refer to the Style Guide.
For the moment, we don't use Facebook's embed code because if the Facebook publication is ever deleted, it will also disappear from our post. We also avoid using screenshots of Facebook publications because they are not readable by visually impaired people and are hard for translators to manage.
To quote from a Facebook publication, simply copy the text, paste it into a post and wrap it in a <blockquote> tag. Be sure to include a link to the original publication.
For editorial guidelines on using Facebook content in a post, please refer to the Style Guide.
Images and videos from the Instagram sharing service can be embedded using the [embed] code with the URL of a particular item (like many other embed types). For example:
[embed]http://instagram.com/p/trxJ5qQS07/[/embed]
Getting the URL of an Instagram post can be tricky, but it's fast and easy once you know how:
- On the page for a single image, just copy the URL and insert it in a post as shown above.
- On a user's page you'll see a grid of images. When you click on one a modal popup will load and the URL of your address bar will change to be the URL for only that image. Copy it and insert it in your post as shown above.
- On your homepage (list of full images with text) you can get the URL for an image by clicking the "..." button below it and choose "View photo page". Copy the URL of the resulting screen.
As with all embeds you should always have an explanation of why this post is important that includes a direct link to it in case the embed one day breaks.
Vine
Vine is a Twitter subsidiary service that hosts six-second videos. Embedding of Vine posts is supported on the Global Voices site using the [embed] code similar to YouTube videos. For example:
[embed]https://vine.co/v/huhh5eLVgB2[/embed]
would be replaced by the video when the post is viewed. By default the video autoplays and loops forever (the nature of Vines), but sound doesn't play unless requested by the user.
To enable sound by default (not recommended as it can annoy readers), add "play-audio" in the embed code:
[embed play-audio]https://vine.co/v/huhh5eLVgB2[/embed]
To use the alternate "postcard" format (more info surrounding the video), pass it as the "type" parameter:
[embed play-audio type='postcard']https://vine.co/v/huhh5eLVgB2[/embed]
As with all external media, any embedded Vines should be accompanied by an explanation of who the creater is and why the video is interesting or important. There should also be a text link to the vine's URL, in case the embedded video stops working in the future.
Storify
Storify is a social media aggregation tool we sometimes use to quickly assemble stories from Twitter and Facebook. We only use it in breaking news situations where the increased speed is vital.
Bear in mind that "Storified" posts can not be translated directly because it stores the tweets in a locked-up format, so to facilitate translation all posts will have to be manually "de-storified" by an editor, with tweets broken out into text blockquotes, which is quite time-consuming.
Video Tutorials
If you need any extra help, check out the Global Voices video tutorials.
