UW Oshkosh How-To's: How to add social networking icons to your document actions

NOTE: Please be aware that this document and instructions are old. Social media have updated the way you added media feeds to your website. The content below this is here only for reference. Please don't use it as is. Unless you have to don't do anything in the ZMI. New documentation for adding feeds is being written.

=====

There are three wayds to add social networking sharing actions to your document actions.

Method 1

This method uses each online service provider's individual script.

• In the ZMI, Click on portal_actions, then document_actions.
•  Add a CMF Action from the drop-down menu
• Fill in these values for Facebook:
• id: facebook
•  Title: Share on Facebook
•  Description: Share the URL of the current page (or event) on Facebook
•  i18n Domain: plone
• URL: string:javascript:(function(){open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title),'facebook','toolbar=no,width=700,height=250')})()
• icon: string:$portal_url/facebook_icon.gif
• Condition: leave blank – it will show under all conditions
• Permissions: view
• Visible: checked
• For Twitter, use this URL: string:javascript:(function(){open('http://twitter.com/home?status=' + location.href)})()
• For MySpace, use this URL: string:javascript:(function(){open('http://www.myspace.com/index.cfm?fuseaction=postto&' + 't=' + encodeURIComponent(document.title)  + '&u=' + encodeURIComponent(location.href) )})()

note. If after trying the above method the results show the text but not the images you'll need to modify portal_view_customizations/zope.interface-plone.abovecontenttitle.documentactions. Use this how to"How to change documentactions from text to icons"

Method 2

This method uses the addthis.com service to share using many different online services.

In ZMI, go to portal_view_customizations and customize plone.abovecontenttitle.documentactions.  

Within the <ul> block but after the <tal:actions> block, add the following:

<li id="document-action-share-this">
<!-- AddThis Button BEGIN -->
<script type="text/javascript">var addthis_pub="uwoshkosh";</script>
<a class="link-plain" href="http://www.addthis.com/bookmark.php" 
        style="text-decoration:none;" 
        onmouseover="return addthis_open(this, '', '[URL]', '[TITLE]');" 
        onmouseout="addthis_close();" 
        onclick="return addthis_sendto();">Share this</a>
<script type="text/javascript" src="http://s7.addthis.com/js/200/addthis_widget.js"></script>
<!-- AddThis Button END -->
</li>

The complete viewlet template should look like this:

<div class="visualClear"><!-- --></div>
<div i18n:domain="plone"
     class="documentActions">
    <tal:docactions tal:condition="view/actions">

    <h5 class="hiddenStructure" i18n:translate="heading_document_actions">Document Actions</h5>

    <ul tal:define="normalizeString nocall: context/@@plone/normalizeString">
    <tal:actions repeat="daction view/actions">
        <li tal:attributes="id python:'document-action-' + normalizeString(daction['id'])">
            <a href=""
               tal:attributes="href daction/url;
                               title daction/description"
               tal:content="daction/title">
            </a>
        </li>
    </tal:actions>

<li id="document-action-share-this">
<!-- AddThis Button BEGIN -->
<script type="text/javascript">var addthis_pub="uwoshkosh";</script>
<a class="link-plain" href="http://www.addthis.com/bookmark.php" 
        style="text-decoration:none;" 
        onmouseover="return addthis_open(this, '', '[URL]', '[TITLE]');" 
        onmouseout="addthis_close();" 
        onclick="return addthis_sendto();">Share this</a>
<script type="text/javascript" src="http://s7.addthis.com/js/200/addthis_widget.js"></script>
<!-- AddThis Button END -->
</li>

    </ul>
    </tal:docactions>

    <div tal:replace="structure provider:plone.documentactions" />

</div>

This results in the following:

If you put the mouse over the "share this" document action, this is what you get:

You can change the script src to choose which sharing services you want to make available, the order they appear in, and so on.  For more information, see addthis.com.

Method 3

This method uses the product collective.plonebookmarklets from http://plone.org/products/plonebookmarklets.  

WARNING: Nathan had the following to say about this product:

I really like the PloneBookmarklets product you've created; however there is one issue that I've found. Doing an extra include of jquery in the documentactions causes any jquery plugins you might have had add in javascript to be overwritten since you reset the jQuery variable. For instance, if I try to have easyslider, a jquery plugin, on a plone site, having bookmarklets on will cause easyslider to not work. Not only that, but if someone chooses to use a more recent version of jquery for any reason, your declaration would overwrite that and potentially screw up that too.

To install this, you have to add "collective.plonebookmarklets" to your buildout.cfg in both the eggs and zcml sections, rerun bin/buildout, then restart your Zope.

The resulting document action looks like this: