Home » Uncategories » artikel facebook .com
Edit

artikel facebook .com

Membuat Artikel Instan

Panduan ini akan memperkenalkan struktur dasar dokumen Artikel Instan. Panduan ini juga menjelaskan cara membuat versi Artikel Instan konten berbasis web standar. Artikel sampel disediakan untuk menunjukkan penggunaan markup Artikel Instan.
Artikel Instan merupakan dokumen HTML5 yang dioptimalkan untuk kinerja seluler yang cepat, kemampuan mengisahkan cerita yang beragam, desain bermerek, dan tampilan visual yang dapat disesuaikan. Artikel Instan menggunakan bahasa markup yang sudah distandarkan untuk menerapkan gaya dan fungsionalitas ke cerita. Markup ini dapat ditangani secara otomatis, untuk mengaktifkan penerbitan otomatis dari seluruh kabar berita konten pada berbagai skala. Atau, ini dapat diterapkan secara manual, untuk membuat cerita yang dipesan lebih dulu, yang memanfaatkan kemampuan Artikel Instan yang unik serta elemen media yang beragam. Panduan ini menyediakan ikhtisar umum markup Artikel Instan, namun untuk panduan terperinci, Anda dapat melihat Referensi Format Artikel Instan.
Setelah Anda mengenal dan memahami struktur dokumen Artikel Instan yang dijelaskan di sini, baca panduan Penerbitan Artikel Instan untuk mempelajari cara menerbitkan Artikel Instan di Facebook, baik secara manual maupun otomatis.

Persyaratan

Artikel Instan dikelola di dalam framework Halaman Facebook. Untuk mulai menerbitkan Artikel Instan, Anda harus memiliki:
  • Halaman Facebook yang sudah ada.
  • Peran pengurus atau Penyunting di Halaman.
Jika Anda belum memiliki Halaman, buat Halaman baru.
Artikel Instan tersedia di perangkat iPhone dan Android. Perangkat lunak yang diperlukan adalah Facebook untuk iPhone versi 30.0 dan iOS 7.0 atau yang lebih baru, atau Facebook untuk Android Versi 57 dan Android Jelly Bean atau yang lebih baru.

Cara Memformat Artikel Instan

Artikel Instan dibuat dengan HTML5, sehingga penentuan elemen halaman dilakukan dalam cara yang serupa dengan penerbitan web standar. Di banyak kasus, penerbit dapat menggunakan kembali kode yang dibuat untuk artikel berbasis web mereka guna membuat versi yang berfungsi sebagai Artikel Instan.
CSS tidak mendukung penentuan gaya. Lihat Panduan Desain untuk memperoleh informasi tentang proses membuat dan mengubah gaya.

1. Elemen Artikel yang Diperlukan

Masing-masing Artikel Instan memerlukan beberapa informasi dasar untuk menentukan bagaimana artikel akan ditampilkan kepada para pembaca. Metadata ini ditentukan dalam <head> dokumen HTML, beserta informasi seperti URL kanonikal (yang menautkan Artikel Instan kembali ke counterpart berbasis webnya) dan gaya spesifik yang akan diterapkan ke konten tersebut.
Tautan kanonikal diperlukan dalam <head> setiap Artikel Instan, dan ini akan menjadi URL absolut. Jika URL ini tidak ditampilkan, Facebook akan menampilkan tautan kanonikal yang ditentukan untuk <item> di umpan RSS Anda. Jika tautan kanonikal tidak disediakan, baik di <head> artikel maupun umpan RSS, maka Facebook akan mengabaikan artikel tersebut.
<head>
  <meta charset="utf-8">
  <meta property="op:markup_version" content="v1.0">

  <!-- The URL of the web version of your article --> 
  <link rel="canonical" href="http://example.com/article.html">
  
  <!-- The style to be used for this article --> 
  <meta property="fb:article_style" content="myarticlestyle">
</head>
Untuk detail tambahan tentang cara menyiapkan konfigurasi level artikel dari Artikel Instan Anda, lihat Referensi Format Artikel Instan.

2. Menentukan Header Artikel

Saat pertama kali pembaca membuka Artikel Instan, mereka akan melihat header artikel yang berfungsi sebagai "sampul" visual untuk konten isi. Header setiap Artikel Instan ditentukan oleh elemen di bagian <header> dari blok <article>, yang ada di <body> dokumen HTML. Elemen-elemen ini termasuk:
  • Jenis media: Gambar atau Video
  • Judul
  • Subjudul
  • Pengarang
  • Kicker
  • Waktu Diterbitkan
  • Waktu Diubah
Anda dapat memilih elemen waktu penerbitan mana (hari, tanggal, bulan, tahun, dan jam) yang akan muncul di artikel Anda pada alat Editor Gaya. Pelajari cara melakukannya di bagian Membuat dan Mengubah Gaya di Panduan Desain Artikel Instan.
<body>
  <article>
    <header>
      <!-- The cover image shown inside your article --> 
      <figure>
        <img src="http://mydomain.com/path/to/img.jpg" />
        <figcaption>This image is amazing</figcaption>
      </figure>
      
      <!-- The title and subtitle shown in your article -->
      <h1> Title </h1>
      <h2> Subtitle </h2>

      <!-- A kicker for your article -->
      <h3 class="op-kicker">
        This is a kicker
      </h3>

      <!-- The author of your article -->
      <address>
        <a rel="facebook" href="http://facebook.com/brandon.diamond">Brandon Diamond</a>
        Brandon is a avid zombie hunter.
      </address>

      <!-- The published and last modified time stamps -->
      <time class="op-published" dateTime="2014-12-11T04:44:16Z">December 11th, 4:44 PM</time>
      <time class="op-modified" dateTime="2014-12-11T04:44:16Z">December 11th, 4:44 PM</time>
    </header>
  </article>
</body>
Untuk detail tambahan cara mengonfigurasikan sampul Artikel Instan, lihat Referensi Format Artikel Instan.

3. Pemformatan Konten Isi

Elemen HTML standar yang menentukan elemen isi artikel berbasis web Anda juga menentukan elemen terkait untuk versi Artikel Instan. Teks isi di artikel Anda ditentukan menggunakan label <p>, sedangkan konten gambar dan video ditentukan menggunakan elemen <figure>.
<body>
  <article>
    <!-- Body text for your article -->
    <p> This is some Instant Article content. </p> 

    <!-- A video within your article -->
    <figure>
      <video>
        <source src="http://mydomain.com/path/to/video.mp4" type="video/mp4" />
      </video>
    </figure>

    <!-- An image within your article -->
    <figure>
      <img src="http://mydomain.com/path/to/img.jpg" />
      <figcaption>This image is amazing</figcaption>
    </figure>

  </article>
</body>

4. Membuat Elemen Media Beragam

Selain teks isi artikel standar, Artikel Instan juga menyediakan dukungan untuk elemen media yang beragam, seperti suka dan komentar di media serta peta interaktif. Elemen berikut ini diimplementasikan dengan HTML5 sederhana, dan diimplementasikan secara native dalam Artikel Instan untuk menyediakan kenyamanan bagi para pembaca. Elemen spesial ini termasuk:
  • Tayangan slide
  • Peta Interaktif
  • Media dengan Geotag
  • Suka dan Komentar di Media
<body>
  <article>
    <!-- A slideshow within your article -->
    <figure class="op-slideshow">
      <figure>
        <img src="http://mydomain.com/path/to/img1.jpg" />
      </figure>
      <figure>
        <img src="http://mydomain.com/path/to/img2.jpg" />
      </figure>
      <figure>
        <img src="http://mydomain.com/path/to/img3.jpg" />
      </figure>
    </figure>
        

    <!-- A map within your article -->
    <figure class="op-map">
      <script type="application/json" class="op-geotag">  
        {
          "type": "Feature",
          "geometry": 
            {
              "type": "Point",
              "coordinates": [ [23.166667, 89.216667], [23.166667, 89.216667] ]    
            },    
          "properties": 
            {      
              "title": "Jessore, Bangladesh",      
              "radius": 750000,      
              "pivot": true,      
              "style": "satellite",
            }
        }  
      </script>
    </figure>

    <!-- A geotagged image -->
    <figure>
      <img src="http://mydomain.com/path/to/img.jpg" />
      <script type="application/json" class="op-geotag">  
        {
          "type": "Feature",    
          "geometry":
            {      
              "type": "Point",
              "coordinates": [ [23.166667, 89.216667], [23.166667, 89.216667] ] 
            },    
          "properties":
            {
              "title": "Jessore, Bangladesh",
              "radius": 750000,
              "pivot": true,
              "style": "satellite",
            }  
        } 
      </script>
    </figure>

    <!-- An image with likes and comments enabled-->
    <figure data-feedback="fb:likes,fb:comments">
      <img src="http://foo.com/1.jpg"/>
      <figcaption>Image caption</figcaption>
    </figure>

  </article>
</body>

5. Menambahkan Media Sematan

Anda dapat menyematkan media eksternal secara langsung di dalam Artikel Instan Anda. Media eksternal dapat berisi grafik interaktif dari situs web Anda, konten dari jaringan seluler, atau iklan. Konten sematan ditentukan menggunakan elemen <figure> HTML5 standar, dengan kelas spesifik yang disediakan untuk jenis konten berbeda, seperti yang ditampilkan berikut ini:
<body>
  <article>
    <!-- An interactive graphic -->
    <figure class="op-interactive">
      <iframe class="no-margin" src="http://example.com/custom-interactive" height="60"></iframe>
    </figure>

    <!-- A post from Instagram -->
    <figure class="op-social">
      <iframe>
        <!-- Include Instagram embed code here -->
      </iframe>
    </figure>

    <!-- An advertisement -->
    <figure class="op-ad">
      <iframe src="https://www.adserver.com/ss;adtype=banner320x50" height="60" width="320"></iframe>
    </figure>

  </article>
</body>

6. Mengonfigurasi Pratinjau Kabar Berita

Saat pembaca melihat Artikel Instan di Kabar Berita Facebook, mereka akan melihat pratinjau artikel (hampir serupa dengan pratinjau artikel yang ditampilkan di Kabar Berita untuk artikel versi web). Secara default, pratinjau Kabar Berita untuk Artikel Instan ditampilkan dengan judul, deskripsi, dan gambar yang sama dengan versi artikel berbasis web Anda. Informasi ini ditentukan menggunakan tag meta Graf Terbuka yang terletak di <head> artikel versi web Anda.
Informasi ini tidak ditentukan secara langsung di markup untuk artikel versi Artikel Instan. Ini harus berada di dalam artikel versi web.
<head>
  <meta property="og:title" content="Article title">
  <meta property="og:description" content="Article description">
  <meta property="og:image" content="http://myserver.com/image.jpg">
</head>

Menerbitkan dan Menyunting Artikel

Anda dapat mengotomatisasi penerbitan Artikel Instan di Facebook dengan umpan RSS aman. Selain itu, Facebook menyediakan editor artikel berbasis web yang dapat diakses melalui Halaman Facebook. Alat editor ini memungkinkan Anda menyunting dan menerbitkan Artikel Instan individual secara manual.
Untuk mendapatkan penjelasan selengkapnya tentang cara menerbitkan Artikel Instan, lihat panduan Penerbitan Artikel Instan.

Artikel Sampel

Artikel sampel ini menunjukkan struktur Artikel Instan secara umum dan garis besar bagaimana pemformatan masing-masing komponen. Artikel ini diberikan semata-mata untuk tujuan ilustrasi dan pengujian.
Untuk melakukan live-demo artikel ini di CMS Artikel Instan, Anda memerlukan beberapa perubahan:
  • Ubah domain URL kanonikal agar co

0 Response to "artikel facebook .com"

Posting Komentar

Langganan: Posting Komentar (Atom)