The Photobucket Media Plug-In

Transcription

1 The Photobucket Media Plug-In Empowering Digital Content on Partner Web Sites Photobucket Media Plug-in Documentation 1 of 18

2 1 Overview Photobucket has developed an exciting application for our key partners to place the experience of managing digital content into their site with minimal development efforts. The Photobucket Media Plug-in allows your end users to search, browse, upload, and link to their media content without the end user leaving the partner s site. Photobucket Media Plug-in Documentation 2 of 18

3 2 Technical Description The Photobucket Media Plug-In (PMP) is a single webpage that handles authentication, search, album browsing, and uploading. This webpage can be deployed into a partner site in one of two ways; as an IFRAME or as a separate popup. Our recommendation is to utilize the PMP as an IFRAME so the user experience is seamless within the partner site and to prevent any issues with popup or application blockers. The PMP can be called using the following URL: The PMP is customizable by passing different parameters in the URL. The following table describes how these parameters control the look and feel of the PMP: Attribute Value Description width Number between The width in pixels of the PMP. min 175 default 200 height Number between max 600 The width in pixels of the PMP. minimum 250 default 450 maximum 800 largethumb true or false Specifies whether or not to show a large version of the clicked on thumb. Default: true Bg Color Name: red RGB Value: rgb(255,0,0) HEX: #ff0000 Background color of the JWidget. The color value can be a color name (red), an rgb value (rgb(255,0,0)), or a hex number (#ff0000). Default: white linktype img, tag, url Specifies which text shows up in the URL text box. img: [IMG] tag: <img src=. > url: Default: tag pbaffsite Tracking ID If you have not received a specialized tracking id, use id 272. border true or false Specifies whether or not to present a border around the widget. Photobucket Media Plug-in Documentation 3 of 18

4 bordercolor Color Name: red RGB Value: rgb(255,0,0) HEX: #ff0000 Default: false If border is true this is the color of the border. The color value can be a color name (red), a rgb value (rgb(255,0,0)), or a hex number (#ff0000). dividers true or false Specifies whether to show the dividing lines between album and images and images and upload. Default: true textcolor linkcolor media url Color Name: red RGB Value: rgb(255,0,0) HEX: #ff0000 Color Name: red RGB Value: rgb(255,0,0) HEX: #ff0000 image, video, or both URL to callback page on partner site Text color for the PMP. The color value can be a color name (red), an rgb value (rgb(255,0,0)), or a hex number (#ff0000). Default: black The color for all links. The color value can be a color name (red), an rgb value (rgb(255,0,0)), or a hex number (#ff0000). Default: blue Specifies which type of media to display and which type of files the user can upload. Default: image See advanced integration for details. dimensions true or false This is only applicable when using advanced integration. It is used to get the width and height of the returned image. btntxt When implementing the advanced integration this is the text that appears on the button. Default: Paste The following string contains the URL with all of the default options: (Are we changing the URL or anything here?) \?width=200 \ &height=450& \ largethumb=true \ &bg=%23ffffff \ &linktype=tag \ Photobucket Media Plug-in Documentation 4 of 18

5 &border=false \ &dividers=true \ &textcolor=% \ &linkcolor=%230000ff \ &media=image \ ** %23 must precede hexadecimal colors in the URL ** If no parameters are specified the JWidget will default to the above values ** should be one single string: &dividers=true&textcolor=% &linkcolor=%230000ff&media=image Photobucket Media Plug-in Documentation 5 of 18

6 3 Photobucket Media Plug-In Walkthrough The first screen the user will see is the login screen. This screen also contains a registration button that will be tied to the partners affiliate program if an affiliate id is provided. Photobucket Media Plug-in Documentation 6 of 18

7 The next screen is the main album for this user. Notice the symmetrical thumbnails which allow you to select and view in greater detail on the larger thumbnail. Photobucket Media Plug-in Documentation 7 of 18

8 The next screen provides a view of navigating through a users subalbums. Navigation is accomplished with a series of arrows for moving among pages in the current album, while the drop down provides subalbum and upper lever album browsing. Photobucket Media Plug-in Documentation 8 of 18

9 4 Deployment Options Photobucket recommends the use of IFRAMES for the deployment of the PMP. Below is a sample of an IFRAME string that could be used to embed this service into your site; Remove \ as this should be 1 string. <iframe name="jwidget" \ src=" \ bgcolor="222222" \ width="210" \ height="490" \ frameborder="0" \ scrolling="no"> </iframe> All of the IFRAME options are outlined in this table. Attribute Value Description Align Left right middle Specifies how to align the iframe according to the surrounding text bottom Frameborder 1 0 Specifies whether or not to display a frame border Height pixels Defines the height of the iframe % Longdesc URL A URL to a long description of the frame contents Marginheight pixels Defines the top and bottom margins of the iframe Marginwidth pixels Defines the left and right margins of the iframe Name frame_name Specifies a unique name of the iframe (to use in scripts) Scrolling Yes Define scroll bars no auto Src URL The URL of the document to show in the iframe Photobucket Media Plug-in Documentation 9 of 18

10 Width Pixels Defines the width of the iframe. allowtransparency true False Specifies whether or not to make the IFRAME transparent or not. It is possible to toggle the display of the PMP. This allows the user to show and hide the PMP as desired. We have included some Javascript in this document to help make this possible. The following example would initially display an Add Image or Video From Photobucket link without the PMP. When the user clicks on the link the PMP will appear along with a Hide Photobucket Image Browser link. The link will toggle the PMP display on and off. <style type="text/css">.viewable { display: block;.viewable a { line-height: 16px; font-size: 14px; font-weight: bold; font-family: sans-serif; color: blue;.viewable a:hover { color: red; cursor: pointer; text-decoration: underline;.hidden { display: none; </style> <script type="text/javascript" language="javascript"> <!-- function view() { document.getelementbyid('hidelink').classname = "viewable"; document.getelementbyid('viewlink').classname = "hidden"; document.getelementbyid('photobucket').classname = "viewable"; return false; function hide() { document.getelementbyid('hidelink').classname = "hidden"; document.getelementbyid('viewlink').classname = "viewable"; Photobucket Media Plug-in Documentation 10 of 18

11 document.getelementbyid('photobucket').classname = "hidden"; return false; //--> </script> <span id="viewlink" class="hidden"> <nobr><a href="#" onclick="view();">add Image From Photobucket</a></nobr> </span> <span id="hidelink" class="viewable"> <nobr><a href="#" onclick="hide();">hide Photobucket Image Browser</a></nobr> </span> <div id="photobucket" class="viewable"> <iframe src=" border="0" frameborder="0" scrollbars="auto" width="275" height="490"> </iframe> </div> Photobucket Media Plug-in Documentation 11 of 18

12 5 Integration Examples The integration of the Photobucket Media Plug-in is simple and quick. The following are two examples that demonstrate potential applications of this tool. This first example is an online journal with the PMPplaced next to the editing window. This would allow the user to quickly find an image and paste the link that they would want to include in their document. Notice that the background and outline are configured to blend cleanly into the site experience. Updates? <iframe name="frame1" \ src=" \ largethumb=true&bg=% &linktype=tag&border=false \ &dividers=true&textcolor=% &linkcolor=%230000ff" \ bgcolor="222222" width="210" height="490" frameborder="0" \ Photobucket Media Plug-in Documentation 12 of 18

13 scrolling=no allowtransparency="true"> \ </iframe> %23 must precede hexadecimal colors in the URL Photobucket Media Plug-in Documentation 13 of 18

14 The second example is for a tool that generates CSS for a social networking site. The placement of the PMP allows a user to quickly link to the image they would like to use as a background without requiring the site to host the images. <iframe name="frame1" \ src=" \ largethumb=true&bg=%23ffffff&linktype=tag&border=false \ &dividers=true&textcolor=% &linkcolor=%230000ff" \ width="210" height="490" frameborder="0" scrolling=no \ allowtransparency="true" bgcolor="white"> \ </iframe> %23 must precede hexadecimal colors in the URL Photobucket Media Plug-in Documentation 14 of 18

15 6 Advanced Integration Partner sites can choose to integrate the PMP in one of two ways. The default implementation requires the user to cut and paste image URLs from the PMPinto the partner site. A more advanced implementation integrates the partner site and the PMP. With this implementation the partner site has access to the URL of the current image that the user has chosen. This implementation is more flexible but requires some specific Javascript implementation on the partner side. Below are step by step instructions to implement this integrated PMP: 1.) Create a new web page on your site that contains the following HTML: <script type="text/javascript"> window.onload = function() { parent.parent.photobucket_complete(getparameter(document.location.href, "url")); ; function getparameter ( querystring, parametername ) { var parametername = parametername + "="; if ( querystring.length > 0 ) { begin = querystring.indexof ( parametername ); if ( begin!= -1 ) { begin += parametername.length; end = querystring.indexof ( "&", begin ); if ( end == -1 ) { end = querystring.length return unescape ( querystring.substring ( begin, end ) ); return ""; </script> You can name this page whatever you want (e.g. /partner_site/callback.html). Photobucket Media Plug-in Documentation 15 of 18

16 IMPORTANT: this file must be hosted on the same site as the page you will be launching the PMPfrom (e.g. partnersite.partnerdomain.com), and they must both be accessible by the same protocol (HTTP or HTTPS). 2.) Add the following Javascript to the page you want to launch the PMP from: <script type="text/javascript"> var seedurl=" window.onload = function() { loadiframe(); ; function loadiframe() { nurl = escape(seedurl); //Goto Jwidget Location document.getelementbyid('jwidget').src= ' function photobucket_complete(inurl) { //ADD JAVASCRIPT TO MANIPULATE YOUR SITE WITH THE IMAGE URL //PASSED FROM THE JWIDGET </script> Replace the seedurl with the URL of the HTML file you created in step one. Add your customization parameters to the end of the PMP URL in the loadiframe() method. Complete the Javascript implementation in the photobucket_complete() method. This allows you to control the flow between the PMP and your site. 3.) If you chose to have the image dimensions returned to you, you can use the following functions as a substitute for the window.onload function as well as the photobucket_complete function. Photobucket Media Plug-in Documentation 16 of 18

17 In order to get the dimensions to work, you must be using the advanced callback version of the PMP. In addition, for invalid urls or animated gifs, it will return a width and height of 0. For videos, it will return the standard video size. (Impacted at all by slim?) window.onload = function() { parent.parent.photobucket_complete(getparameter(document.location.href, "url"), getparameter(document.location.href, "width"), getparameter(document.location.href, "height")); ; function photobucket_complete(inurl, width, height) { //ADD JAVASCRIPT TO MANIPULATE YOUR SITE WITH THE IMAGE URL //PASSED FROM THE JWIDGET 4.) Make sure the Iframe that will display the PMP has a PMP id: e.g. <iframe src="" id="pmp" height ="530" width="300"></iframe> Photobucket Media Plug-in Documentation 17 of 18

18 7 Photobucket Media Plug-In Support Photobucket has established a dedicated support queue in our ticketing system to handle any question you might have about the integration or use of the PMP Photobucket Plug-in. The address for PMP support is; mediaplugin@photobucket.com Photobucket Media Plug-in Documentation 18 of 18