Support community for TTG plugins and products.
NOTICE
The Turning Gate's Community has moved to a new home, at https://discourse.theturninggate.net.
This forum is now closed, and exists here as a read-only archive.
You are not logged in.
Pages: 1
In your opinion, on a site based upon Pages-CE2, what would be the best way to implement a sharing, +1, and like button bar so it flows from the home page to the gallery levels (not any page in a gallery, just liking any specific one).
I've found different implementation tools, like these:
<!-- Lockerz Share BEGIN -->
<a class="a2a_dd" href="http://www.addtoany.com/share_save"><img src="http://static.addtoany.com/buttons/favicon.png" width="16" height="16" border="0" alt="Share"/></a>
<script type="text/javascript">
var a2a_config = a2a_config || {};
a2a_config.onclick = 1;
a2a_config.color_main = "D7E5ED";
a2a_config.color_border = "AECADB";
a2a_config.color_link_text = "333333";
a2a_config.color_link_text_hover = "333333";
a2a_config.prioritize = ["google_plus", "facebook", "delicious", "reddit", "stumbleupon", "tumblr", "orkut", "posterous"];
</script>
<script type="text/javascript" src="http://static.addtoany.com/menu/page.js"></script>
<!-- Lockerz Share END -->
AND add to CSS to remove the earn tab
<style type="text/css">
#a2apage_PTZ { display:none !important; }
</style>
and
paste code where share bar should appear
<IFRAME name="my share bar" scrolling="no" frameborder="0" noresize="noresize" allowtransparency="true" SRC="http://www.tecorange.com/my_share_bar/include.php?icon_size=2&fb=1&tr=1&de=1&go=1" WIDTH=148 HEIGHT=50> <a href="http://tecorange.com/my-share-bar-facebook-twitter-google-1-mail-print-buttons-for-web-sites" title="get my share bar from tecorange, google +1, facebook, linkedin and twitter sharing" ></a> </IFRAME>
Then there's the code from Google and facebook:
Google +1
<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-annotation="inline" data-width="350"></div>
<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
and
Facebook Like
include after opening <body> tag
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Place code where button should appear
<div class="fb-like" data-href="http://mark-friedman.com" data-send="true" data-width="450" data-show-faces="true" data-font="verdana"></div>
I don't know how I would position the button bar properly and add the proper scripts in the right places using the CE2 structure.
Anyone have any ideas?
I've been doing this for far too long
Offline
Use PHPlugins. This is the sort of stuff they're made for.
Offline
You had some sample code in the last forum, I think. I can't find it now.
I recall that I had problems when I tried to implement it out-of-the-box. Could you indicate where changes need to be made for implementation (assuming you can post a link).
Thanks
I've been doing this for far too long
Offline
So you'd want two functions, because the Facebook stuff says you should put code at the top of your page, just after the opening <body> tag. That's the first; the second is where you want the buttons to show up. So this is your scaffolding:
function ttg_body_top( $style, $path ) {
echo '
<!-- code here that needs to go after the opening <body> tag -->
';
return true; // Allows normal styles to process
} // END
function ttg_canvas_top( $style, $path ) {
echo '
<!-- code here for buttons; you may want to swap out ttg_canvas_top for another hook location -->
';
return true; // Allows normal styles to process
} // ENDIf I put all of your code from above into that, I get something like this:
function ttg_body_top( $style, $path ) {
echo '
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, \'script\', \'facebook-jssdk\'));</script>
';
return true; // Allows normal styles to process
} // END
function ttg_canvas_top( $style, $path ) {
echo '
<!-- Lockerz Share BEGIN -->
<a class="a2a_dd" href="http://www.addtoany.com/share_save"><img src="http://static.addtoany.com/buttons/favicon.png" width="16" height="16" border="0" alt="Share"/></a>
<script type="text/javascript">
var a2a_config = a2a_config || {};
a2a_config.onclick = 1;
a2a_config.color_main = "D7E5ED";
a2a_config.color_border = "AECADB";
a2a_config.color_link_text = "333333";
a2a_config.color_link_text_hover = "333333";
a2a_config.prioritize = ["google_plus", "facebook", "delicious", "reddit", "stumbleupon", "tumblr", "orkut", "posterous"];
</script>
<script type="text/javascript" src="http://static.addtoany.com/menu/page.js"></script>
<!-- Lockerz Share END -->
<style type="text/css">
#a2apage_PTZ { display:none !important; }
</style>
<IFRAME name="my share bar" scrolling="no" frameborder="0" noresize="noresize" allowtransparency="true" SRC="http://www.tecorange.com/my_share_bar/include.php?icon_size=2&fb=1&tr=1&de=1&go=1" WIDTH=148 HEIGHT=50> <a href="http://tecorange.com/my-share-bar-facebook-twitter-google-1-mail-print-buttons-for-web-sites" title="get my share bar from tecorange, google +1, facebook, linkedin and twitter sharing" ></a> </IFRAME>
<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-annotation="inline" data-width="350"></div>
<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
(function() {
var po = document.createElement(\'script\'); po.type = \'text/javascript\'; po.async = true;
po.src = \'https://apis.google.com/js/plusone.js\';
var s = document.getElementsByTagName(\'script\')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<div class="fb-like" data-href="http://mark-friedman.com" data-send="true" data-width="450" data-show-faces="true" data-font="verdana"></div>
';
return true; // Allows normal styles to process
} // ENDBut that's a bloody mess.
Rather than compiling the code from each individual source into a disgusting source code stew, have you considered signing up with a service like http://sharethis.com or http://www.addthis.com/ ... ? It would probably save you a lot of headache, and would yield better results.
Whatever code you get from them, you would still insert into your pages using PHPlugins.
Offline
Now I understand. Thanks so very much for the clear example and the suggestions.
One more item: Can I use the generated code for my headers and footers by moving it from the ELSE section, modifying PHPlugins?
I've been doing this for far too long
Offline
Sorry, I'm not clear on what you're asking.
Offline
Pages: 1