43
Social Pinboard Version 1.0 Social Pinboard (Version 1.0) FOR JOOMLA (3.0) User Manual Author: Apptha Themes & Extensions Page 1 of 43 www.apptha.com

ayudar Social pinboard

Embed Size (px)

DESCRIPTION

ayudar.co.kr

Citation preview

Page 1: ayudar Social pinboard

Social Pinboard Version 1.0

Social Pinboard (Version 1.0)FOR

JOOMLA (3.0)User Manual

Author: Apptha Themes & Extensions Page 1 of 43 www.apptha.com

Page 2: ayudar Social pinboard

Social Pinboard Version 1.0

INDEX

1. Apptha Social Pin Board -32. Tech Specification -33. General Features

3.1. General Features -33.2. My Account Page -3

3.3. Common Pages -4 3.4. Admin Back End -4

4. Installation Steps -44.1. Steps to follow installation -5

5. How to use Social Pin -236. Creating an Account -26

7. Steps to Add a Pin -29 8.Profile Settings -36 9. Invite Friends -36

10.Followers -3911.Gifts -3912.Contributors -40

Author: Apptha Themes & Extensions Page 2 of 43 www.apptha.com

Page 3: ayudar Social pinboard

Social Pinboard Version 1.0

1. Apptha Social PinBoard:

Create your own PinBoard-like website and start sharing the things you love!! Easy to install and simple to use. Social Pin Board script is used wide nowadays as yet another successful business model with many business entrepreneurs moving into the social media by launching their own social image sharing site. Social PinBoard includes an interface and functionality similar to the Grid layout website available worldwide

2. Tech Specification

Compatible with Joomla Community Edition 3.0

3. Features

3.1. General Features

* Set Up a Social Pinboard website that allows users to create board on any topics, share and manage images/videos on topics* Intuitive design* Responsive Design* Enable users to request invitation, to join the social sharing website* User can create any number of boards on diverse topics* User can add any number of pins (images/videos) to their boards* User can allow friends/networks to repin the pins on their board* Allow users to login with Facebook account.* Allow users to login with Twitter account.* Allow users to login with own login account* Multi Language Support* Script can be easily customized based on your needs.* Multi currency support.* New Pin Notification

3.2. My Account Page

* Allow users to invite friends via Email, Facebook, Gmail and Yahoo* Allow users to find friends* Allow users to edit profile settings* User can manage boards, pins and likes

Author: Apptha Themes & Extensions Page 3 of 43 www.apptha.com

Page 4: ayudar Social pinboard

Social Pinboard Version 1.0

3.3. Common Pages

* Shows all categories pins under "Everything" in home page* Categorize most liked pins/ most re-pinned items as popular* Allows users to view pin in a separate page* Allow users to view other members profile page* Allow users to Tweet / Email their favorite pins* "Pin It" button to start pinning images/videos on board.* "Follow" button to follow other users pin boards and activities.* Quick and easy search option to search by boards, pins and people* Allows users to view the recent activities.

3.4. Admin Back End

* Effective admin management, complete control over all users’ boards* Manage every pins that appear on the user's board* Manage categories* Manage site settings *Manage user account

4. Installation Steps

Once you download the Social Pin Board extension after purchase, Please follow the below steps to install the package.

Step 1: Log on to Joomla Administration page. Step 2: Go to Extensions → Extension Manager → Choose file

Step 3: Select the Social Pinboard Package and click Upload and install

Refer screenshot

Author: Apptha Themes & Extensions Page 4 of 43 www.apptha.com

Page 5: ayudar Social pinboard

Social Pinboard Version 1.0

Kindly repeat step 1, step 2, step 3 and install the template file.

4.1. Steps to follow after Installation (configuration):

Step 1: Log on to Joomla Administration page. Step 2: Go to Extensions → Template Manager. You will be able to find the template “Socialpinboard”. Make Social pinboard as default template in order to activate the

template.

To set the home page as social pinboard, Go to Menus → Main Menu and create a new Menu → and assign Social Pinboard Component (Refer Below Screen shot) and make it as default.

Author: Apptha Themes & Extensions Page 5 of 43 www.apptha.com

Page 6: ayudar Social pinboard

Social Pinboard Version 1.0

Author: Apptha Themes & Extensions Page 6 of 43 www.apptha.com

Page 7: ayudar Social pinboard

Social Pinboard Version 1.0

Pin It Bookmark:

To set the pin It bookmark for the social pinboard, Go to Menus → Menu Manager → Add new Menu. Enter Menu name as “Top”, and Menu Description as “Top Menu” and save it. Now Go to Menus → Top → Create new menu in the name “Pin IT” and select Pin It as the menu type. Then click Save&Close. Refer below screenshot.

Note: After all the changes, Go to the menu Site → Global Configuration → Permission → and kindly Change the status of Site login from Not Allowed to “Allowed”. The purpose of doing this is to activate the Facebook and Twitter sign-in option in the homepage. And go to Extensions → Plugin Manager → Enable “Social Pinboard Login ” and “Social Pinboard Redirect ”

Now, Click Components → Social pinboard → Site Settings. You will see the license key text box with the BUY NOW link. Please paste the license key generated after purchase. Create an app in Facebook, Gmail, Yahoo and Twitter. If you have doubts in creating the app, please click the blue icon near the respective text boxes. It will navigate you to Facebook, Gmail, Yahoo and Twitter APP Page.

Author: Apptha Themes & Extensions Page 7 of 43 www.apptha.com

Page 8: ayudar Social pinboard

Social Pinboard Version 1.0

Steps to create FB APP :

Go to https://developers.facebook.com/apps and click Create New App. Now you will receive a Pop up. Enter your App Name in the pop up and click Continue and fill the security token.

Now fill up the fields marked in the below screenshot with correct details and click Save Changes.

Author: Apptha Themes & Extensions Page 8 of 43 www.apptha.com

Page 9: ayudar Social pinboard

Social Pinboard Version 1.0

Author: Apptha Themes & Extensions Page 9 of 43 www.apptha.com

Page 10: ayudar Social pinboard

Social Pinboard Version 1.0

Steps to create Gmail Client Details :

Go to https://code.google.com/apis/console/?pli=1 and select Create menu from the left menu and enter your Project name in the popup and click Create Project. Refer Screenshot.

Author: Apptha Themes & Extensions Page 10 of 43 www.apptha.com

Page 11: ayudar Social pinboard

Social Pinboard Version 1.0

Make sure that your newly created project is selected in the select box in your left side then Click “API Access” from the left menu and Click “Create an Oauth 2.0 Client ID” Button.

Author: Apptha Themes & Extensions Page 11 of 43 www.apptha.com

Page 12: ayudar Social pinboard

Social Pinboard Version 1.0

Author: Apptha Themes & Extensions Page 12 of 43 www.apptha.com

Page 13: ayudar Social pinboard

Social Pinboard Version 1.0

Author: Apptha Themes & Extensions Page 13 of 43 www.apptha.com

Page 14: ayudar Social pinboard

Social Pinboard Version 1.0

Now click “Edit Settings” and enter “Authorized Redirect URIs” like the below one and click Update.

Eg: http://yourdomainname.com/index.php/component/socialpinboard/invitefriends/gmail

Now copy the Client ID and Client Secret keys and enter in tour site settings page.

Steps to create Twitter Details :

Go to https://dev.twitter.com/ and login with your credentials and refer the screesn shot to proceed further.

Author: Apptha Themes & Extensions Page 14 of 43 www.apptha.com

Page 15: ayudar Social pinboard

Social Pinboard Version 1.0

Click My applications → Create New Applications. Fill up the details and Captcha and click “Create your Twitter Application”.

Now click “Create my Access Token” Button and copy the consumer and consumer Secret key and paste in your site settings page.

Author: Apptha Themes & Extensions Page 15 of 43 www.apptha.com

Page 16: ayudar Social pinboard

Social Pinboard Version 1.0

Steps to create Yahoo Details :

Go to https://developer.apps.yahoo.com/dashboard/createKey.html and fill up the details and click “Create Project”.

After Creating project select “Contacts” and Social Directory from the upcoming page and click “Save and Change Consumer Key”.

Author: Apptha Themes & Extensions Page 16 of 43 www.apptha.com

Page 17: ayudar Social pinboard

Social Pinboard Version 1.0

Now yahoo will provide an option to verify the website.

Author: Apptha Themes & Extensions Page 17 of 43 www.apptha.com

Page 18: ayudar Social pinboard

Social Pinboard Version 1.0

Now Click Verify Domain Button and follow the instruction mentioned in the popup.

After Domian verifycation copy the Consumer, Secret key and Application ID and place in your site setting page. And Place App Domain name like the following

http://www.yourdomainname.com/index.php/component/socialpinboard/invitefriends/yahoo

After entering the Facebook appid, Facebook appsecret, Twitter consumer key and Twitter consumer secret, Gmail Client ID, Gmail Client Secret, Yahoo Consumer and Secret keys, Yahoo Oauth Domain Name and App ID and click Save.

Your Installation and Configuration is Complete!!

Author: Apptha Themes & Extensions Page 18 of 43 www.apptha.com

Page 19: ayudar Social pinboard

Social Pinboard Version 1.0

Go To Components → Social Pinboard → Categories. Here you can add new categories. You can publish, unpublish, edit and delete categories by selecting the appropriate icons. Refer screenshot.

In the same way you can manage your boards, members and pins by selecting the respective tabs. To Manage your boards, select the board and perform the respective operation (Delete, Publish and Unpublish).

Author: Apptha Themes & Extensions Page 19 of 43 www.apptha.com

Page 20: ayudar Social pinboard

Social Pinboard Version 1.0

Author: Apptha Themes & Extensions Page 20 of 43 www.apptha.com

Page 21: ayudar Social pinboard

Social Pinboard Version 1.0

You will now see the 3 more options in site settings page. Approve by admin, Sign up, Show Request Approval

Let’s see one by one:

1. Approve by admin:

This is to reduce the work of the admin. The sign up process is similar to the Social Pinboard. We must give a request to admin or any of your friends should invite you. When a user sends an invite, the admin will approve and will send a mail to you.

If the admin wants to approve by himself: yes option can be selected.If the site wants to approve all the users those who are requesting, the admin can select no option.

2. Create an account

For signup, we have signup with facebook and twitter. For flexibility, we have added another option called signup.

Author: Apptha Themes & Extensions Page 21 of 43 www.apptha.com

Page 22: ayudar Social pinboard

Social Pinboard Version 1.0

If sign up is yes. It will show in the front end and allow users to fill the form. Else it will not be in the front end and will not allow users to register using the register form.

Registration Form:

Note: For Normal Signup also, we must give request approval, if the request a

3. Show request Approval:

If the request approval yes is given, in the front end the request approval will show and will allow the users with request approval process.

Author: Apptha Themes & Extensions Page 22 of 43 www.apptha.com

Page 23: ayudar Social pinboard

Social Pinboard Version 1.0

If the request approval no is given, in the front end the request approval will not show and will allow the users without request approval process.

5. How to use Social Pin

After installing, when you see the site, you will notice the empty home page. To request an

invite, click the Request an Invite button. You will get the page for the Request an Invite.

Author: Apptha Themes & Extensions Page 23 of 43 www.apptha.com

Page 24: ayudar Social pinboard

Social Pinboard Version 1.0

Type your email id and click Request an Invite Button.

Note: 1. You can change the email content that sending from your site using Social Pinboard in path “\templates\socialpinboard\emailtemplate”

• activationmail.html – To change the Activation mail Content that will send after user registration using without social Regsitration.

• comment.html – To change the Commented email Content that will send, once any user commented on any of the user pin.

• Emailshare.html – You can change pin email sharing content in this file.• facebook_register_details.html – After facebook registration, details of the

new user will be sent to their account. Here you can change the content.• Invitefriends.html – To change the Invite friends Content. • likes.html – If any user likes a pin then a mail will be sent to the owner of

the pin. Here you can change that email content.• repin.html - If any user repinned a pin then a mail will be sent to the owner

of the pin. Here you can change that email content.

Author: Apptha Themes & Extensions Page 24 of 43 www.apptha.com

Page 25: ayudar Social pinboard

Social Pinboard Version 1.0

• reportpin.html – If any user reports a pin then a mail will be sent to site administrator.

• reportuser.html – If any user reports about any user then a mail will be sent to site administrator.

• resetpassword.html – When a user reset their password, he/she will receive a mail. In this file you can change the content.

• requestapproval.html – once the site administrator approved the user requset, then a welcome mail will be sent to the corresponding user. You can change the welcome message here.

• requestinvite.html – Once the user requests for registration, the he/she will receive an invitation. Here you can change the email content.

2. To change the logo Go to admin → Extensions → Template Mnager → Edit Social Pinboard and select Options. Here you can change your Logo by uploading new one.

User can sign up with the social pinboard, Facebook , Twitter or Default Registration.

Author: Apptha Themes & Extensions Page 25 of 43 www.apptha.com

Page 26: ayudar Social pinboard

Social Pinboard Version 1.0

6. Creating an Account

when any one of the option is selected to sign up. It will just ask for the 3 steps to complete to reach the home page.

First is to select the categories that you are interested. Click on the categories to select it.

Refer the screenshot:

Author: Apptha Themes & Extensions Page 26 of 43 www.apptha.com

Page 27: ayudar Social pinboard

Social Pinboard Version 1.0

Second is to follow people. These people belongs to the categories that have been selected before.Click follow users to follow their pins

Author: Apptha Themes & Extensions Page 27 of 43 www.apptha.com

Page 28: ayudar Social pinboard

Social Pinboard Version 1.0

Third is to create board. Just click finish to enter into your home page

After login, you will see a home page as shown in the below screenshot.

Author: Apptha Themes & Extensions Page 28 of 43 www.apptha.com

Page 29: ayudar Social pinboard

Social Pinboard Version 1.0

7. Steps to Add a PinIn order to use this, first you need to create a Board. Click Add Button at the top. A pop up box appears with 3 options

1. Create Board.2. Add a Pin 3. Upload a Pin4. Pin It Bookmarklet.

Refer screenshot.

1. Create Board

Click on the option Create a Board. Another popup appears asking the following details

• Board Name : Here you can give you own board name

• Board Category : You can choose under which category this board should be displayed

• Who can Pin? : In this field you can select who can pin your image or videos. (either You or Your friends and Contributors)

• We use Contributors to share boards with multiple followers.

Author: Apptha Themes & Extensions Page 29 of 43 www.apptha.com

Page 30: ayudar Social pinboard

Social Pinboard Version 1.0

Refer below screenshot.

2. Add a Pin

After creating the Board, Click on the Add a Pin button to add Images from other Sites. Paste the URL from where you want to fetch images. There is also option to add videos from youtube and vimeo to your site.Ex : http://www.youtube.com/watch?v=Ujo0ME_pOsM (Youtube)Ex : http://vimeo.com/32397612 (Vimeo)Select the image and click Pin it Button.

Refer below screenshot

Author: Apptha Themes & Extensions Page 30 of 43 www.apptha.com

Page 31: ayudar Social pinboard

Social Pinboard Version 1.0

3. Upload Pin:

If you want to upload an image from you local system, click on “Upload Pin”. You have to browse the image from your local system and upload it. Here too, you should select the “Board” and post description for the image.

Refer below screenshot.

Author: Apptha Themes & Extensions Page 31 of 43 www.apptha.com

Page 32: ayudar Social pinboard

Social Pinboard Version 1.0

Now, view your Pin (Images) in the home page. For each image, there will be 3 options such as Like, Repin, Comment. Your profile image will also be displayed under each Pin. Refer the below screen shot

• Like: You can like any image posted by your friends. This will be displayed in your Like option in the user account dashboard. Check the below screen shot

Author: Apptha Themes & Extensions Page 32 of 43 www.apptha.com

Page 33: ayudar Social pinboard

Social Pinboard Version 1.0

• Repin: If you click on Repin, you will be asked to select the board name of yours. You can select the board name which you have created. The purpose of Repin is to make the image appear in your board also. Refer below screenshot.

The Repined images will be seen on the home page and in your Pins Page.

Author: Apptha Themes & Extensions Page 33 of 43 www.apptha.com

Page 34: ayudar Social pinboard

Social Pinboard Version 1.0

4. Pin It Bookmarklet: You can use pin it book marklet to add pins to your site.

To use the social marklet, just select the menu “Pin IT” (Already Discussed) from the “About Menu”.

Click on the pin it button and drag to the Book marks Tool bar. Open the site that you want to pin images from that site. Now click on the Pin It button and all the images will be sorted. Select the image that you want to pin.

Author: Apptha Themes & Extensions Page 34 of 43 www.apptha.com

Page 35: ayudar Social pinboard

Social Pinboard Version 1.0

A small window will open and asking for the board name and pin description. Pin the image…

After pinning, you can view the pin in the home page. You can also share the newly pinned image via Facebook or Twitter.

Author: Apptha Themes & Extensions Page 35 of 43 www.apptha.com

Page 36: ayudar Social pinboard

Social Pinboard Version 1.0

8. Profile Settings:

You can change your profile details using the Settings menu. Refer below screen shot.

9. Invite Friends :

Invite via Email

You can also invite your friends by clicking on the “Invite Friend” option in which you can see it in the drop down of your profile image. You will be able to invite multiple friends at once. Refer below screen shot.

Author: Apptha Themes & Extensions Page 36 of 43 www.apptha.com

Page 37: ayudar Social pinboard

Social Pinboard Version 1.0

Find Friends

You can send invites to all of your friends by selecting invite friends where you will get your entire friends list. Refer below screenshot. To send invite individually, you can click the respective invite button of your friend. Refer below screenshot.

Author: Apptha Themes & Extensions Page 37 of 43 www.apptha.com

Page 38: ayudar Social pinboard

Social Pinboard Version 1.0

Gmail Invite Friends

User can invite their friends from gmail Contact list by using this method. Please refer screenshot.

Author: Apptha Themes & Extensions Page 38 of 43 www.apptha.com

Page 39: ayudar Social pinboard

Social Pinboard Version 1.0

Yahoo Invite Friends

User can also invite their friends from Yahoo Contact list by using this method. Please refer screenshot.

10. Followers

To see the followers of you, Click on the boards. On the top right corner, you will see the followers and following Link.

To see the whom you are following, click on the following link. To see the who are following you, click on the followers link.

Refer below screen shot:

11.Gifts:

To add the gifts, Just enter the currency symbol followed by number while adding the description. For example: $23 , It will show you the price tag. It will be useful to recommend the product the in the site. Just edit the pin to give the Link.

Refer the screen shot:

Author: Apptha Themes & Extensions Page 39 of 43 www.apptha.com

Page 40: ayudar Social pinboard

Social Pinboard Version 1.0

12.Contributors:

Contributors allows the users to share one board with multiple users. We can add contributors by two ways. One is while creating the Board and another one is while editing the board. To add contributors while creating the board. Click “Add +” and select “Create Board”. Now select “me and contributors” option. It will auto suggest the users, when you enter a letter, where you can add them as the contributors. Same like you can add the contributors by editing the board.

Refer the screenshot:

Author: Apptha Themes & Extensions Page 40 of 43 www.apptha.com

Page 41: ayudar Social pinboard

Social Pinboard Version 1.0

Google Ads:

We can add the google ads to the Social Pinboard by specifying the google ad client (google ad client id is an id generated by google for every ads), google ad slot (ad slot is the slot number for the ads), height, width and the position of the google ad. Refer the screen shot below. We have four positions :

• Pin top• Pin bottom• Home top • Home side

Note : There are two type of ads that you can see in google,which are vertical ads and horizontal ads.You need to specify appropriate height and width for vertical ad and horizontal ad. For vertical ad you can set the position as “ Home Side “ and the remainig one of the three for horizontal ads.

For horizontal Ads : google_ad_client = pub-2151667935419035google_ad_slot = 3982587258google_ad_width = 728google_ad_height = 90

For Vertical Ads : google_ad_client = pub-2151667935419035google_ad_slot = 6633906800google_ad_width = 120google_ad_height = 600

Author: Apptha Themes & Extensions Page 41 of 43 www.apptha.com

Page 42: ayudar Social pinboard

Social Pinboard Version 1.0

Specify the values and set the position of the google ad . Click save. Refer the screen shot:

Author: Apptha Themes & Extensions Page 42 of 43 www.apptha.com

Page 43: ayudar Social pinboard

Social Pinboard Version 1.0

In this screenshot, we have specified the position as “pin top”. So google ads will be displayed at the top of the pin. Refer the screen shot: the google ad is displayed to the top of the pin.

If you want to modify/ customize the Social Pinboard extension, we will do the customization at reasonable price. Just contact Us via [email protected]

Author: Apptha Themes & Extensions Page 43 of 43 www.apptha.com