JenSocial: Social Web Directory and Ning Tips

Social Web Directory :: Social Network Directory :: Ning Tips and Ning Support

NING TIPS: Add more share links below the status box in main page

NING said they will integrate the super-useful but rarely-used Quick Add drop-down into the Activity Feed, so members can add content like photos or blog posts directly from the Main Page. But before that, you still can have these Quick Add links and make them useful.

Base on this discussion and thanks Mike for the idea and the code. I recreate it. Should be more light and performance. But you need to do more steps.

Add more share links below the status box in main page. Looks like this:

1. Edit any text box in the main page. Add the HTML code into the text box for the links:

Right click to download the HTML code here: activity_share_links.html

You can modify it. Remember to paste it in the HTML Editor view. If you don't know which text box should be used. I suggest you pick one that only displayed in main page. The links won't display at the first time, it doesn't matter which text box you used. Because it only for main page. So pick one text box that only displayed in main page is better.

2. Go to the Custom Code, add this line for YUI 3 if you don't have yet:

3. Copy the url link of this Javascript file: ningActivityFeedShareLinks.js

4. Go to the Custom Code, add this line for the Javascript file you just copied.

Save and you get it!!

Here is the content of the Javascript file:

This tips is tested with both Design Studio and old themes.

2 members favorited this

Replies to This Discussion

Permalink Reply by JenSocial on June 25, 2011 at 9:49pm

Alex!

I'd love to see a screen shot of the status box after the code. You are quickly becoming my favorite Ning Tipster!

Thanks so much for sharing. You are too cool!

Best Regards,

Jen

Permalink Reply by Tips by Alex/JenSocial on June 27, 2011 at 10:19pm

The screen shot of the status box after the code is just the image in this post. Check the line bellow the status box with "Share:" and pink links. And I'm flattered. :)

Permalink Reply by Global on June 29, 2011 at 9:51am

One question: What's a Bolg?

Permalink Reply by JenSocial on June 29, 2011 at 12:31pm

I would call it a typo. ;-) Alex is Chinese and amazing how well he writes English, just amazing. I'm so jealous. Wish I could write and understand Chinese. But wow, so many dialects and different languages, wonder which you would learn?

Permalink Reply by Tips by Alex/JenSocial on June 29, 2011 at 8:15pm

Whoops, sorry. I've corrected it both in images and HTML file. Thanks a lot Jen and Global too.

Permalink Reply by JenSocial on June 29, 2011 at 11:11pm

;-)

Permalink Reply by The Dusk Spot on June 30, 2011 at 7:38pm

One of the things I want to try to make it do is act like the QUICK ADD which lets you do all of those from the front page. Whenever we click the buttons now it goes to another page.

Permalink Reply by The Dusk Spot on July 1, 2011 at 12:57pm

Now I replaced the original with this:

<div class="activity-share-links" style="text-align: right; display: none;">Share: <a href="/main/quickadd/photo">Photos</a> <a href="/main/quickadd/video">Video</a> <a href="/main/quickadd/post">Blog</a> <a href="/main/quickadd/discussion">Discussion</a> <a href="/main/quickadd/event">Event</a> <a href="/main/quickadd/invitation/new">Invite</a></div>

It takes me to a blank white screen whenever I click them. But I know with those links its in the right direction

Permalink Reply by Haitians United for Haiti on July 3, 2011 at 3:15pm

Alex,

I would like to add this tip; however when I click on the HTML file nothing is there (activity_share_links.html)!

Thank you

Permalink Reply by Tips by Alex/JenSocial on July 3, 2011 at 3:40pm

Because it's default to display:none. You should save the file and open it in text editor, not browser.

Permalink Reply by JenSocial on July 3, 2011 at 3:57pm

That is a little confusing for most, Alex. Here's the raw code. But like Alex mentioned, be sure to edit in Text Editor or HTML Editor. Don't edit in Microsoft Word.

Best,

Jen

<div class="activity-share-links" style="text-align:right;display:none;">
    Share: <a href="/photo/photo/newWithUploader">Photo</a>
    <a href="/video/video/newWithUploader">Video</a>
    <a href="/profiles/blog/new">Blog</a>
    <a href="/forum/topic/new">Discussion</a>
    <a href="/events/event/new">Event</a>
    <a href="/main/invitation/new">Invite</a>
</div>

Permalink Reply by Tips by Alex/JenSocial on July 3, 2011 at 4:45pm

Thanks Jen. All the time we do for Front-end pages, is to hide something here then display there.

RSS

Welcome to
JenSocial: Social Web Directory and Ning Tips

Sign In