HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


Adding "Follow Us" block in left panel

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#73017 (In Topic #15298)
Avatar

Community saint

I want to have a "Follow Us" block at the bottom of the left panel containing buttons for Facebook and Twitter. My first thought was to create a Comcode page wrapped with 'html' tags and then use a a main_content block to display it. That didn't work.

I then tried to just add the the HTML directly to the bottom of the left panel which showed the link (not button) for Twitter but nothing for Facebook.

Can someone smarter than me please point me in the right direction?

Thanks for any help.

Bob
Back to the top
 
Posted
Rating:
#73022
Avatar

Community saint

I doubt I am smarter than you Bob but I think I do have an answer for you.  :)

If you have installed the Facebook support addon  it has the block you are looking for.

Facebook support - ocPortal

There is also a Twitter addon but I have not yet tried that one myself.

Twitter news integration - ocPortal
Back to the top
 
Posted
Rating:
#73026
Avatar

Community saint

I knew that the Facebook add-on had the block but I was hoping to create a single block at the bottom of the left panel with both these follow buttons (and maybe Google+ down the road).

I copied the code from the Facebook badge page and and the Twitter button page but can't get it working.

Bob
Back to the top
 
Posted
Rating:
#73076
Avatar

Community saint

So, is there really no simple way to create a block which contains the code snippets for Facebook and Twitter follow buttons at the bottom of the left panel.

I had figured this would be simple to do using a main_content block and wrapping the snippet code with HTML tags.

Any have any suggestions?

Bob
Back to the top
 
Posted
Rating:
#73077
Avatar

Community saint

It is possible Bob, that is how I put the like box on this page and here is the code I used to do it (With WYSIWYG disabled).

Code

[semihtml][/semihtml]

And this for the Google plus 1 in my side panels

Code


Edit: I see the code is not showing. If you want to shoot me an email I will send it/help you that way.
Back to the top
 
Posted
Rating:
#73079
Avatar

Community saint

Hi Brian-

That looks like what I want  to do (except I want both buttons in the same box).

Did you use main_content block to achieve this linking to a Comcode page or did you use some other method?

Bob
Back to the top
 
Posted
Rating:
#73081
Avatar

Community saint

I actually never used a block or a box at all. I just placed it in the source of the page where I wanted it to appear when I edited it.
Back to the top
 
Posted
Rating:
#73082
Avatar

Community saint

Hmmmm….I added the following to the bottom of the left panel and nothing displays:

Code

[block]side_ocf_personal_topics[/block]
[block]main_newsletter_signup[/block]

****Added the following ****
[semihtml]
<!-- Facebook Badge START -->
<a href="http://www.facebook.com/xxxxxxxxxx" target="_TOP" style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal;
[/semihtml]

What am I doing wrong?

Bob


Last edit: by BobS
Back to the top
 
Posted
Rating:
#73083
Avatar

Community saint

Even after you saved it? Mine don't appear in the preview but do show after I save it.
Back to the top
 
Posted
Rating:
#73084
Avatar

Community saint

Yeah, I save it but they didn't appear. Flushed both template cache and browser cache. I'll fiddle with it some more since it obviously works for you.

Thanks for your help.

Bob
Back to the top
 
Posted
Rating:
#73087
Avatar

Community saint

I think I have it solved. I somehow only got a portion of the code snippet which left tags opened. I am playing with it now.

Thanks for your help Brian.

Bob
Back to the top
 
Posted
Rating:
#73093
Avatar

Community saint

Okay, I've got this mostly worked out:


How can I get my box to match the width and alignment of the rest of the panel components?

Thanks for any help.

Bob
Back to the top
 
Posted
Rating:
#73097
Avatar

Community saint

Code

[semihtml]
<div class='standardbox_wrap_panel' style="border-top-width: 0px"><div class='standardbox_classic standardbox_t_panel' style="width: 100%; height: auto">
<h4 class='standardbox_title_panel' style="border-top: 0px solid #8AA3C7">Follow us on</h4><br />
<div style="text-align: center">

--------- your code here ---------

</div></div>
[/semihtml]

… ought to 'contain' the little devil!

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#73100
Avatar

Community saint

Hi Fletch-

Well, that made the properly sized and centered box. Thank you very much!!

But now the right panel is displaying directly below the left panel and the whole page layout is, of course, borked. Here's the code for the left panel:

Code

.....
[block]side_ocf_personal_topics[/block]
[block]main_newsletter_signup[/block]

[semihtml]
<div class='standardbox_wrap_panel' style="border-top-width: 0px"><div class='standardbox_classic standardbox_t_panel' style="width: 100%; height: auto">
<h4 class='standardbox_title_panel' style="border-top: 0px solid #8AA3C7">Follow us on</h4><br />
<div style="text-align: center">
[center]
<br />
<!-- Facebook Badge START --><a href="http://www.facebook.com/xxxxxxxxxxcentral" target="_TOP" title="XXXXXX XXXXXXX"><img src="http://badge.facebook.com/badge/100002389914460.823.1742356778.png" style="border: 0px;" /></a><!-- Facebook Badge END -->
<br />
<br />
<a href="http://www.twitter.com/xxxxxxxxxxctr"><img src="http://twitter-badges.s3.amazonaws.com/twitter-c.png" alt="Follow xxxxxxxxxxctr on Twitter"/></a>
[/center]
</div></div>
[/semihtml]

Do you see anything that would cause this issue?

Bob
Back to the top
 
Posted
Rating:
#73101
Avatar

Community saint

All better. You missed a </div>, darn you.   :dry:

Thanks so much for your help….and Brian too.

Bob
Back to the top
 
Posted
Rating:
#73133
Avatar

Community saint

BobS said

All better. You missed a </div>, darn you.   :dry:

Thanks so much for your help….and Brian too.

Bob
Yup, only just logged in, and realised that that specific 'breaking-of-display' is symptomatic of a missing </div>, so instead of adding one I removed the <div> that has the text centred, which appears to be extraneous since you centred the contents using comcode. That did the trick!



 :thumbs:

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#73136
Avatar

Community saint

I'll clean that up since it is redundant.

Now if Facebook would fix their downloads area for their logos so I could grab the "f" logo. When you try to download them, you get an 'expired' url message. I sent them a report - I wonder how long it will take them to fix it.

Bob
Back to the top
 
Posted
Rating:
#73144
Avatar

Community saint

BobS said

Now if Facebook would fix their downloads area for their logos so I could grab the "f" logo ….. I sent them a report - I wonder how long it will take them to fix it.
I hardly ever wait for these turkeys to respond. There are enough good quality logo images available for both. I d/l them and resize them to suit my needs and upload them to my server, calling that URL for the 'img src'



 :thumbs:

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#73145
Avatar

Community saint

That was kind of my plan B. I plan on using the "f" and "t" logos, plus the Google+ logo down the road.

I'll just use yours since it means I get this bit wrapped up.

Only one outstanding functional issue. YEAH!!

Thanks for the help, Fletch.

Bob
Back to the top
 
Posted
Rating:
#73146
Avatar

Community saint

NP. Glad to have been of help.




 :cool:

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
1 guests and 0 members have just viewed this: None
Control functions:

Quick reply   Expand