文章分享到facebook_如何将博客文章转换为Facebook Instant Articles-无需编码

文章分享到facebook

by Nicholas Walsh

尼古拉斯·沃尔什(Nicholas Walsh)

如何将博客文章转换为Facebook Instant Articles-无需编码 (How to convert blog posts into Facebook Instant Articles — no coding required)

A friend of mine asked me to help convert articles that were previously posted to their site into Facebook Instant Articles. Afterwards, I decided to compile a guide to help nontechnical people convert their old articles, blog posts, or online content.

我的一个朋友要我帮助将以前发布到其网站的文章转换为Facebook Instant Articles。 之后，我决定编写一份指南，以帮助非技术人员转换其旧文章，博客文章或在线内容。

Even if you don’t know what Facebook Instant Articles are, you may already be using them. According to Facebook IA’s FAQ page:

即使您不知道什么是Facebook Instant Article，您可能已经在使用它们。 根据Facebook IA的常见问题页面：

“Instant Articles is a mobile publishing format that enables news publishers to distribute articles to Facebook’s app that load and display as much as 10 times faster than the standard mobile web.”

“即时文章是一种移动发布格式，它使新闻发布者可以将文章分发到Facebook应用程序，其加载和显示速度比标准移动网络快10倍。”

IA’s dictate a content publishing standard that results in both a pleasing design, and optimized performance for articles opened from within the Facebook mobile app. You can read more about the benefits of IA’s.

IA规定了一种内容发布标准，该标准可为从Facebook移动应用程序中打开的文章提供令人满意的设计和优化的性能。 您可以阅读有关IA 好处的更多信息。

Facebook offers a plethora of ways to fast-track IA production and conversion. Yet it seems the current guides are for developers or larger enterprises that have a more complex publishing ecosystem.

Facebook提供了多种方法来快速跟踪IA的生成和转换。 但是，当前的指南似乎是针对具有更复杂发布生态系统的开发人员或大型企业的。

It is hard to find guides for converting previously posted articles that don’t involve using the Facebook IA API, PHP SDK, or the WordPress plugin. For non-developers, most of these tools require too much technical experience. Even when one tries to find the WordPress plugin tutorial, one has to dig into the documentation in Facebook’s developer portal . This is not ideal for non-developers who become dissuaded before they can ever find this page.

很难找到不涉及使用Facebook IA API，PHP SDK或WordPress 插件的已发布文章的转换指南。 对于非开发人员，大多数这些工具都需要太多的技术经验。 即使有人试图找到WordPress插件教程，也必须深入研究Facebook开发人员门户中的文档。 对于非开发人员在找到该页面之前被劝阻的人来说，这是不理想的。

Let’s work together to convert any article already published on the web into a Facebook Instant Article! For our tutorial, we’ll be using the article about a celebrity dog from the movie ‘Anchorman’.

让我们共同努力，将已经在网络上发布的任何文章转换为Facebook即时文章！ 对于我们的教程，我们将使用电影“ Anchorman ”中有关名人狗的文章。

让我们开始吧！ (Let’s Groove!)

Step 0: Prep

步骤0：准备

We won’t need to install any plugins or integrations, but we will need a text editor to work with the HTML source code. There are a lot of different code-oriented text editors, but for the sake of this example, I recommend Sublime. It has all the features we’ll need, and is easy to use out of the box with a fresh install.

我们不需要安装任何插件或集成，但是我们需要一个文本编辑器来处理HTML源代码。 有很多不同的面向代码的文本编辑器，但是出于这个示例的缘故，我推荐Sublime 。 它具有我们需要的所有功能，并且全新安装后即可轻松使用。

Once you install Sublime, we’re going to want to download the code template that we’ll be using from GitHubGist.

安装Sublime之后，我们将要从GitHubGist下载我们将使用的代码模板 。

On the right side of the screen: 1. Right click the "Raw" button2. Click "Save link as..." By default, it should save as an HTML file with the name "template".

Now we’ve got the code editor and the template code that we’ll be editing!

现在，我们有了将要编辑的代码编辑器和模板代码！

For the last step of setup:1. Boot up Sublime2. Open the template file we downloaded

第1步：获取横幅图像 (Step 1: Getting the Banner Image)

Hop back over to your internet browser and find the article you wish to convert on its’ live site. We’re going to first grab the banner image, which we’ll use at the top of the Facebook Instant Article.

跳回您的Internet浏览器，并在其实时站点上找到您想要转换的文章。 我们将首先获取横幅图像 ，它将在Facebook Instant Article的顶部使用。

To do this, right click the image, and select “Copy image address”.

为此，右键单击图像，然后选择“复制图像地址”。

Switch back to the template that we have open in Sublime. Search for the

tag in the code, located on line 35 (line number is visible on the left edge).

切换回我们在Sublime中打开的模板。 在代码的第35行中搜索

标记(行号在左边缘可见)。

Highlight the original URL located between quotes on line 36, and replace it by pasting the image address that we copied from the banner image. Make sure there are double quotes on each side of the URL to preserve the format. And make sure to not delete the “ />” at the end of the line.

Edit the text inside of 
 
 with the caption that you will want to appear below the image. This is often where the image attribution goes.

Notice how we’re careful not to change any of the formatting of the code. Messing around with the tags themselves will cause errors later on when we try to render the website. Sublime colorizes our code, which helps us recognize mistakes or mismatching HTML tags.

注意我们如何小心不要更改任何代码格式。 稍后，当我们尝试渲染网站时，将标签本身弄乱会导致错误。 Sublime为我们的代码增色，这有助于我们识别错误或HTML标签不匹配。

Pay extra close attention to how we replaced the text for the figure caption. We’re going to be editing lots of other values in exactly the same way.

请特别注意我们如何替换图形标题的文本。 我们将以完全相同的方式编辑许多其他值。

步骤2：检索元数据 (Step 2: Retrieving the Metadata)

There’s a bit of info we’ll need to collect now. Since most of this data should be retrievable without digging through the source code, manually copying this info works well. We’ll need this source code later though, so there’s no harm in opening it now.

现在我们需要收集一些信息。 由于大多数数据应可检索而无需深入了解源代码，因此手动复制此信息效果很好。 不过，我们稍后将需要此源代码，因此现在打开它没有害处。

• Original Article URL
  原始文章网址
• Article Title
  文章标题
• Article Subtitle
  文章字幕
• Article Author(s)
  文章作者
• Date & Time article was originally published
  日期和时间文章最初发表
• Date & Time article was last updated
  日期和时间文章最近更新

If it’s difficult to get this info, we can use the source code from the website. How you access this data will depend on which browser you’re using.

如果很难获得此信息，我们可以使用网站上的源代码。 您如何访问这些数据将取决于您使用的浏览器。

Chrome: CTRL + U, or Right Click → View Page SourceFirefox: Right Click → View Page SourceSafari: Safari menu → Preferences → Advanced, Enable "Show Develop menu in menu bar", then Develop menu → Show Page Source

Now that we’ve got the source code and original website up, let’s start looking for our info.

现在我们已经有了源代码和原始网站，让我们开始寻找我们的信息。

Title: Copy the title of the article, and use it to replace “Article Title” within the

tags on line 14 of the template. In the source code, this is usually within the tags. For example,

标题：复制标题的文章，并用它来代替内“文章标题”在

标记系统在模板上的14行。 在源代码中，通常位于