2

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 created 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

Yaniv Hakim
  • 91
  • 1
  • 9

2 Answers2

1

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}
Xerxis Alvar
  • 11
  • 4
0

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.

Toby
  • 2,720
  • 5
  • 29
  • 46
  • yeah I know i can show the data from my db or get the data of the ad from the api but i want to show the ad EXACTLY how Facebook show it on Facebook.com... I don't want to build the HTML of every ad type (and future ad types) that facebook have.. this is why they give the preview_url field. The problem is it can't be embedded in your site as an iframe and the only way now is to open it as a new browser window. – Yaniv Hakim Jan 15 '12 at 11:33
  • I guess there is no way around that - but so far you only have one ad type which is the standard flyer. you can just simulate that by copy pasting their html and the CSS (chrome inspector, FF firebug) and recreate it - to make it perfect it prob. takes around an hour to get the wrapping etc. right in any layout. – Toby Feb 02 '12 at 23:55