Social Media Sidebar

Looking for an Extension? Have an Extension request? Post your request here for help. (Note: This forum is community supported; while there is an Extensions Development Team, said team does not dedicate itself to handling requests in this forum)
Scam Warning
Post Reply
User avatar
watisnf.nl
Registered User
Posts: 607
Joined: Sat Mar 13, 2010 12:53 pm
Location: The Netherlands
Name: David
Contact:

Social Media Sidebar

Post by watisnf.nl » Sat Aug 16, 2014 12:37 pm

This would be a nice addition to many phpBB boards, what I mean is something like this:

Image Image

Few functions I had in mind:
  • Left or right sidebar
  • Small or big Icons (eg; Twitter or just "the little bird")
  • Multiple social media Platforms: Facebook, Twitter, Youtube ect
I think that there are more functions to think of ;)
Dutch Translator | Looking for, Dutch extensions translations

User avatar
watisnf.nl
Registered User
Posts: 607
Joined: Sat Mar 13, 2010 12:53 pm
Location: The Netherlands
Name: David
Contact:

Re: Social Media Sidebar

Post by watisnf.nl » Sat Oct 11, 2014 1:03 pm

Am I the only one who likes something like this? You could also make it as a separate extension for Facebook, Twitter ext
Dutch Translator | Looking for, Dutch extensions translations

pastilles
Registered User
Posts: 59
Joined: Wed Feb 08, 2006 10:10 pm
Location: London & Brussels
Contact:

Re: Social Media Sidebar

Post by pastilles » Thu Jan 22, 2015 11:41 pm

No, your not. Another one who likes this here :)

User avatar
Lumpy Burgertushie
Registered User
Posts: 66480
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: Social Media Sidebar

Post by Lumpy Burgertushie » Fri Jan 23, 2015 1:08 am

here is how to get a very similar slide out by using the custom code extension:
things using the custom code extensions:

slideout menus

install custom code extension:
viewtopic.php?f=456&t=2275361

once installed and working. go to the extensions tab in the admin panel.

click on edit:
click on overall_footer_after.html (E)
copy and paste the following into the text box:

Code: Select all

<script type='text/javascript'>
jQuery(document).ready (
function(){jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery("#facebook_right").stop(true,false).animate({right: -249}, 500); });
jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery("#twitter_right").stop(true,false).animate({right: -264}, 500); });
jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -323}, 500); });
jQuery("#youtube_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery("#youtube_right").stop(true,false).animate({right: -303}, 500); });
jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); });
});
</script>


<style>
img, a { border: 0; }
#on {visibility:visible;}
#off {visibility:hidden;}
#facebook_div {width:245px;height: 260px;overflow: hidden;}
#twitter_div {width:260px;height: 238px;overflow: hidden;}
#google_plus_div {width:320px;height: 143px;overflow: hidden;}
#knfeedburner_div {width:300px;height: 97px;overflow: hidden;}
#youtube_div {width:300px;height: 97px;overflow: hidden;}
#facebook_right {z-index: 10005;border:2px solid #3c95d9;background-color: #fff;width:245px;height: 260px;position: fixed;right: -249px;}
#facebook_right img {position: absolute;top: -2px;left: -35px;}
#facebook_right iframe {border:0px solid #3c95d9;overflow: hidden;position: static;height: 360px;left:-2px;top:-3px;}
#twitter_right {z-index: 10004;border:2px solid #6CC5FF;background-color: #6CC5FF;width:260px;height: 238px;position: fixed;right: -264px;}
#twitter_right_img {position: absolute;top: -2px;left: -35px;border: 0;}
#google_plus_right {z-index: 10003;background-color: #006ec9;border:2px solid #006ec9;border-top:2px solid #0056a0;border-bottom: 2px solid #0056a0;border-right:2px solid #0056a0;border-left: hidden;width:320px;height: 143px;position: fixed;right: -323px;}
#google_plus_right_img {position: absolute;top: -2px;left: -33px;border: 0;}
#youtube_right {z-index: 10002;background-color: #fefefe;border:2px solid #ff0000;border-top:2px solid #5b5b5b;border-bottom: 2px solid #5b5b5b;border-right:2px solid #5b5b5b;border-left: hidden;width:301px;height: 100px;position: fixed;right: -303px;}
#youtube_right_img {position: absolute;top: -2px;left: -33px;border: 0;}
#feedburner_right {z-index: 10001;background-color: #fefefe;border:2px solid #5b5b5b;border-top:2px solid #5b5b5b;border-bottom: 2px solid #5b5b5b;border-right:2px solid #5b5b5b;border-left: hidden;width:300px;height: 97px;position: fixed;right: -303px;}
#feedburner_right_img {position: absolute;top: -2px;left: -33px;border: 0;}
</style>
<div id="on">
<div id="facebook_right" style="top: 8%;">
<div id="facebook_div">
<img src="http://1.bp.blogspot.com/-yUI3Og8Esko/TyywzMTqmsI/AAAAAAAABMs/z-tTK2uUS-0/s1600/Facebook.png" />
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FRealcomBiz&locale=en_GB&width=245&connections=9&stream=&header=false&show_faces=0&height=260" scrolling="no"></iframe>
</div>
</div>
</div>
</div>
<div id="on">
<div id="twitter_right" style="top: 25%;">
<div id="twitter_div">
<img id="twitter_right_img" src="http://1.bp.blogspot.com/-khdW550KJIA/Tyyw1UgdxzI/AAAAAAAABNE/AwsKGPGrZkQ/s1600/Twitter.png" />
<script type="text/javascript" src="http://script-ot.googlecode.com/svn/twitterbox.js"></script>
<div id="twitterfanbox"></div>
<script type="text/javascript">fanbox_init("RealcomBiz");</script>
</div>
</div>
</div>
</div>
<div id="on">
 <div id="google_plus_right" style="top: 42%;">
  <div id="google_plus_div">
   <img id="google_plus_right_img" src="http://2.bp.blogspot.com/-92QhBqQOpz8/Tyywzk8GzmI/AAAAAAAABMw/hxB7RBjWk68/s1600/Google+Plus.png"/>
   <div style="float:left;margin:1px 0px 0px 2px;">
    <g:plusone size="tall" expr:href="data:post.url"></g:plusone>
</div>
</div>
</div>
</div>
<div id="on">
<div id="youtube_right" style="top: 59%;">
<div id="youtube_div">
<img id="youtube_right_img" src="http://1.bp.blogspot.com/-NCdhprqaK10/T0BfYEMH7VI/AAAAAAAABQ8/hn0n3XoKq2Q/s1600/YouTube.png" />
<div style="float:left;margin:1px 0px 0px 2px;">
<iframe src=http://www.youtube.com/subscribe_widget?p=RealcomBiz style="height: 105px; width: 300px; border: 0;" scrolling="no" frameborder="0"></iframe>
</div>
</div>
</div>
</div>
<div id="on">
<div id="feedburner_right" style=" top: 76%;">
<div id="knfeedburner_div">
<center><br/>
<h4 style="color:#F66303;">Subscribe And Get Free E-Mail Updates:</h4>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=realcombiz', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="enteryouremail" name="email" value="Enter Your E-Mail Here..." onblur="if (this.value == '') {this.value = 'Enter Your E-Mail Here...';}" onfocus="if (this.value == 'Enter Your E-Mail Here...') {this.value = '';}" type="text" /><input value="RealcomBiz" name="uri" type="hidden" /><input value="Submit" class="submitbutton" type="submit" /></form>
</center>
<img id="feedburner_right_img" src="http://1.bp.blogspot.com/-k-3C-8kdREI/Tyyw0ao_FII/AAAAAAAABM4/mMDgy0TFiD4/s1600/Subscribe.png" />
</div>
</div>
</div>
save and purge the cache.

now, go back and edit that code to reflect how you want it and also with your facebook, twitter, etc. info.

should work just fine.

demo here:
http://phpbbusers.com/3.1

robert
Last edited by Lumpy Burgertushie on Fri Jan 23, 2015 1:52 am, edited 1 time in total.
I'm baaaaaccckkkk. still doing work on donation basis. PM your needs.

Premium phpBB 3.2 Styles by PlanetStyles.net

If a tree falls in the forest and nobody is there, does it make a sound?

User avatar
Raul [ThE KuKa]
Style Customisations
Style Customisations
Posts: 6167
Joined: Mon Dec 08, 2003 9:24 pm
Location: Spain
Name: Raul Arroyo
Contact:

Re: Social Media Sidebar

Post by Raul [ThE KuKa] » Fri Jan 23, 2015 1:10 am

Nice Robert. ;)

P.D. Edit URL demo please. :o
All unsolicited PMs will be ignored.
:warning: Knowledge Base | Documentation | Board rules | phpBB Styles Rules & Policies :warning:


If you like my styles, translations, etc. and want to show some appreciation, then feel free to Donate with Image
:flag_es: phpBB Spain - Online Since 2003 :heart:



pastilles
Registered User
Posts: 59
Joined: Wed Feb 08, 2006 10:10 pm
Location: London & Brussels
Contact:

Re: Social Media Sidebar

Post by pastilles » Fri Jan 23, 2015 1:23 am

Sweet, Thanks Lumpy Burgertushie! I'll look in depth with this tomorrow. Really interested in Facebook/Twitter components with my board now.

&

http://phpbbusers.com/3.1 - Should work :)

User avatar
Lumpy Burgertushie
Registered User
Posts: 66480
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: Social Media Sidebar

Post by Lumpy Burgertushie » Fri Jan 23, 2015 1:53 am

Raul [ThE KuKa] wrote:Nice Robert. ;)

P.D. Edit URL demo please. :o
thanks, done.

robert
I'm baaaaaccckkkk. still doing work on donation basis. PM your needs.

Premium phpBB 3.2 Styles by PlanetStyles.net

If a tree falls in the forest and nobody is there, does it make a sound?

User avatar
Raul [ThE KuKa]
Style Customisations
Style Customisations
Posts: 6167
Joined: Mon Dec 08, 2003 9:24 pm
Location: Spain
Name: Raul Arroyo
Contact:

Re: Social Media Sidebar

Post by Raul [ThE KuKa] » Fri Jan 23, 2015 10:31 am

I'll try to make an extension of this, configurable from ACP. ;)

No promises... :oops:
All unsolicited PMs will be ignored.
:warning: Knowledge Base | Documentation | Board rules | phpBB Styles Rules & Policies :warning:


If you like my styles, translations, etc. and want to show some appreciation, then feel free to Donate with Image
:flag_es: phpBB Spain - Online Since 2003 :heart:



User avatar
Raul [ThE KuKa]
Style Customisations
Style Customisations
Posts: 6167
Joined: Mon Dec 08, 2003 9:24 pm
Location: Spain
Name: Raul Arroyo
Contact:

Re: Social Media Sidebar

Post by Raul [ThE KuKa] » Fri Jan 23, 2015 2:04 pm

All unsolicited PMs will be ignored.
:warning: Knowledge Base | Documentation | Board rules | phpBB Styles Rules & Policies :warning:


If you like my styles, translations, etc. and want to show some appreciation, then feel free to Donate with Image
:flag_es: phpBB Spain - Online Since 2003 :heart:



Post Reply

Return to “Extension Requests”