文章分享到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 <figure> tag in the code, located on line 35 (line number is visible on the left edge).

切换回我们在Sublime中打开的模板。 在代码的第35行中搜索<figure>标记(行号在左边缘可见)。

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 <figcaption> </figcaption> 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 <h1> </h1> tags on line 14 of the template. In the source code, this is usually within the <title> </title> tags. For example,

标题：复制标题的文章，并用它来代替内“文章标题”在<h1> </ h1> 标记系统在模板上的14行。 在源代码中，通常位于<title> </ title>标记内。 例如，

<h1>Article Title</h1>

becomes

<h1>15 Minutes in the Life of Celebrity Dog Baxter from 'Anchorman'</h1>

Subtitle: Same as above, but with the subtitle. Use this to replace “Article Subtitle” within the <h2> </h2> tags on line 15 of the template.

字幕：与上述相同，但附带字幕。 使用此功能在<h2> </ h2> 标记系统对T的第15行，他替换模板“文章小标题”。

URL: Copy the URL of the live website’s article. Use this to replace the URL that appears on line 7 of the template. For example:

URL：复制实时网站文章的URL。 使用它替换出现在模板第7行的URL。 例如：

<link rel="canonical" href="http://example.com/article.html">

becomes...

<link rel="canonical" href="https://www.theatlantic.com/entertainment/archive/2013/12/15-minutes-life-celebrity-dog-baxter-anchorman/356235/">

Publication Time: On line 18 of the template, you can name the date and time the article was originally published. Be mindful that the “datetime” parameter takes a very specific format. The data inside of datetime=” ”determines metadata (not displayed), whereas the text between the “> </time>” tags will dictate what date is shown (can be in any format here).

发布时间：在模板的第18行，您可以命名文章最初发布的日期和时间。 请注意，“ datetime”参数采用非常特定的格式。 datetime = “”内的数据确定元数据(不显示)，而“ > < / time>”标记之间的文本将指示显示什么日期(此处可以采用任何格式)。

For example, <time class="op-published" datetime="2014-11-11T04:44:16Z">November 11th, 4:44 PM</time>

Displays as: November 11th, 4:44 PMLet's change it to: July 24th, 2017. 6:30 PM

<time class="op-published" datetime="2017-7-24T06:30:16Z">July 24th, 2017. 6:30 PM</time>

Last Update Time: Same plan as above, but on line 21 of the template.

Author(s): Lines 24–27 of the template represent an author whose name links to somewhere on the web. Lines 28–31 represent an author whose name is not linked. You can copy the entire block of code for that respective author, and paste it consecutive to the prior block, then edited as needed. You can also do this for multiple authors. See the example below for multiple authors with simple name + captions.

作者：模板的第24–27行代表其名称链接到网络上某处的作者。 第28–31行代表未链接其姓名的作者。 您可以复制该作者的整个代码块，并将其连续粘贴到上一个块，然后根据需要进行编辑。 您也可以为多个作者执行此操作。 请参阅以下示例，了解具有简单名称和标题的多个作者。

步骤3：复制正文内容 (Step 3: Copying the Body Content)

Now we’ll retrieve the article content that we want converted. There’s a large range of content types, such as mixed media, fancy JavaScript, embedded content. With more complicated content, the chance is higher that things won’t work without troubleshooting, so your mileage may vary.

现在，我们将检索要转换的文章内容。 内容类型种类繁多，例如混合媒体，精美JavaScript，嵌入式内容。 内容越复杂，如果不进行故障排除就无法解决问题，因此您的里程可能会有所不同。

I’m going to explain how to work with text, images (static or gifs), and video, since those are the basis for most Instant Articles that I’ve seen.

我将解释如何处理文本，图像(静态或GIF)和视频，因为这些是我见过的大多数即时文章的基础。

The source code is likely hundreds (or even thousands) of lines. An easy to trick for finding the start of the body content is to do a “Find” for the first few words of the article’s body text. We’ll want to copy from the <p> tag at the start of our body text until (and including) the </p> tag that follows the closing words of the article.

源代码可能是数百行(甚至数千行)。 查找正文内容开始的一个简单技巧是对文章正文的前几个单词进行“查找”。 我们将希望在正文文本的开头从<p>标记进行复制，直到(并包括)紧随文章结尾的</ p>标记为止。

Next, we’re going to need to dump this into our template. Near Line 58 in the template, there should be a line with the following:

接下来，我们需要将其转储到我们的模板中。 在模板中的第58行附近，应有一条包含以下内容的行：

<p> Article content </p>

Highlight this entire line, and paste over the body content that we copied from the live article source code. Note: we copied the opening <p> and closing </p> from the source code, which is why we’re pasting over them in the template here. There is some code within another set of <p></p> tags following the body text, but it’s styling — be careful not to copy this with your body text.

突出显示这整行，然后粘贴我们从实时文章源代码复制的正文内容。 注意：我们从源代码复制了开头<p>和结束</ p>，这就是为什么我们在此处将其粘贴在模板中的原因。 正文之后，在另一组<p> </ p>标记内有一些代码，但这是样式设置-请注意不要将其与正文一起复制。

*Have a video you’d like to incorporate in your IA? Change the URL between the <video> and </video> tags beginning around line 64, like we did with the Banner Image URL back in Step 1.

*您是否有想要纳入IA的视频？ 从第64行开始，在<video>和</ video>标签之间更改URL，就像在第一步中对Banner Image URL所做的一样。

Legal Notes: Line 84. This text will be very small, and at the very end of your article.

法律注释：第84行。此文本将很小，并且在您文章的最后。

第4步：风吹草动(广告，Analytics跟踪器等) (Step 4: Bells and Whistles (Ads, Analytics Trackers, and more))

I recommend skipping this step for now. If you’d like to confirm what we’ve done so far works, or if you don’t have custom ads or trackers, skip ahead to Step 5.

我建议暂时跳过此步骤。 如果您想确认到目前为止我们已完成的工作，或者没有自定义广告或跟踪器，请跳至步骤5。

One of the best things about Facebook Instant Articles, compared to other proprietary article conversion tools, is that you can keep the custom analytics trackers and advertisements that you already use on your own site.

与其他专有文章转换工具相比，Facebook Instant Articles最好的事情之一是，您可以保留自己的网站上已经使用的自定义分析跟踪器和广告。

Every custom integration will be different, and will likely vary in difficulty. For this example, we’ll be using ChartBeat, a traffic analytics and tracking tool. We can use a quick Google search for “ChartBeat Documentation”, to find the Getting Started Guide.

每个自定义集成都将有所不同，并且难度可能会有所不同。 在此示例中，我们将使用ChartBeat (流量分析和跟踪工具)。 我们可以在Google中快速搜索“ ChartBeat文档”，以找到《 入门指南》 。

Some companies’ documentation page may be geared towards developers. If that doesn’t work for you, search for a tutorial instead.

一些公司的文档页面可能面向开发人员。 如果这不适合您，请搜索教程。

ChartBeat gives us all the code and instructions for how to add their integration.

ChartBeat为我们提供了有关如何添加其集成的所有代码和说明。

In the guide, it tells us the following, so that’s what we’ll do:

在指南中，它告诉我们以下内容，因此我们将这样做：

Insert this script right before the closing </body> tag:

Now that we’ve add our ChartBeat tracker, we’ll need to make a few quick edits so that the tracker knows how to sync to our ChartBeat account.

现在，我们已经添加了ChartBeat跟踪器，我们需要进行一些快速编辑，以便跟踪器知道如何同步到我们的ChartBeat帐户。

Each highlighted line (except the “.useCanonical” one) will need an edit so that it can log the data.

每行突出显示的行(“ .useCanonical”行除外)都需要进行编辑，以便可以记录数据。

CHANGES (to the right of the "=").uid - The unique ID for your ChartBeat account.domain - The full domain of the original article.sections - The name of the 'section/genre/tags' your article belongs to.authors - The name of the author to associate with this piece

Bingo! You’ve added the tracker and it will associate the data it’s sending with your unique ChartBeat account. Save your edited template file, and let’s get ready to publish.

答对了！ 您已经添加了跟踪器，它将把发送的数据与唯一的ChartBeat帐户相关联。 保存您编辑的模板文件，然后准备发布。

步骤5：部署您的即时文章 (Step 5: Deploying your Instant Article)

On Facebook, go to the dashboard for the page you manage that you wish to post from. Navigate to Publishing Tools, and to the list of articles. Click the blue “+Create” button on the top right.

在Facebook上，转到您要发布的管理页面的仪表板。 导航到发布工具，然后到文章列表。 点击右上角的蓝色“ +创建”按钮。

You should now be prompted to paste the code for your new article.

现在，系统将提示您粘贴新文章的代码。

Select all the code from the template that we’ve been editing, and paste it in here. Hit save! You can publish that draft when you see fit, or schedule it to post at a predetermined time using the dashboard.

从我们一直在编辑的模板中选择所有代码，然后将其粘贴到此处。 点击保存！ 您可以在认为合适时发布该草稿，或使用仪表板安排它在预定时间发布。

恭喜，您完成了！ 我等不及要阅读您即将发表的精彩文章。 (Congrats, you’re done! I can’t wait to read the awesome articles you’re about to publish.)

Hey, I’m Nick Walsh.

嘿，我是尼克·沃尔什 。

I’m a Technical Evangelist for Wolfram Research and a Hackathon Coach for Major League Hacking, with a passion for technology, eSports, and empowering student developers.

我是Wolfram Research的技术布道者，也是美国职业棒球大联盟黑客的Hackathon教练，对技术，电子竞技充满热情，并赋予学生开发者权力。

翻译自: https://www.freecodecamp.org/news/how-to-convert-blog-posts-into-facebook-instant-articles-no-coding-required-fefea28c8701/

文章分享到facebook