How to preview an ad using the preview_url in the creative_spec?

I'm developing a Facebook connect site that manage Facebook Ad Campaigns and I have a small problem. When I'm creating an Ad using the API I receive the preview_url in the creative_specs of the ad crea开发者_运维百科ted and then I want to show it in my website. However, the URL i get is inside Facebook. example: http://www.facebook.com/ads/api/creative_preview.php?cid=6003167825281

I can't show it in an iframe because of facebook frame detect code, and i can't request to it in an AJAX call (i keep geting Bad Request 4xx)... So how on earth I can preview an ad I created using the Facebook ads api in my site??

thanks, Yaniv

You can check out this ref : http://developers.facebook.com/docs/reference/ads-api/generatepreview/

--- First you need to get the account CSS by

$url  = 'https://graph.facebook.com/act_' . $bizId  . '/adpreviewscss?access_token=' .  $access_token;

--- Then get the HTML part by

$url  = 'https://graph.facebook.com/' . $adId  . '/previews?access_token=' .  $accessToken;

--- Add this CSS patch

  /* ---- Ads Preview Styles ----------------------- */
                 a.forceLTR{cursor:pointer;color:#3B5998;text-decoration:none}
                 .fbEmuPreview{border:1px solid #E5E5E5;background-color:#FFF;width:234px;padding:10px}
                 .fbEmuEgo{line-height:13px}
                 .fbEmu .title{font-weight:700;margin-bottom:0!important}
                 .fbEmu .forceLTR{direction:ltr;text-align:left;display:block}
                 .fbEmu .adInfo a.identity{color:gray;display:block;white-space:nowrap}
                 .fbEmu .image_body_block{padding-top:3px}
                 .clearfix{zoom:1}
                 .clearfix::after{clear:both;content:".";display:block;font-size:0;height:0;line-height:0;visibility:hidden}
                 .fbEmuEgo .image{width:100px;display:block}
                 .lfloat{float:left}
                 .-cx-PRIVATE-uiImageBlock__mediumImage{margin-right:8px}
                 .-cx-PRIVATE-uiImageBlock__content{overflow:hidden}
                 .-cx-private-uiimageblock__content a{font-size:11px}
                 .fbEmu .body .fbEmuLink{color:#333}
                 div.fbEmuEgo .image .img{padding-top:3px;max-height:72px;max-width:100px}
                 .fbEmuEgo .action{color:#777;margin-top:5px}
                .uiIconText{padding-left:21px;position:relative}
                .uiIconText .img{left:0;position:absolute;top:-1px;vertical-align:middle}
                .sx_39ed22{width:12px;height:11px;background-position:-49px -154px}
                .sp_buw69i{background-image:url(http://static.ak.fbcdn.net/rsrc.php/v2/yR/r/hqPYFjMiGCV.png);background-repeat:no-repeat;display:inline-block;height:16px;width:16px}
                a.forceLTR,a.uiIconText{cursor:pointer;color:#3B5998;text-decoration:none}

from the data you store in your database at the same time or from retrieving the ad details with the ad id from the api.