Jump to content

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

finder
 Share

Recommended Posts

finder Newbie

finder

Posted
Posted

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.

Link to comment
Share on other sites
gonebdg - webindoshop.com Newbie

gonebdg - webindoshop.com

Posted
Posted

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

Link to comment
Share on other sites
finder Newbie

finder

Posted
  • Author
Posted

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?

Link to comment
Share on other sites
gonebdg - webindoshop.com Newbie

gonebdg - webindoshop.com

Posted
Posted

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

Link to comment
Share on other sites
  • 2 weeks later...
Andr3Ace Newbie

Andr3Ace

Posted
Posted (edited)

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 (see edit history)
Link to comment
Share on other sites
  • 2 weeks later...
Andr3Ace Newbie

Andr3Ace

Posted
Posted (edited)

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 (see edit history)
  • Like 1
Link to comment
Share on other sites
 Share
Go to topic listing
×
×
  • Create New...