Connect With Us

Regular price $199.99

Connect With Us is a SharePoint add-in that shows content from social networks such as Instagram, Twitter, Facebook, Flickr, YouTube, Linkedin and Picasa.

In the latest update - December 2017

Linkedin

- Show Company page

Pinterest

- Show pictures from Pinterest

Instagram

- Show pictures in a carousel

 

Recent updates:

Facebook DEMO

- Images linked to Instagram

- Linkedin company feed

- Show Facebook page or a group

- No limit on size of the web part

- Limit the number of posts

- Customize with your own stylesheet

- To show a closed Facebook group, you have to add external Admin to a group 

Analytics

Analytics over end-user actions:
- Number of views per hour
- Number of views per user
- Number of clicks per hour
- Number of clicks per user
- Number of clicks for each link (each time end-users clicks on a news title or on a link in Facebook DEMO, Linkedin, Instagram, Flickr, Picasa, YouTube or ConnectWithUs web part)

Data:
Data is saved in your SharePoint.

Features:

- Show Instagram images by tag

- Twitter feed from any user (without widget)

- Adjust size to Facebook page

- Facebook comment for any SharePoint page

As an example of how to connect a SharePoint site, web parts are set to show content from SONJASAPPS. Replacing the SONJASAPPS with your own user will display your content. The content is available to all users without need to sign up.

The only thing you have to do to show your images from Instagram is to replace #sonjasapps tag. Change SONJASAPPS channel id for YouTube with yours, and you will see your videos on the page. 

Data protection

No data from your company is transmitted to servers. The app itself knows only who logged in. It cannot read or write to SharePoint. Data about end-user clicks that is gathered by analytics is also saved within the app.


Enter your Facebook, Twitter, Picasa, Pinterest, and Google+ URL address in the list, or add new connection, or hide the connections you do not want to show. Change just about everything, icon, URL address, popup window...

 

License: ConnectWithUs is 30 days free trial. After 30 days, you can either continue for free with an ad in the bottom or purchase ConnectWithUs Premium. 

License: ConnectWithUs Premium is a payed app. It is a one-time payment. The license is for all users per Office 365 tenant or SharePoint on-premises web application. 

Browser support: ConnectWithUs is tested in all supported browsers, IE11, IE10, IE9, latest version of Chrome and Firefox. It works perfectly in all browsers. 

Installation: Download the ConnectWithUs and add it to your SharePoint site. 

Support: Please send email to dev@sonjasapps.com 

User Guide

Analytics

1. Set up the app parts on SharePoint pages (Facebook DEMO, Instagram, Flickr, Picasa, YouTube or ConnectWithUs web part) 
2. Click on Site Contents and ConnectWithUs 
3. Click on "Analytics" in the top menu of the page that opens 

Here you can see views, clicks, users, and what content users click on 

Instagram

Set web part to show content by a tag or from a user

1. Edit the page on your SharePoint site and add "Connect With Instagram" App Part 
2. Edit the app part 
3. Expand "Instagram" 
4. Select "Tag" or "User in "Show content by" dropdown 
5. Replace sonjasapps with your user or tag in "User or tag name" field 
6. Click on "OK" button and save the page

Set Image size and select display mode for Instagram web part

1. Edit the page on your SharePoint site and add "Connect With Instagram" App Part 
2. Edit the app part 
3. Expand "Instagram" 
4. Select Pictures, Slideshow or Carousel in Display Mode drop-down 
5. Set image size in "Image Height" and "Image Width" 
6. Click on "OK" button 
7. Save the page 

Set up width and height of the Carousel view

1. Edit the web part 
2. Set fixed width and height under Appearance tab. 
3. Write the number in Width field under the Appearance tab, for example, enter 500. Carousel will automatically resize 

Change width of the Instagram app part

1. Edit the page on your SharePoint site and add "Connect With Instagram" App Part 
2. Edit the app part 
3. Write the number in Width field under the Appearance tab, for example, enter 500 in order to show pictures (200 width) in two rows 
4. Click on "OK" and save the page 

Facebook

Set width for the "Connect Facebook DEMO" app part

1. Edit the page on your SharePoint site and add "Connect Facebook DEMO" app part 
2. Edit the app part 
3. To adjust width, select fixed width and write a number into the field 

4. Click and expand "Facebook" tab 
5. Write the URL to your custom stylesheet in the "Custom .css URL" field 
For example, a .css file with this style rule will set all links to be green: 

a, a:link, a:visited {color:green;} 

6. Select "Enable Analytics" if you want to monitor views, clicks and users 
7. Select "Page" or "Group" in the dropdown 
For example, "Page" has a name like "sonjasapps" in the URL, while a "Group" has "/groups/" and numbers as URL 
8.Write "Number of posts" that will be displayed 
9. Write the name of the page or group in the field (write only numbers for the Group) 
10. Click on "OK" button and save the page 

Set up "Connect With Facebook" app part

1. Edit the page on your SharePoint site and add "Connect With Facebook" app part 
2. Edit the app part 
3. Click and expand "Facebook" 
4. Write the name of your page in "Page" field (See the video) 
5. Optional: The width is set to 380 in "Page Width" field. Change it to another number (500 is maximum) 
6. Optional: The height is set to 600 in "Page Height" field. Change it another number 
7. Click on "OK" button and save the page 

Set up "Connect Facebook Comment" app part

1. Edit the page on your SharePoint site and add "Connect Facebook Comment" app part 
2. Edit the app part 
3. Expand "Facebook" 
4. Copy the page URL from the browser and paste to "Page Url" field 
5. Optional: The width is set to 500 in the "Comment Width" field. Change it another number 
6. Optional: "Number of comments" that are displayed is set to 10. Change it to another number 
7. Click on "OK" button and save the page 

Linkedin

Set up "Connect With Linkedin app part"

1. Open Linkedin and browse to the company page 
2. Copy the number from the URL address 

3. Open SharePoint 
4. Edit the page on your SharePoint site and add "Connect With Linkedin" app part 
5. Edit the app part 
5. Expand "Linkedin" tab 
6. Paste the company ID in the "Company ID" field 
7. Click on "OK" button and save the page 

Adjust the size of the feed

1. Edit the page on your SharePoint site and add "Connect With Linkedin" app part 
2. Edit the app part 
3. Expand "Appearance" tab 
4. Set the width to fixed size and write a number such as 500 in the field 
5. Click on "OK" button and save the page 

Pinterest

Set up

1. Edit the page on your SharePoint site and add "Connect With Pinterest" App Part 
2. Edit the app part 
3. Expand "Pinterest" 
4. Enter user name in "User Name" field 
5. Select Pictures or Slideshow in Display Mode drop-down 
6. Define image size in "Image Height" and "Image Width" 
7. Click on "OK" button 
8. Save the page 

Picasa

Set Image size and select display mode for Picasa web part

1. Edit the page on your SharePoint site and add "Connect With Picasa" App Part 
2. Edit the app part 
3. Expand "Picasa" 
4. Select Pictures or Slideshow in Display Mode drop-down 
5. Define image size in "Image Height" and "Image Width" 
6. Click on "OK" button 
7. Save the page 

Configure "Connect With Picasa" App Part

1. Open your Picasa album 
2. Get the User ID from the URL address 

3. Click on "RSS feed" link and get the Album ID from the URL address 
4. Edit the page on your SharePoint site and add "Connect With YouTube" App Part 
5. Edit the app part 
6. Expand "Picasa" 
7. Change the "Album ID" and "User ID" 

8. Click on "OK" 
9. Save the page 

Custom CSS and JavaScript

Add reference to custom CSS and JavaScript files for ConnectWithUs, YouTube, and Instagram app parts


1. Edit the page on your SharePoint site and add "Connect With Instagram" App Part 
2. Edit the app part 
3. Expand "Instagram" (expand "YouTube" or expand "ConnectWithUs") 
4. Write the full URL to your custom CSS file in "Custom .css URL" 
5. Write the full URL to your custom JavaScript file in "Custom .js URL" 
6. Click on "OK" and save the page 

Flickr

Configure "Connect With Flickr" App Part

1. Edit the page on your SharePoint site and add "Connect With Flickr" App Part 
2. Edit the app part 
3. Expand "Flickr" 
4. Change User ID to your User ID (not your screen name) 
5. Click on "OK" and save the page 

Twitter

Configure "Connect With Twitter" app part

1. Edit the page on your SharePoint site and add "Connect With Twitter" App Part 
2. Edit the app part 
3. Expand "Twitter" tab 
4. Change sonjasapps to another user account in "Screen Name" field 
5. Select or deselect to show events, messages, profiles, cover, or timeline 
6. Optional: Write the name of the list you want to show in "List Name" field 
7. Optional: The width of the Twitter feed is set to 500 in "Feed Width" field. Change it to another number 
8. Optional: The height of the Twitter feed is set to 600 in "Feed Height" field. Change it to another number 
9. Click on the "OK" button and save the page 

Configure "Connect With Us" App Part

 

Set up

1. Click on Site Actions -> Site Contents, and click on ConnectWithUs app 
2. Edit the items in Connections list, and replace "sonjasapps" with your URL address 
3. Go back to the site and edit the page 
4. Insert "Connect With Us" App Part 

Title, Height, Width

1. Edit the page on your SharePoint site and add "Connect With Us" App Part 
2. Set App Part's Height and Width 
3. Set App Part's Chrome Type to None, if you want to hide the title 
4. Click on "OK" button and save the page 

Icon Size

1. Edit Page and edit "Connect With Us" App Part 
2. Expand "ConnectWithUs" tab 
3. Use "Icon Size" dropdown to select between Small, Medium, Large, and XLarge 
4. Click on "OK" button and save the page 

Hide connection

1. Click on Site Actions ->Site Contents 
2. Click on ConnectWithUs app 
3. Edit the item in the Connections list 
4. Deselect "Show Link" check box 
5. Save changes 

Change URL address

1. Click on Site Actions ->Site Contents 
2. Click on ConnectWithUs app 
3. Edit the item in the Connections list 
4. Replace "sonjasapps" with your company's URL address in "Connect Link" 
5. Save changes 

Change icon

1. Click on Site Actions ->Site Contents 
2. Click on ConnectWithUs app 
3. Edit the item in the Connections list 
4. Enter the full URL address (start with http://) for new icon image in "Connect Icon URL" 
5. Save changes 

Change Tooltip

1. Click on Site Actions ->Site Contents 
2. Click on ConnectWithUs app 
3. Edit the item in the Connections list 
4. Change "Title" field 
5. Save changes 

Change popup window

1. Click on Site Actions ->Site Contents 
2. Click on ConnectWithUs app 
3. Edit the item in the Connections list 
4. Change "Popup Window" field 
5. Save changes 

Change popup window for Facebook and Twitter

1. Click on Site Actions ->Site Contents 
2. Click on ConnectWithUs app 
3. Edit Facebook or Twitter item in the Connections list 
4. Deselect "Show Link" check box 
5. Save changes 
6. Add new Facebook or Twitter item to Connections list 

Add new connection

1. Click on Site Actions ->Site Contents 
2. Click on ConnectWithUs app 
3. Click on "new item" in Connections list 
4. Fill out the fields 
5. Save changes 

Change back to default Icon, URL address, Title, and Popup Window

1. Click on Site Actions ->Site Contents 
2. Click on ConnectWithUs app 
3. Edit the item in the Connections list 

Here are default values: 

Facebook: 
Title: Facebook 
Connect Link: http://www.facebook.com/sonjasapps 
Connect Icon URL: /Images/facebook.jpg 

Twitter: 
Title: Twitter 
Connect Link: http://twitter.com/sonjasapps 
Connect Icon URL: /Images/twitter.jpg 

Pinterest 
Title: Pinterest 
Connect Link: http://pinterest.com/sonjasapps 
Connect Icon URL: /Images/pinterest-icon.png 

Google+ 
Title: Google+ 
Connect Link: https://plus.google.com/u/0/communities/104627748479467341923 
Connect Icon URL: /Images/google-plus-icon.png