Jump to content
finder

Share produk di FB, tapi gambar/foto produk ga muncul

Recommended Posts

Hallo Sahabat Presta

 

Saya baru install modul share on facebook. Setelah saya share produk, foto produk saya tidak muncul. Mohon bantuan donk..

 

saya menggunakan prestashop 1.5

 

Terima kasih sebelumnya.

Share this post


Link to post
Share on other sites

Hallo Sahabat Presta

 

Saya baru install modul share on facebook. Setelah saya share produk, foto produk saya tidak muncul. Mohon bantuan donk..

 

saya menggunakan prestashop 1.5

 

Terima kasih sebelumnya.

 

Untuk dapat menampilkan gambar dan informasi dengan baik/optimal saat share sebuah halaman website ke facebook, maka halaman website tersebut sebaiknya sudah disertai Open Graph Metadata

 

Gunakan facebook debugger  untuk memeriksa halaman Anda dan untuk melihat apa yang di share

Dengan alat tersebut, anda akan dapat mengetahui kesalahan apa saja yang menyebabkan halaman website anda tidak tampil dengan baik/optimal dengan facebook share

Share this post


Link to post
Share on other sites

hosting di server indonesia ya ?

Iya, hosting di server indonesia

Share this post


Link to post
Share on other sites

Untuk dapat menampilkan gambar dan informasi dengan baik/optimal saat share sebuah halaman website ke facebook, maka halaman website tersebut sebaiknya sudah disertai Open Graph Metadata

 

Gunakan facebook debugger  untuk memeriksa halaman Anda dan untuk melihat apa yang di share

Dengan alat tersebut, anda akan dapat mengetahui kesalahan apa saja yang menyebabkan halaman website anda tidak tampil dengan baik/optimal dengan facebook share

Saya sudah coba debuger dan  dapat hasilnya seperti yang saya lampirkan berikut. post-758905-0-34035100-1394852748_thumb.jpg

 

trus gmn cara perbaikinya ya?

Share this post


Link to post
Share on other sites

Iya, hosting di server indonesia

 

Kalo server Indonesia, kebanyakan kasus, FB nya timeout waktu mau akses website kita, karena kalo hosting di server Indonesia, biasanya akses dari luar lebih lambat,

Share this post


Link to post
Share on other sites

Saya sudah coba debuger dan  dapat hasilnya seperti yang saya lampirkan berikut. attachicon.giferror share fb.JPG

 

trus gmn cara perbaikinya ya?

 

Itu pesan kesalahannya sudah jelas.

 

Critical errors : URL returned a bad HTTP response code, hal ini yang wajib diperbaiki

Sebenarnya facebook sudah bisa membaca website kamu.

Prestashop dengan fitur friendly-URL yang aktif serta fitur multi language-nya akan menghasilkan URL Address yang berbeda dari aslinya, dan hal ini menyebabkan facebook menjadi 'SALAH arah' dan akhirnya tidak menemukan halaman yang dimaksud.

Untuk mengatasi hal ini, gunakan open graph metadata og:url (yang belum kamu tentukan)

 

 

Errors : The 'og:type' property is required. but not preset, hal ini juga wajib diperbaiki.

meta properti og:type merupakan metadata yang diwajibkan, artinya metadata ini harus ada di dalam header halaman website kamu.

 

Open Graph Warnings :

Sebaiknya kamu baca dulu Open Graph Metadata

og:title , og:type, og:url , dst ... merupakan bagian dari Open Graph Metadata, yang sebaiknya kamu tuliskan di antara

<head></head> dalam file /themes/TMEHE_KAMU/header.tpl

 

Singkat kata, metadata open graph berikut ini sebaiknya kamu tambahkan (replace original) ke dalam file header.tpl, sebelum

<link rel="icon" type="image/vnd.microsoft.icon" href="{$favicon_url}?{$img_update_time}" />

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$lang_iso}" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
        <title>{$meta_title|escape:'htmlall':'UTF-8'}</title>
{if isset($meta_description) AND $meta_description}
        <meta name="description" content="{$meta_description|escape:html:'UTF-8'}" />
{/if}
{if isset($meta_keywords) AND $meta_keywords}
        <meta name="keywords" content="{$meta_keywords|escape:html:'UTF-8'}" />
{/if}
        <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
        <meta http-equiv="content-language" content="{$meta_language}" />
        <meta name="generator" content="PrestaShop" />
        <meta name="robots" content="{if isset($nobots)}no{/if}index,{if isset($nofollow) && $nofollow}no{/if}follow" />
        
        <!-- facebook og property -->        
        <meta property="fb:admins" content="ID_FACEBOOK_KAMU_SEBAGAI_ADMIN_FB_APP" />
        <meta property="fb:app_id" content="FB_APPLICATION_ID" />
        <meta property="og:locale" content="en_US" />
        <meta property="og:url" content="http://{$smarty.server.HTTP_HOST}{$smarty.server.REQUEST_URI}"/>
        <meta property="og:type" content="website"/>
        <meta property="og:title" content="{$meta_title|escape:'htmlall':'UTF-8'}"/>
        {if $page_name == 'product'}
        <meta property="og:image" content="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default')}"/>
        {else}
        <meta property="og:image" content="{$base_dir}img/LOGO_TOKO_UKURAN_500x500px.jpg"/>
        {/if}
        {if isset($meta_description) AND $meta_description}
        <meta property="og:description" content="{$meta_description|escape:html:'UTF-8'}"/>
        {else}
        <meta property="og:description" content="{$meta_title|escape:'htmlall':'UTF-8'}"/>
        {/if}
        <meta property="og:site_name" content="{l s='NAMA_WEBSITE_KAMU'}"/>
        <!-- /facebook og property -->        

FB_APPLICATION_ID

Untuk membuat aplikasi facebook, silahkan buka https://developers.facebook.com/ lalu pilih menu :

Apps > Create a New App

 

ID_FACEBOOK_KAMU_SEBAGAI_ADMIN_FB_APP

Adalah id facebook user kamu, bisa kamu periksa di http://findmyfacebookid.com/

 

LOGO_TOKO_UKURAN_500x500px.jpg

Sediakan/buat logo toko kamu dengan ukuran 500x500px lalu simpan dalam directory /img/

Logo ini akan menjadi default image untuk halaman selain halaman produk detail

 

NAMA_WEBSITE_KAMU

Nama website yang kamu inginkan tampil di blok facebook share

 

CONTOH HASIL FB DEBUGGER

 

Contoh tampilan saat di share

 

Contoh hasil share yang tampil di facebook wall

 

Contoh hasil share yang tampildi facebook timeline

Share this post


Link to post
Share on other sites

maaf sy jg memakai ps1.5 skr. stlh melakukan smua petunjuk suhu & mencoba bbrp OG-FB api module yg lain, bbrp item tetap tidak menghasil kan gambar yg sesuai kriteria.

pic logo 500x500px tidak terload tp gbr yg harusnya sudah tidak ada di database

 

error yg dihasilkan stlh debuger:

og:image should be larger  Provided og:image is not big enough. Please use an image that's at least 200x200 px. Image 'http://warnawarnistore.com/modules/blockstore/aa57478261ae24f05f62a5beef01f23f.jpg' will be used instead.

 

'aa57478261ae24f05f62a5beef01f23f.jpg' sudah di hapus dr directory. (cached file?)

 

mohon pencerahannya...

 

NB: sptnya file pic tsb ke save di https://fbexternal-a.akamaihd.net/safe_image.php?d=AQAeoJVflejPD3zR&w=154&h=154&url=http%3A%2F%2Fwarnawarnistore.com%2Fmodules%2Fblockstore%2Faa57478261ae24f05f62a5beef01f23f.jpg&cfs=1&upscale. dan saya tidak tahu menghapusnya

Edited by wwg_jkt

Share this post


Link to post
Share on other sites

Problem solved...

 

spt yg saya info kan sblmnya bahwa di kasus saya cm bbrp items yg mengalami sdkt gangguan tehnis waktu share ke FB yaitu produk image tidak sesuai ato ada yg keluar cm link aj. bbrp pruduk lama dan produk terbaru tidak bermasalah.

stlh di selidiki timeline nya terjadi waktu antara "sebelum memiliki id app fb - setting OG Metadata yg benar tp yg saya masukin id page (bukan id admin) & app-fb key - setelah memiliki app & fb id yg benar"..

kekacauan terjadi waktu share produk di timeline "setting OG Metadata yg benar"

produk2 tsb berhasil di share ke FB (tapi ngaco gbr produknya) & di cached di server(https://fbexternal-a.akamaihd.net/safe_image.php?d=AQAeoJVflejPD3zR&w=154&h=154&url=http%3A%2F%2Fwarnawarnistore.com%2Fmodules%2Fblockstore%2Faa57478261ae24f05f62a5beef01f23f.jpg&cfs=1&upscale) tapi karena sudah ngaco di time line tsb, maka waktu di timeline "yg sudah benar prosedurnya", data yg terkirim justru data ngaco yg tercached & yg sy tidak tahu cara menghapusnya... smp sekarang :unsure:

 

pemecahannya:

- sy pake cara terawam & tercanggih untuk kasus saya.... duplicate (image not include) & delete produk2 yg ngaco :P , clear cached dan re-upload gbr nya... maklum org awam disuruh setting code2 ini itu, liieer atuh...

kluar deh gbr, info dll yang bener di fb

 

NB:

yg smp skr sy bgg, waktu blm mempunyai app, admin fb id dan setting og metadata yg bener, share fb tidak bermasalah sampe produk ke sekian. stlh itu baru ngaco/kluar cm link.

 

kesimpulan prosedur untuk yg baru bikin web & belom input produk:

1. bikin FB app dl (Penting!!!) & catat key nya

2. save FB-admin id  - id kamu sebagai admin, bukan id page!!

    contoh: admin fb kamu di sini (https://www.facebook.com/wwg.jkt), liat id nya di http://findmyfacebookid.com/

                  bukan yg ini https://www.facebook.com/pages/Warna-Warni-Game-Store/231564920363967 (kesalahan sy sbg  org awam :blush: )

3. ikuti prosedur setting OG Metadata yg benar spt yg dishare suhu gonebdg

 

kl smua ud benar smuanya, jamin pst keluar share produknya dimanapun server anda. sy jg pk server indo :D

 

 

sori kl ada salah ato ada cara yg lebih canggih, tlg di koreksi & di share

terima kasih bt suhu gonebdg atas tutsnya & sharer yg laen yg ud ksh masukan....

 

EDIT: entah ini berguna ato tidak, untuk kasus error yg dihasilkan stlh debuger:

og:image should be larger  Provided og:image is not big enough. Please use an image that's at least 200x200 px. Image 'http://warnawarnisto...5beef01f23f.jpg' will be used instead.

sy sedikit mengedit header.tpl dan mengganti default image dari large_default menjadi thickbox-default. sehingga hasilnya menjadi sbb:

 

        {if $page_name == 'product'}
        <meta property="og:image" content="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'thickbox_default')}"/>
        {else}
        <meta property="og:image" content="{$base_dir}img/LOGO_TOKO_UKURAN_500x500px.jpg"/>
        {/if}
 

hasilnya share fb produk image nya jadi lbh besar post-773117-0-39149200-1397455122_thumb.jpg

dan hasil debuger spt ini

 

 

 

regards,

 

warnawarnistore.com

Edited by wwg_jkt
  • Like 1

Share this post


Link to post
Share on other sites

×

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More