Thread: Adding 'Share On Facebook' snippet in XML Package?

Hi there,

Anyone tried to add the 'Share on facebook' snippet in XML Package before?

I am working on adding this function in product details page, so that buyer can click and share the information of this product with friends through facebook, but not successful. Anyone can help?

cheers!

yes, i can implement this in xmlpackage.but this is payable.If you want this then please email to puneet@silexsoftwares.com.

drop me an email and i will send you the xml package for no charge

see it work on our site at www.thefreemason.com

You should also be able to use the addthis.com snippet. We've got it on some of our pages like here:
http://www.signsoveramerica.com/sotw...-wrap-TeleData

All you have to do is sign up for a free account on addthis.com, fill in the super-easy-to-use forms and copy-n-paste the js code where you want it to appear.

here you go......turns off the feature when you go secure. Call it in your template or any topic page by using the token (!XmlPackage name="page.bookmarks.xml.config"!)
Just make sure you name the following file 'page.bookmarks.xml.config'

Code:

<?xml version="1.0" standalone="yes" ?>
<package version="2.1" displayname="Bookmarks" debug="false">

    <PackageTransform>
	<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:aspdnsf="urn:aspdnsf" exclude-result-prefixes="aspdnsf">
        <xsl:output method="html" omit-xml-declaration="yes" />
        <xsl:param name="PageName" select="aspdnsf:StrToLower(/root/System/PageName)" />
<xsl:param name="IsSecure" select="aspdnsf:StrToLower(/root/ServerVariables/HTTPS)='on'" />
<xsl:template match="/">
<xsl:choose>
  <xsl:when test="(starts-with($PageName, 'show') or starts-with($PageName, 'driver') or starts-with($PageName, 'default') or starts-with($PageName, 'sitemap')or starts-with($PageName, 'news')) and ($IsSecure!='true')">
    <!-- format your HTML -->
   <div class="YOURSTYLE">
                 Bookmark with:<br></br><a href="http://www.facebook.com/sharer.php?u=http://www.YOURSITE.com/(!PAGEURL!)" target="_blank"><img src="skins/skin_1/images/facebook.gif" alt="facebook" width="14" height="14" border="0"></img></a><a href="http://del.icio.us/post?url=http://www.YOURSITE.com/(!PAGEURL!)" target="_blank"><img src="skins/skin_1/images/delicious.gif" alt="delicious" width="14" height="14" hspace="4" border="0"></img></a><a href="http://digg.com/submit?url=http://www.YOURSITE.com/(!PAGEURL!)" target="_blank"><img src="skins/skin_1/images/digg.gif" alt="digg" width="14" height="14" border="0"></img></a><a href="http://www.stumbleupon.com/submit?url=http://www.YOURSITE.com/(!PAGEURL!)" target="_blank"><img src="skins/skin_1/images/stumbleupon.gif" alt="stumbleupon" width="14" height="14" hspace="4" border="0"></img></a><a href="http://reddit.com/submit?url=http://www.YOURSITE.com/(!PAGEURL!)" target="_blank"><img src="skins/skin_1/images/reddit.gif" alt="reddit" width="14" height="14" border="0"></img></a>
</div>
</xsl:when>
</xsl:choose>
</xsl:template>
        </xsl:stylesheet>
    </PackageTransform>
</package>

haha... nice one. thanks mikemurphy. Going to try it out now.

MadStamper, yeah.. i put the "bookmark" bar in my site header, but when browsing a specific product, i would like to display "share on facebook" only. Thanks anyway.


cheers!

thanks mikemurphy, this works perfectly and is a great addition to our site!

-David

no worries, pleasure

For some reason, when I try this the (!PAGEURL!) is returning an encoded url like this:

showproduct.aspx%3fProductID%3d10282%26SEName%3dcl earance-40-off-real-red-orange-agate-gemstone-ring-band-size-6-6-12-1-ring


instead of:
showproduct.aspx?ProductID=10282&SEName=clearance-40-off-real-red-orange-agate-gemstone-ring-band-size-6-6-12-1-ring

How do I fix this?

Thanks for that, but also having the encoded issues, which shouldn't matter but I get a 404 when trying to use this way. Are we missing something in our setup?

hmmm...not sure why you are getting the error....just checked the code here verses the code at our site and it's the same

I changed (!PAGEURL!) to (!INVOCATION!) and instead of this:

showproduct.aspx%3fProductID%3d10282%26SEName%3dcl earance-40-off-real-red-orange-agate-gemstone-ring-band-size-6-6-12-1-ring

I now get this:

p-10282-clearance-40-off-real-red-orange-agate-gemstone-ring-band-size-6-6-12-1-ring.aspx

That did the trick.

Changed mine to (!INVOCATION!) and issue has gone away. Wonder if its something with the server setup...

Thanks for the original code and the fix

Originally Posted by MadStamper

You should also be able to use the addthis.com snippet. We've got it on some of our pages like here:
http://www.signsoveramerica.com/sotw...-wrap-TeleData

All you have to do is sign up for a free account on addthis.com, fill in the super-easy-to-use forms and copy-n-paste the js code where you want it to appear.

Hi Mad Stamper,

Do you mind showing me how you added the AddThis snippet into your website? Murphy's solution is great but unfortunately I need to specifically use AddThis to leverage their statistics.

I tried adding the code snippet generated by Addthis into the xmlpackage for my products but it doesn't work. Thanks for your help!

Originally Posted by TheSunTheSea

Hi Mad Stamper,

Do you mind showing me how you added the AddThis snippet into your website? Murphy's solution is great but unfortunately I need to specifically use AddThis to leverage their statistics.

I tried adding the code snippet generated by Addthis into the xmlpackage for my products but it doesn't work. Thanks for your help!

How doesnt it work? Does it give you an error or just not show up?

All you have to do is add the code snippet into the XmlPackage where you want it.

Code:

                <xsl:value-of select="aspdnsf:AddtoCartForm(ProductID, $defaultVariant, 1)" disable-output-escaping="yes"/>
                <!-- AddThis Button BEGIN -->

                <br />
                <a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&amp;pub=xa-777777777">
                  <img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/>
                </a><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js?pub=xa-777777777"></script>
                <!-- AddThis Button END -->

It doesn't show up. Only the word "Share" and then the separator character is displayed if I embed this snippet:

Code:

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a href="http://addthis.com/bookmark.php?v=250&amp;username=xa-4c3d2d9a3b8b2531" class="addthis_button_compact">Share</a>
<span class="addthis_separator">|</span>
<a class="addthis_button_facebook"></a>
<a class="addthis_button_myspace"></a>
<a class="addthis_button_google"></a>
<a class="addthis_button_twitter"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4c3d2d9a3b8b2531"></script>
<!-- AddThis Button END -->

If I embed the snippet you gave me, it works. But I can't get the one above to work. I can't figure out the difference between the two that would cause one to be rendered properly while the other isn't.

Originally Posted by TheSunTheSea

It doesn't show up. Only the word "Share" and then the separator character is displayed if I embed this snippet:

Code:

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a href="http://addthis.com/bookmark.php?v=250&amp;username=xa-4c3d2d9a3b8b2531" class="addthis_button_compact">Share</a>
<span class="addthis_separator">|</span>
<a class="addthis_button_facebook"></a>
<a class="addthis_button_myspace"></a>
<a class="addthis_button_google"></a>
<a class="addthis_button_twitter"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4c3d2d9a3b8b2531"></script>
<!-- AddThis Button END -->

If I embed the snippet you gave me, it works. But I can't get the one above to work. I can't figure out the difference between the two that would cause one to be rendered properly while the other isn't.

Try this

Code:

                <!-- AddThis Button BEGIN -->

                <br />
                <a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&amp;pub=xa-4c3d2d9a3b8b2531">
                  <img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/>
                </a><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js?pub=xa-4c3d2d9a3b8b2531"></script>
                <!-- AddThis Button END -->

I suspect all the empty anchor tags is causing your issue. The script above should show you the share button and ive changed it to connect with your account # (xa-)

I appreciate the quick response. Unfortunately I have to use the third option provided by AddThis, which is this code:

Code:

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a href="http://addthis.com/bookmark.php?v=250&amp;username=xa-4c3d4eab06ab168f" class="addthis_button_compact">Share</a>
<span class="addthis_separator">|</span>
<a class="addthis_button_facebook"></a>
<a class="addthis_button_myspace"></a>
<a class="addthis_button_google"></a>
<a class="addthis_button_twitter"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4c3d4eab06ab168f"></script>
<!-- AddThis Button END -->

What you provided is the classic white Share bar that expands to show more social networks to share on. What I need is the simple bar that shows the logos for Facebook, Twitter, etc.

It's really strange that I can't get the above code to work....

Looks to me like you have the first <script> missing...

On 3M Select I've used the following code :-

HTML Code:

<!-- AddThis Button BEGIN -->
<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_email"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_reddit"></a>
<a class="addthis_button_digg"></a>
<a class="addthis_button_slashdot"></a>
<a class="addthis_button_stumbleupon"></a>
<a class="addthis_button_technorati"></a>
<a class="addthis_button_facebook"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/250/addthis_widget.js#username=bfg9000"></script>
<!-- AddThis Button END -->

& it works perfectly - as can be seen here.


TTFN

BFG