"Drive'a Kaydet" düğmesini ekleyin

"Drive'a kaydet" düğmesi, kullanıcıların dosyaları web sitenizden Drive'a kaydetmesine olanak tanır. Örneğin, web sitenizde kullanıcıların indirebileceği çeşitli talimat kılavuzlarının (PDF) listelendiğini varsayalım. "Drive'a kaydet" düğmesi, kullanıcıların kılavuzları Drive'ım klasörüne kaydetmesine olanak tanımak için her kılavuzun yanına yerleştirilebilir.

Kullanıcı düğmeyi tıkladığında dosya, veri kaynağından indirilir ve veriler alındıkça Google Drive'a yüklenir. İndirme işlemi kullanıcının tarayıcısında yapıldığından bu işlem, kullanıcının dosyaları kaydetme işlemini mevcut tarayıcı oturumunu kullanarak doğrulamasını sağlar.

Desteklenen tarayıcılar

"Drive'a kaydet" düğmesi bu tarayıcıları destekler.

Sayfaya "Drive'a kaydet" düğmesini ekleme

"Drive'a kaydet" düğmesinin bir örneğini oluşturmak için web sayfanıza aşağıdaki komut dosyasını ekleyin:

<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g-savetodrive"
   data-src="//example.com/path/to/myfile.pdf"
   data-filename="My Statement.pdf"
   data-sitename="My Company Name">
</div>

Burada:

  • class, standart bir HTML etiketi kullanıyorsanız g-savetodrive olarak ayarlanması gereken zorunlu bir parametredir.

  • data-src, kaydedilecek dosyanın URL'sini içeren zorunlu bir parametredir.

    • URL'ler mutlak veya göreli olabilir.
    • data-src URL'si, düğmenin barındırıldığı alanla aynı alan, alt alan adı ve protokolden yayınlanabilir. Sayfa ve veri kaynağı arasında eşleşen protokoller kullanmanız gerekir.
    • Veri URI'leri ve file:// URL'leri desteklenmez.
    • Tarayıcının aynı kaynak politikası nedeniyle bu URL, yerleştirildiği sayfa ile aynı alan adından sunulmalı veya merkezler arası kaynak paylaşımı (CORS) kullanılarak erişilebilir olmalıdır. Düğme ve kaynak farklı alanlarda bulunuyorsa Farklı alanlardaki düğmeleri ve kaynakları işleme başlıklı makaleyi inceleyin.(#domain)
    • Aynı sayfa hem http hem de https tarafından sunulduğunda dosyayı sunmak için kaynağı protokol olmadan belirtin. Örneğin, data-src="//example.com/files/file.pdf", barındırma sayfasına nasıl erişildiğine bağlı olarak uygun protokolü kullanır.

  • data-filename, kayıt dosyası için kullanılan adı içeren zorunlu bir parametredir.

  • data-sitename, dosyayı sağlayan web sitesinin adını içeren zorunlu bir parametredir.

Bu özellikleri herhangi bir HTML öğesine yerleştirebilirsiniz. Ancak en sık kullanılan öğeler div, span veya button'dir. Bu öğelerin her biri, sayfa yüklenirken biraz farklı şekilde gösterilir. Bunun nedeni, tarayıcının öğeyi "Drive'a kaydet" JavaScript'i öğeyi yeniden oluşturmadan önce oluşturmasıdır.

Bu komut dosyası HTTPS protokolü kullanılarak yüklenmeli ve sayfadaki herhangi bir noktadan kısıtlama olmadan eklenebilmelidir. Performansı artırmak için komut dosyasını eşzamansız olarak da yükleyebilirsiniz.

Bir sayfada birden fazla düğme kullanma

Aynı sayfaya birden fazla "Drive'a kaydet" düğmesi yerleştirebilirsiniz. Örneğin, uzun bir sayfanın üst ve alt kısmında bir düğme olabilir.

Birden fazla düğme için data-src ve data-filename parametreleri aynıysa bir düğmeden yapılan kaydetme işlemi, benzer tüm düğmelerin aynı ilerleme bilgilerini göstermesine neden olur. Birden fazla farklı düğme tıklanırsa bunlar sırayla kaydedilir.

Farklı alanlardaki düğmeleri ve kaynakları işleme

"Drive'a kaydet" düğmeniz veri kaynağından ayrı bir sayfadaysa dosyayı kaydetme isteği, kaynağa erişmek için merkezler arası kaynak paylaşımını (CORS) kullanmalıdır. CORS, bir alandaki web uygulamasının farklı bir alandaki sunucunun kaynaklarına erişmesine olanak tanıyan bir mekanizmadır.

Örneğin, bir sayfaya http://example.com/page.html konumunda "Drive'a kaydet" düğmesi yerleştirilmişse ve veri kaynağı data-src="https://otherserver.com/files/file.pdf" olarak belirtilmişse tarayıcı kaynağa erişmek için CORS'u kullanamadığı sürece düğme PDF'ye erişemez.

data-src URL'si başka bir alandan sunulabilir ancak HTTP sunucusundan gelen yanıtların HTTP OPTION isteklerini desteklemesi ve aşağıdaki özel HTTP üst bilgilerini içermesi gerekir:

Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Range
Access-Control-Expose-Headers: Cache-Control, Content-Encoding, Content-Range

Access-Control-Allow-Origin, herhangi bir alandan CORS'a izin vermek için * değerine sahip olabilir veya alternatif olarak http://example.com/page.html gibi CORS aracılığıyla kaynağa erişimi olan alanları belirtebilir. İçeriğinizi barındırabileceğiniz bir sunucunuz yoksa Google App Engine'i kullanabilirsiniz.

Daha fazla bilgi için "Drive'a kaydet" düğmenize hizmet veren kaynakta CORS'u etkinleştirme hakkında sunucu belgelerinize bakın. Sunucunuzda CORS'u etkinleştirme hakkında daha fazla bilgi için Sunucuma CORS desteği eklemek istiyorum başlıklı makaleyi inceleyin.

JavaScript API

"Drive'a kaydet" düğmesi JavaScript'i, gapi.savetodrive ad alanında iki düğme oluşturma işlevi tanımlar. Otomatik oluşturmayı devre dışı bırakırsanız parsetags değerini explicit olarak ayarlayarak bu işlevlerden birini çağırmanız gerekir.

Yöntem Açıklama
gapi.savetodrive.render(
container,
parameters
)		 Belirtilen kapsayıcıyı "Drive'a kaydet" düğmesi widget'ı olarak oluşturur.
kapsayıcı
"Drive'a kaydet" düğmesi olarak oluşturulacak kapsayıcı. Kapsayıcının kimliğini (dize) veya DOM öğesinin kendisini belirtin.
parametreler
"Save to Drive" etiket özelliklerini data- önekleri olmadan anahtar=değer çiftleri olarak içeren bir nesne. Örneğin, {"src": "//example.com/path/to/myfile.pdf", "filename": "My Statement.pdf", "sitename": "My Company Name"}.
gapi.savetodrive.go(
opt_container
)		 Belirtilen kapsayıcıdaki tüm "Drive'a kaydet" etiketlerini ve sınıflarını oluşturur. Bu işlev yalnızca parsetags, explicit olarak ayarlanmışsa kullanılmalıdır. Bu ayarı performans nedenleriyle yapabilirsiniz.
opt_container
Oluşturulacak "Drive'a kaydet" düğmesi etiketlerini içeren kapsayıcı. Kapsayıcının kimliğini (dize) veya DOM öğesinin kendisini belirtin. opt_container parametresi atlanırsa sayfadaki tüm "Drive'a kaydet" etiketleri oluşturulur.

Açık yüklemeyle "Drive'a kaydet" JavaScript örneği

<!DOCTYPE html>
    <html>
      <head>
        <title>Save to Drive Demo: Explicit Load</title>
        <link rel="canonical" href="http://www.example.com">
        <script src="https://apis.google.com/js/platform.js" async defer>
          {parsetags: 'explicit'}
        </script>
      </head>
      <body>
        <div id="container">
          <div class="g-savetodrive"
             data-src="//example.com/path/to/myfile.pdf"
             data-filename="My Statement.pdf"
             data-sitename="My Company Name">
          <div>
        </div>
        <script type="text/javascript">
          gapi.savetodrive.go('container');
        </script>
      </body>
    </html>

Açıkça oluşturma içeren örnek "Drive'a kaydet" JavaScript'i

    <!DOCTYPE html>
    <html>
      <head>
        <title>Save to Drive Demo: Explicit Render</title>
        <link rel="canonical" href="http://www.example.com">
        <script>
          window.___gcfg = {
            parsetags: 'explicit'
          };
        </script>
        <script src="https://apis.google.com/js/platform.js" async defer></script>
      </head>
      <body>
        <a href="javascript:void(0)" id="render-link">Render the Save to Drive button</a>
        <div id="savetodrive-div"></div>
        <script>
          function renderSaveToDrive() {
            gapi.savetodrive.render('savetodrive-div', {
              src: '//example.com/path/to/myfile.pdf',
              filename: 'My Statement.pdf',
              sitename: 'My Company Name'
            });
          }
          document.getElementById('render-link').addEventListener('click', renderSaveToDrive);
        </script>
      </body>
    </html>

"Drive'a kaydet" düğmesini yerelleştirme

Web sayfanız belirli bir dili destekliyorsa window.___gcfg.lang değişkenini bu dile ayarlayın. Ayarlanmazsa kullanıcının Google Drive dili kullanılır.

Kullanılabilir dil kodu değerleri için desteklenen dil kodları listesine bakın.

    <!DOCTYPE html>
    <html>
      <head>
        <title>Save to Drive Demo: Async Load with Language</title>
        <link rel="canonical" href="http://www.example.com">
      </head>
      <body>
        <div class="g-savetodrive"
             data-src="//example.com/path/to/myfile.pdf"
             data-filename="My Statement.pdf"
             data-sitename="My Company Name">
        </div>

        <script type="text/javascript">
          window.___gcfg = {
            lang: 'en-US'
          };
        </script>
        <script src = 'https://apis.google.com/js/platform.js' async defer></script>

      </body>
    </html>

Sorun giderme

data-src URL'nizi indirirken XHR hatası alırsanız kaynağın gerçekten mevcut olduğunu ve CORS sorununuz olmadığını doğrulayın.

Büyük dosyalar 2 MB'a kısaltılıyorsa sunucunuzun Content-Range'i kullanıma sunmaması olasıdır. Bu durum büyük olasılıkla bir CORS sorunudur.