Knowledge Base > Syndication Services > Editor's Desk and Widgets
Search the Knowledge Base
 
Date Modified
Wednesday, June 04, 2008
Re-configuring or customizing the Sharing (Get This) feature

 

Re-configuring the the default Sharing/GetThis

The default Sharing template allows for some customization through configuration. All of the configuration settings are passed in the argument object to getBuzzFooter() as in this example:


 

${% getBuzzFooter({ buzzId: 1234, sharingOptions: "blogger, typepad, netvibes" }) %}

 

The options are:
1) buzzId - by setting this the shared widget will be different than the sharing widget. Ie, "Get This Widget" becomes "Get Some Other Widget". This options determines what the "Other Widget" is.

 

2) sharingOptions – A comma-separated list specifying which sharing elements to display on the “Get This” panel of the widget. The possible values are: Blogger, Typepad, Netvibes, Google, Pageflakes, Create, LiveDotCom, LiveSpaces, Facebook, Limited, All, Email, and Script.

"All" includes all elements. "Limited" includes all elements except LiveDotcom and LiveSpaces (which can't support custom javascript). “Email” displays the "Send to a friend" feature. "Script" displays the embed code. “Create” displays the “create your own widget”

 

3) fbApiKey -  If this is set then Facebook will automatically be added to the default set of sharingOptions. If you provided a custom set of SharingOptions you will need to include Facebook explicitly. The Facebook API Key is shown in the Developer Application on Facebook.com.  *** More on Facebook support below.

 

4) emailSharingTemplate - specify a template for the "Send to a friend" email. This should be the name of an ASPX page on the server.

5) preserveExtraArgs - If this is set to true then the extra arguments that were passed to the hosting widget will be included in the sharing links. For instance, if there was an xmlUrl argument, the same argument will be present in the sharing links.


 

Creating A Custom Sharing/GetThis
Note: Before you go to the trouble of doing a custom Get This, consider changing configuration on the existing one as described above.

 

To create your own custom “Get This” panel, your widget HTML will need to be structured something like this:


{stringify CustomGetThis}
        <div>This is where the HTML for your custom sharing template goes</div>
CustomGetThis

(All your current widget code here)

${% getBuzzFooter({getThisTemplate:CustomGetThis}) %}


Note: you may also be able to use the configuration options with a custom template, if the custom template isn't too different from the default.




Default Sharing/Get This Template

The following HTML code, if placed in the above mentioned location, would yield the same sharing panel as the basic default sharing code.   Use this as a starting point for your custom sharing panel, and modify it as needed.


 

<div id="${GetThisBoxId}" class="ng_getThis" style="display:none">
 <div style="background-color: #ebebeb; border: 1px #999999 solid; padding: 5px;">
  <img alt="close" onclick="${HideGetThisJS}" src="${BuzzAppUrl}/Images/close.gif" style="float:right; cursor:pointer;" />
  <strong>Add this to your site</strong>
 </div>
 <div style="margin:10px 0px 0px 0px; padding: 0px 5px;">
  Want to put this widget on your blog or personal homepage? Choose your site from the list below.
  <div style="margin:5px 0px 0px 10px;">
   {if /typepad/i.test(SharingOptions)}<div class="ng_getIcon"><a target="_blank" href="${TypepadLink}"><img border="0" align="absmiddle" alt="TypePad" src="${BuzzAppUrl}Images/typepad.gif"/>&nbsp;<strong>TypePad</strong></a></div>{/if}
   {if /blogger/i.test(SharingOptions)}<div class="ng_getIcon"><a target="_blank" href="${BloggerLink}"><img border="0" align="absmiddle" alt="Blogger" src="${BuzzAppUrl}Images/blogger.gif"/>&nbsp;<strong>Blogger</strong></a></div>{/if}
   {if /netvibes/i.test(SharingOptions)}<div class="ng_getIcon"><a target="_blank" href="${NetvibesLink}"><img border="0" align="absmiddle" alt="Netvibes" src="${BuzzAppUrl}Images/netvibes.gif"/>&nbsp;<strong>Netvibes</strong></a></div>{/if}
   {if /google/i.test(SharingOptions)}<div class="ng_getIcon"><a target="_blank" href="${GoogleLink}"><img border="0" align="absmiddle" alt="iGoogle" src="${BuzzAppUrl}Images/google.gif"/>&nbsp;<strong>iGoogle</strong></a></div>{/if}
   {if /pageflakes/i.test(SharingOptions)}<div class="ng_getIcon"><a target="_blank" href="${PageflakesLink}"><img border="0" align="absmiddle" alt="Pageflakes" src="${BuzzAppUrl}Images/Pageflakes.gif"/>&nbsp;<strong>Pageflakes</strong></a></div>{/if}
   {if /LiveDotCom/i.test(SharingOptions)}<div class="ng_getIcon"><a target="_blank" href="${LiveDotComLink}"><img border="0" align="absmiddle" alt="Live.com" src="${BuzzAppUrl}Images/LiveDotCom.gif"/>&nbsp;<strong>Live.com</strong></a></div>{/if}
   {if /LiveSpaces/i.test(SharingOptions)}<div class="ng_getIcon"><a target="_blank" href="${LiveSpacesLink}"><img border="0" align="absmiddle" alt="Live.com" src="${BuzzAppUrl}Images/LiveSpaces.gif"/>&nbsp;<strong>Live Spaces</strong></a></div>{/if}
   {if /Facebook/i.test(SharingOptions)}<div class="ng_getIcon"><a target="_blank" href="${FacebookLink}"><img border="0" align="absmiddle" alt="Facebook" src="${BuzzAppUrl}Images/Facebook.gif"/>&nbsp;<strong>Facebook</strong></a></div>{/if}
   '{if /Vista/i.test(SharingOptions)}<div class="ng_getIcon"><a target="_blank" href="${VistaLink}"><img border="0" align="absmiddle" alt="Vista Sidebar" src="${BuzzAppUrl}Images/Vista.gif"/>&nbsp;<strong>Vista</strong></a></div>{/if}\n' +
  </div>
  <br clear="all"/>
 </div>
 {var showScript = /script/i.test(SharingOptions)}
 {var showEmail = /email/i.test(SharingOptions)}
 {var showCreate = /create/i.test(SharingOptions)}
 {if showScript || showEmail || showCreate}
 <div style="padding: 0px 5px 5px 5px;">
  {if showScript}
  <div style="margin-top:7px !important; margin-top:25px;">
   Or copy the embed script code below and paste it on your website.
   <div style="margin:5px 0px 0px 10px;">
    <span style="text-align:left;"><strong>Embed code:</strong> <input type="text" value="<script src=&quot;${EmbedScriptSrc}&quot; type=&quot;text/javascript&quot;></script>" onclick="this.focus();this.select();" /></span>
   </div>
  </div>
  {/if}
  {if showCreate}
  <div style="margin:10px 0px;">
   <span class="ng_createNew"><a href="javascript:void(0)" onclick="${ShowSignupJS}">Create your own widget</a></span>
  </div>
  {/if}
  {if showEmail}
  <div style="margin:10px 0px;">
   <span class="ng_createNew"><img src="${BuzzAppUrl}/images/send_friend.gif" onclick="${ShowEmailWidgetJS}" style="cursor:pointer" /></span>
  </div>
  {/if}
  <div class="ng_getThisTOS">
   If you copy and use this Widget code for use on your website(s), you agree to the following terms and conditions found 
   <a target="blank" href="${NGBaseUrl}admin/pages/legal.html">here</a>.
  </div>
 </div>
 {/if}
 <div align="center" style="border-top: 1px #999999 solid; padding-bottom: 5px; background-color: #000000; overflow: hidden;">
  <a href="http://newsgatorwidgets.com" target="_blank">
    <img src="${BuzzAppUrl}Images/poweredby_ng_black.gif" border="0" />
  </a>
 </div>
</div>




Tokens Available
The following tokens are available in the GetThis template, and have the same meaning as in the normal widget templates
• ExtraArgs
• BuzzId
• OrgCode
• ApiToken
• BuzzAppUrl
• NGBaseUrl
• UniqueId
• BuzzObj
• BuzzObjJS
• AttentionJS
• AttentionClickJS

The following tokens contain default links to the sharing sites. These will take into account the arguments passed into getBuzzFooter(). Eg, if you sent in a different BuzzId than the current widget, that will be used. They also include appropriate inheritance tracking GUIDs.
• BloggerLink
• TypepadLink
• NetvibesLink
• GoogleLink
• PageflakesLink
• EmbedScriptSrc
• LiveSpacesLink
• LiveDotComLink
• FacebookLink
• VistaLink

 

 

The following tokens are functions for generating sharing links. They each expect a single object as an argument. The object will be used to generate the arguments to the child widget. This allows you to pass different arguments to the child widget than the ones the parent widget had.
• GetBloggerLink
• GetTypepadLink
• GetNetvibesLink
• GetGoogleLink
• GetPageflakesLink
• GetFacebookLink
• GetEmbedScriptSrc
• GetLiveSpacesLink
• GetLiveDotComLink
• GetFacebookLink
• GetVistaLink



• MyTrackingId -
The tracking ID for the current widget. This should be used as the trkP for the child widget.
• ChildTrackingId - The tracking ID that should be used as the trkM for the child widget.
• GetThisBoxId - The ID used for the GetThis box container
• SharingOptions - The sharing options string that was passed into getBuzzFooter(), or the default sharing options string.
• EmailSharingTemplate -
The custom email sharing template, or null if none was passed in.
• ShowGetThisJS - A Javascript call to show the GetThis box.
• HideGetThisJS -
A Javascript call to hide the GetThis box.
• ShowSignupJS -
A Javascript call to show the "signup for Editor's Desk" popup.
• ShowEmailWidgetJS -
A Javascript call to show the "email this widget" popup.




*** Facebook Support
Facebook is somewhat supported out of the box. However, you must manually build a Facebook application first. You can add in the Facebook sharing option and fbApiKey to see the Facebook sharing icon.
So basically it looks like this:

${% getBuzzFooter({ fbApiKey: "123abcd" }) %}
${% getBuzzFooter({ sharingOptions: "blogger, typepad, netvibes, facebook", fbApiKey:"123abcd" }) %}

 

 



Knowledge Base Software - myKB.com