Icy Phoenix :: View topic - Social Share Buttons?

batman [ Fri 01 Apr, 2011 18:02 ]
Post subject: Social Share Buttons?

Hya folks I'm looking for some advice on how to ad a different kind of setup for the share buttons.
I think the one that comes with IP is too much so would like to streamline it a little.
Below is the kind of Idea I'm looking for, any ideas on how to go about this or is it possible to ad the below idea direct to IP?

Maybe added to the current area were the print page icon is as in this pick?

http://www.addthis.com/

spydie [ Fri 01 Apr, 2011 19:30 ]
Post subject: Re: Social Share Buttons?

you might do something like a sliding div there

easy job with some javascript

KugeLSichA [ Fri 01 Apr, 2011 19:38 ]
Post subject: Re: Social Share Buttons?

Hi batman...

try to put your code from addthis.com in the file templates/default/breadcrumbs_vt.tpl before 

you may need to edit the code to work with the vietopic urls... i think {U_VIEW_TOPIC_BASE} is the var for this...

batman [ Fri 01 Apr, 2011 19:50 ]
Post subject: Re: Social Share Buttons?

Hya spydie, to be honest Im not that bothered about having a dropdown and only really want the facebook and twitter buttons, possibly a couple of others?

Here is a small bit of javascript, how would I insert this into the forum topic?
I obviously don't need the email part so would get rid of that bit.
Or is there a piece of code I could use via my own files?
I'm not a coder so all looks rocket science to me lol

Code: [Hide] [Select]

<!-- AddToAny BEGIN -->

<div class="a2a_kit a2a_default_style">

<a class="a2a_dd" href="http://www.addtoany.com/share_save">Share</a>

<span class="a2a_divider"></span>

<a class="a2a_button_facebook"></a>

<a class="a2a_button_twitter"></a>

<a class="a2a_button_email"></a>

</div>

<script type="text/javascript" src="http://static.addtoany.com/menu/page.js"></script>

<!-- AddToAny END -->

EDIT:
Thanks KugeLSichA ill try that

Im a bit stuck on this bit, not sure what I need to do now?

Quote:
you may need to edit the code to work with the vietopic urls... i think {U_VIEW_TOPIC_BASE} is the var for this...

This is with the code added.

Code: [Hide] [Select]

{IMG_TBL}<div class="forumline nav-div">

	<p class="nav-header"><a href="{U_PORTAL}">{L_HOME}</a>{NAV_SEP}<a href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</p>

	<div class="nav-links">

		<div class="nav-links-left">{CURRENT_TIME}&nbsp;&bull;&nbsp;{S_TIMEZONE}</div>

	<!-- AddThis Button BEGIN -->

<div class="addthis_toolbox addthis_default_style ">

<a href="http://www.addthis.com/bookmark.php?v=250&amp;pubid=ra-4d96115948e7a7c8" class="addthis_button_compact">Share</a>

<span class="addthis_separator">|</span>

<a class="addthis_button_preferred_1"></a>

<a class="addthis_button_preferred_2"></a>

<a class="addthis_button_preferred_3"></a>

<a class="addthis_button_preferred_4"></a>

</div>

<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>

<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4d96115948e7a7c8"></script>

<!-- AddThis Button END -->	<!-- IF S_SHOW_ICONS -->

		<a href="{U_VIEW_OLDER_TOPIC}"><img src="{IMG_LEFT}" alt="{L_VIEW_PREVIOUS_TOPIC}" title="{L_VIEW_PREVIOUS_TOPIC}" /></a>

		<a href="{U_RECENT}"><img src="{IMG_RECENT_TOPICS}" alt="{L_RECENT}" title="{L_RECENT}" /></a>

		{S_WATCH_TOPIC_IMG}

		{S_MARK_AR_IMG}

		<!-- IF not S_BOT -->{S_KB_MODE_IMG}<!-- ENDIF -->

		<a href="{DOWNLOAD_TOPIC}" title="{L_DOWNLOAD_TOPIC}"><img src="{IMG_FLOPPY}" alt="{L_DOWNLOAD_TOPIC}" title="{L_DOWNLOAD_TOPIC}" /></a>

		<!-- IF S_LOGGED_IN --><a href="{U_BOOKMARK_ACTION}"><img src="{IMG_BOOKMARK}" alt="{L_BOOKMARK_ACTION}" title="{L_BOOKMARK_ACTION}" /></a><!-- ENDIF -->

		<!-- IF U_TOPIC_VIEWED --><a href="{U_TOPIC_VIEWED}"><img src="{IMG_VIEWED}" alt="{L_TOPIC_VIEWED}" title="{L_TOPIC_VIEWED}" /></a><!-- ENDIF -->

		<a href="{U_PRINT}" title="{L_PRINT}"><img src="{IMG_PRINT}" alt="{L_PRINT}" title="{L_PRINT}" /></a>

		<a href="{U_TELL}" title="{L_TELL}"><img src="{IMG_EMAIL}" alt="{L_TELL}" title="{L_TELL}" /></a>

		<a href="{U_VIEW_NEWER_TOPIC}"><img src="{IMG_RIGHT}" alt="{L_VIEW_NEXT_TOPIC}" title="{L_VIEW_NEXT_TOPIC}" /></a>

		<!-- ENDIF -->

		<!-- IF S_SHOW_LINKS -->

		<a href="{U_RECENT}" title="{L_RECENT}" />{L_RECENT}</a>&nbsp;&bull;&nbsp;

		<a href="{U_PRINT}" title="{L_PRINT}">{L_PRINT}</a>&nbsp;&bull;&nbsp;

		<a href="{U_TELL}" title="{L_TELL}">{L_TELL}</a>&nbsp;&bull;&nbsp;

		<!-- IF S_LOGGED_IN --><a href="{U_BOOKMARK_ACTION}" class="genmed">{L_BOOKMARK_ACTION}</a>&nbsp;&bull;&nbsp;<!-- ENDIF -->

		<!-- IF U_TOPIC_VIEWED --><a href="{U_TOPIC_VIEWED}" class="genmed">{L_TOPIC_VIEWED}</a>&nbsp;&bull;&nbsp;<!-- ENDIF -->

		{S_WATCH_TOPIC}&nbsp;&bull;&nbsp;

		{U_MARK_ALWAYS_READ}&nbsp;&bull;&nbsp;

		<a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a>&nbsp;&bull;&nbsp;

		<a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>

		<!-- ENDIF -->

	</div>

</div>{IMG_TBR}

KugeLSichA [ Fri 01 Apr, 2011 20:21 ]
Post subject: Re: Social Share Buttons?

ok it seems you dont need to add the var for the topic url...

i tested it quick, and it seems you only need to add the code from addthis.com....

maybe you can try it a bit... if the url is send correctly... but it should...

batman [ Fri 01 Apr, 2011 21:13 ]
Post subject: Re: Social Share Buttons?

Hya KugeLSichA nothing is showing up for me, I inserted the code saved and then cleared cache but still doesn't show up?

KugeLSichA [ Fri 01 Apr, 2011 21:18 ]
Post subject: Re: Social Share Buttons?

depending on the code you posted earlier... it works for me...

do you have other styles installed?

check if there is also a breadcrumbs_vt.TPL you need to edit

batman [ Fri 01 Apr, 2011 21:56 ]
Post subject: Re: Social Share Buttons?

You may have used the first code I posted? I used this from post #1
Im using prosilver_ip and latest IP

Code: [Hide] [Select]

<!-- AddThis Button BEGIN -->

<div class="addthis_toolbox addthis_default_style ">

<a href="http://www.addthis.com/bookmark.php?v=250&amp;pubid=ra-4d96115948e7a7c8" class="addthis_button_compact">Share</a>

<span class="addthis_separator">|</span>

<a class="addthis_button_preferred_1"></a>

<a class="addthis_button_preferred_2"></a>

<a class="addthis_button_preferred_3"></a>

<a class="addthis_button_preferred_4"></a>

</div>

<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>

<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4d96115948e7a7c8"></script>

<!-- AddThis Button END -->

EDIT:

Sorted it now, has the breadcrumbs_vt.tpl within prosilver_ip
Just need to try and get it on the right line as the other icons now,

EDIT:
Sorted just removed the </div> and included an extra <br /> before to give a bit more space.

Code: [Hide] [Select]

 <br /><!-- AddThis Button BEGIN -->

<div class="addthis_toolbox addthis_default_style ">

<a href="http://www.addthis.com/bookmark.php?v=250&amp;pubid=ra-4d96115948e7a7c8" class="addthis_button_compact">Share</a>

<span class="addthis_separator">|</span>

<a class="addthis_button_preferred_1"></a>

<a class="addthis_button_preferred_2"></a>

<a class="addthis_button_preferred_3"></a>

<a class="addthis_button_preferred_4"></a>

<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>

<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4d96115948e7a7c8"></script>

<!-- AddThis Button END -->

Thanks for your help on this, much appreciated, I'm sure you agree that its a nicer option

KugeLSichA [ Fri 01 Apr, 2011 22:35 ]
Post subject: Re: Social Share Buttons?

i´m glad you solved this... marked as solved

batman [ Fri 01 Apr, 2011 23:32 ]
Post subject: Re: Social Share Buttons?

Been having a play and looks good in the menu also, I used the nav menu ad feature to place it there, although Id have to get rid of the sponsor bit some how

Probably better to just create a new block.

batman [ Mon 04 Apr, 2011 03:55 ]
Post subject: Re: Social Share Buttons?

I decided to remove this from the actual topic view as only registered users are able to read the threads.
I now have it on both index and forum above all left blocks.
The only problem with it is its set to align left, probably on the server side, is there anyway of adding some script to it to override and set to align center?

nos [ Tue 05 Apr, 2011 14:03 ]
Post subject: Re: Social Share Buttons?

batman wrote: [View Post]

What code did you use to get you out there and where you have inserted?

You can put the entire code file breadcrumbs_vt.tpl?

I have prosilver_ip

batman [ Tue 05 Apr, 2011 18:05 ]
Post subject: Re: Social Share Buttons?

nos wrote: [View Post]
batman wrote: [View Post]

What code did you use to get you out there and where you have inserted?

You can put the entire code file breadcrumbs_vt.tpl?

I have prosilver_ip

Hya nos.

templates/prosilver_ip/breadcrumbs_vt.tpl insert code before  on line #31

Code: [Hide] [Select]

<br /><!-- AddThis Button BEGIN -->

<div class="addthis_toolbox addthis_default_style ">

<a href="http://www.addthis.com/bookmark.php?v=250&amp;pubid=ra-4d96115948e7a7c8" class="addthis_button_compact">Share</a>

<span class="addthis_separator">|</span>

<a class="addthis_button_preferred_1"></a>

<a class="addthis_button_preferred_2"></a>

<a class="addthis_button_preferred_3"></a>

<a class="addthis_button_preferred_4"></a>

<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>

<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4d96115948e7a7c8"></script>

<!-- AddThis Button END -->

odelot [ Tue 05 Apr, 2011 18:43 ]
Post subject: Re: Social Share Buttons?

Working in my web. Thanks

batman [ Tue 05 Apr, 2011 21:37 ]
Post subject: Re: Social Share Buttons?

Done some more playing and got it perfect now

nos [ Tue 05 Apr, 2011 22:13 ]
Post subject: Re: Social Share Buttons?

batman wrote: [View Post]
nos wrote: [View Post]
batman wrote: [View Post]

What code did you use to get you out there and where you have inserted?

You can put the entire code file breadcrumbs_vt.tpl?

I have prosilver_ip

Hya nos.

templates/prosilver_ip/breadcrumbs_vt.tpl insert code before  on line #31

Code: [Hide] [Select]
Code: [Show]
<br />
<div class="addthis_toolbox addthis_default_style ">
<a href="http://www.addthis.com/bookmark.php?v=250&pubid=ra-4d96115948e7a7c8" class="addthis_button_compact">Share</a>
<span class="addthis_separator">|</span>
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4d96115948e7a7c8"></script>

Hi!, I have this in my templates/prosilver_ip/breadcrumbs_vt.tpl:

Spoiler: [ Show ]

The Code was insert in line #31 or before ???

I don't know...

batman [ Tue 05 Apr, 2011 23:05 ]
Post subject: Re: Social Share Buttons?

Code: [Hide] [Select]

            <a href="{U_VIEW_OLDER_TOPIC}"><img src="{IMG_LEFT}" alt="{L_VIEW_PREVIOUS_TOPIC}" title="{L_VIEW_PREVIOUS_TOPIC}" /></a>

            <a href="{U_RECENT}"><img src="{IMG_RECENT_TOPICS}" alt="{L_RECENT}" title="{L_RECENT}" /></a>

            {S_WATCH_TOPIC_IMG}

            {S_MARK_AR_IMG}

            <!-- IF not S_BOT -->{S_KB_MODE_IMG}<!-- ENDIF -->

            <a href="{DOWNLOAD_TOPIC}" title="{L_DOWNLOAD_TOPIC}"><img src="{IMG_FLOPPY}" alt="{L_DOWNLOAD_TOPIC}" title="{L_DOWNLOAD_TOPIC}" /></a>

            <!-- IF S_LOGGED_IN --><a href="{U_BOOKMARK_ACTION}"><img src="{IMG_BOOKMARK}" alt="{L_BOOKMARK_ACTION}" title="{L_BOOKMARK_ACTION}" /></a><!-- ENDIF -->

            <!-- IF U_TOPIC_VIEWED --><a href="{U_TOPIC_VIEWED}"><img src="{IMG_VIEWED}" alt="{L_TOPIC_VIEWED}" title="{L_TOPIC_VIEWED}" /></a><!-- ENDIF -->

            <a href="{U_PRINT}" title="{L_PRINT}"><img src="{IMG_PRINT}" alt="{L_PRINT}" title="{L_PRINT}" /></a>

            <a href="{U_TELL}" title="{L_TELL}"><img src="{IMG_EMAIL}" alt="{L_TELL}" title="{L_TELL}" /></a>

            <a href="{U_VIEW_NEWER_TOPIC}"><img src="{IMG_RIGHT}" alt="{L_VIEW_NEXT_TOPIC}" title="{L_VIEW_NEXT_TOPIC}" /></a>

            <!-- ENDIF -->

            <!-- IF S_SHOW_LINKS -->

            <a href="{U_PRINT}" title="{L_PRINT}">{L_PRINT}</a> • 

            <a href="{U_TELL}" title="{L_TELL}">{L_TELL}</a> • 

            <!-- IF S_LOGGED_IN --><a href="{U_BOOKMARK_ACTION}" class="genmed">{L_BOOKMARK_ACTION}</a> • <!-- ENDIF -->

            <!-- IF U_TOPIC_VIEWED --><a href="{U_TOPIC_VIEWED}" class="genmed">{L_TOPIC_VIEWED}</a> • <!-- ENDIF -->

            {S_WATCH_TOPIC} • 

            {U_MARK_ALWAYS_READ} • 

            <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> • 

            <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>

            <!-- ENDIF -->

        </li>

    </ul>

    <span class="corners-bottom"><span></span></span></div>

</div>

nos [ Tue 05 Apr, 2011 23:17 ]
Post subject: Re: [SOLVED] Social Share Buttons?

Now, I add the code in this correct line:

Spoiler: [ Show ]

And this is the result...:

batman [ Wed 06 Apr, 2011 03:44 ]
Post subject: Re: Social Share Buttons?

Hya nos, remove the 2 </div></div> you will find that the right alignment tags wont work as its set to align left on the server side.

Code: [Hide] [Select]

<br /><!-- AddThis Button BEGIN -->

<div align="right"><div class="addthis_toolbox addthis_default_style ">

<a href="http://www.addthis.com/bookmark.php?v=250&amp;pubid=ra-4d9afffe4c064667" class="addthis_button_compact">Share</a>

<span class="addthis_separator">|</span>

<a class="addthis_button_preferred_1"></a>

<a class="addthis_button_preferred_2"></a>

<a class="addthis_button_preferred_3"></a>

<a class="addthis_button_preferred_4"></a>

[highlight=#FFFFAA] </div></div> 

<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>

<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4d9afffe4c064667"></script></right>

<!-- AddThis Button END -->

Joshua203 [ Wed 06 Apr, 2011 10:18 ]
Post subject: Re: Social Share Buttons?

Batman I have now added codetags to two of your posts already ....please use code tags mate!!!

nos [ Wed 06 Apr, 2011 15:41 ]
Post subject: Re: [SOLVED] Social Share Buttons?

More thanks!

Now found!

Informpro [ Wed 06 Apr, 2011 20:36 ]
Post subject: Re: [SOLVED] Social Share Buttons?

Can I add this in my fork

?

spydie [ Wed 06 Apr, 2011 20:54 ]
Post subject: Re: [SOLVED] Social Share Buttons?

hm .

I´m just wondering .

Strange.

If you open some div tags, they must be closed somewhere, if not, you gonna break the template.

Well, thats what Html knowlage tells me

Joshua203 [ Wed 06 Apr, 2011 21:00 ]
Post subject: Re: Social Share Buttons?

Code: [Hide] [Select]

[highlight=#FFFFAA] </div></div>

spydie [ Wed 06 Apr, 2011 21:30 ]
Post subject: Re: Social Share Buttons?

batman wrote: [View Post]
Hya nos, remove the 2 </div></div> you will find that the right alignment tags wont work as its set to align left on the server side.

?????????

Joshua203 [ Wed 06 Apr, 2011 21:34 ]
Post subject: Re: Social Share Buttons?

stupid of me I did not read that... quite impossible to read the highlight btw when set to black pearl (looks like censored or something hidden)

batman [ Wed 06 Apr, 2011 21:42 ]
Post subject: Re: Social Share Buttons?

Joshua203 wrote: [View Post]
stupid of me I did not read that... quite impossible to read the highlight btw when set to black pearl (looks like censored or something hidden)

That's one of the reasons I never have black templates, can be a bit hard to read.
Its my bad originally though as I should have done a screen shot and highlighted it that way

Joshua203 [ Wed 06 Apr, 2011 22:03 ]
Post subject: Re: Social Share Buttons?

a simple code tag would have done the trick

I hope you've noticed the edits and my request to use them

batman [ Thu 07 Apr, 2011 01:15 ]
Post subject: Re: Social Share Buttons?

Joshua203 wrote: [View Post]
a simple code tag would have done the trick
I hope you've noticed the edits and my request to use them

I generally do use them, nos appeared to not understand what I was saying , so I made it as easy as possible to understand, apologies for being human and trying to help someone

nothere [ Sun 17 Apr, 2011 20:40 ]
Post subject: Re: Social Share Buttons?

Hi
I just wanted to say thanks for the code. I'm using the share buttons within the forum; works like a charm.

Thank you!

Mighty Gorgon [ Sun 17 Apr, 2011 23:55 ]
Post subject: Re: [SOLVED] Social Share Buttons?

Very nice addons and integrations.

Next Icy Phoenix version has a new "Share" feature... I may enable it now for News And Announcements, just as a Show Off.

nothere [ Mon 18 Apr, 2011 23:49 ]
Post subject: Re: Social Share Buttons?

That's excellent news, MG! And look forward to the next version. Thank for that bit of information, you've made my day!

Icy Phoenix

Old Customizations - Social Share Buttons?