Pinterest Connect

Important!

The Pinterest Connect script is not supposed to run multiple times on a page, though this may not always cause a problem. However, it is recommended by Pinterest to never run it more than once and to run it below all Pinterest API calls.

Disable Pinterest Script

For this reason please make sure that only the last instance of Pinterest Connect on your page has the script enabled. All other instances should have the script disabled (the last customization option).

Image Hover Button

Note also that the Image Hover Button option will only work if the script is running, so if you wish to take advantage of this option on your page you must have it selected in a Pinterest Connect instance where the “Disable Script” option is not selected (by default it is not selected).

Pin It Buttons

Pinterest Pin It Buttons

 

Pinterest provides 4 images each with 2 different sizes.

Pin It Button Options

These buttons can be easily changed and the sizes can be easily selected.

Image Hover Button

Image Hover Buttons

Additional, yet identical, options appear for the Image Hover Buttons in case you would like to use different buttons.

Follow Link

The follow link creates a Pinterest URL option. This URL should be an individual Pinterest URL.

example: https://www.pinterest.com/donvillareal/creative-interiors/

If you wish to change this:

Pinterest Edit Profile

Select the Edit Profile button in the top right of your personal Pinterest Profile Page (if you don’t have one you must create one).

Pinterest Edit Profile URL

In the middle is an option to change your Username, which also controls your personal URL address.

Embed Portfolio

Embedding a portfolio creates a Pinterest URL option. This URL should be an individual Pinterest URL.

To change this please reference the previous steps in the Follow Button tutorial directly above.

Embed Board

Embedding a board creates a Board URL option. This URL should be the same as the URL you find when entering any Pinterest Board.

Example: https://www.pinterest.com/jeremyhawes/1ld/

Embed Individual Pin

Embedding an individual pin creates a Pin URL option. This URL should be the same as the URL you find when entering any individual Pinterest Pin.

Example: https://www.pinterest.com/pin/131871095315437452/

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks/social-connect/">
RSS

Vimeo Connect

 

Linking a video

 

Step 1: Find the video that you want to use and click share.

 

Step 2: Get the video Id for the video.”an example of what a video id looks like is shown below”

 

Step 3: Insert the code into the Video Id section in the VimeoConnect options in stacks.  After that enjoy your video.

 

 

tut

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks/social-connect/">
RSS

Youtube Connect

Linking a video

Step 1: Find the video that you want to use and click share.

Step 2: Copy the link like shown in the image below. The link must not contain the “” or it will not work only what is within the “”.

Step 3: Paste the code into the Video Id section in the YoutubeConnect options in stacks.  After that enjoy your video.

videoID

 

 

Define Terms

Width: The width determines the size that you want it to display on the page. It ranges from 200px all the way up to 6000px.

Full Width: This will allow you force the size to fit whatever it’s containing the stack is or site.

Video Id: The link that is in the embed code for any Youtube video goes into here. This will link the video and allow it to be playable.

Control Display: This will toggle the controls for the Youtube player

Auto Hide: The will hide the controls or video info a second after the start of the video

Youtube Icon: This will hide the Youtube icon if you have have the controls, but if you have the controls off then the icon will appear no matter what

Annotations: This will toggle the annotation that are made by the user of the video

Video Info: The will toggle the info that is displayed on the top of the video

Relative Videos: The will toggle whether relative videos will be show after the video.

Start Time: The time that you want to video start can be determined with the Start time, but it only works on the first initial play. If repeat is clicked it will go to the very start of the video

Auto Play:  The will toggle whether the video will play automatically when the page loads.

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks/social-connect/">
RSS

Icon Connect

General Controls of Icon Connect 

Number of icon to choose from.

select from 1 -4 icons to have displayed.

Icon numbers


Hover effects:

selected from the 7 hover effects.

iconConnect Hover

 


Alignment Setting:

select from Left,middle and right.

icon Connect Alignment

 


Icon setup

Preset icons:

Select from the 25 different icons. The icons are setup in order from 1-4.

Screen Shot 2013-10-04 at 12.05.48 PM

 

Links will be entered in the URL:

enter the link in where it says “Enter Link Here”. Link you social media sites or any other site.

URL

 

Custom Icons:

Select the custom icon setting then select the icon from you computer.

Custom Icon

Changelog

v2.2.1 (April 28, 2014)

  • Added option to open links in new window

v2.2.0

  • gutter control
  • size control
  • newly vectored icons
  • coin flip effect
Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks/social-connect/">
RSS

Facebook Connect

Adding a Moderator (comments)

Step 1:

Install the snippet provided with this stack in the Inspector > Header > Header section. Then close and restart rapidweaver.

Facebook Snippet Head Location

Step 2:

Next, open up your snippets by clicking snippets here:

RapidWeaver 6 Snippets

This will bring up another pop up window that looks like this:

Facebook Connect Snippet

Step 3:

Drag the “facebookConnect – Admin” snippet over into the header as seen in the screenshot in Step 1.

Step 4:

Now we need to replace “FACEBOOK USER ID” with your actual user ID. I’ve built a tool for finding your Facebook User ID here: Facebook ID Tool.

If you are logged into Facebook, it will automatically show you your user id. If not, it will prompt you to login, but if you don’t log in, you can still type in your Facebook username (or someone else’s) to get the user ID. There are also instructions on the actual site.

Step 5:

Now just copy and paste your Facebook User ID into the snippet, and it should look something like this:
<meta property=”fb:admins” content=”1234567890″/>

Comments

Comments remain on whatever page your assign them too and can be removed by moderators. If commenters select the “Show on Facebook page” checkbox and make a comment it will only appear on their personal page and not on your Facebook page.

Theme:

Light or Dark theme available. This changes the background color and text color of your Facebook comments section.

URL:

This should be the URL for the site that the comments stack will be on. So for instance, if there were a facebookConnect comment stack on this page, the URL would be – http://forum.onelittledesigner.com/tutorials/kb/facebook-connect

Sort Posts By:

Chronological and reverse Chronological will display the comments in the order they were submitted and reverse order, respectively. Social will boost comments that have more likes and replies to the top.

Show # of Posts:

This option controls the number of comments that are displayed when the page first loads, then at the bottom there will be a button for viewing more comments.

Max-Width:

Allows you to define a maximum width for this stack. If left empty, it will always scale to 100% of the width of it’s containing element.

Buttons

Like, Send, and Follow Button Check Boxes:

Checking a box will show the button, and leaving a box unchecked will remove that button from the page.

Like/Send URL:

This should be the URL of the page that the stack is on, as this will cause them to like and/or send your actual website.

Follow URL:

This should be the URL of your own personal Facebook profile page. Business pages to not support the “follow” feature, only personal Facebook pages. You must turn on the ability for people to follow you @www.facebook.com/about/follow.

Theme:

Light or Dark theme available. This changes the background color and text color of your Facebook buttons.

Show Faces:

Checking the box will show your friends profile pictures who have liked or followed this page. Leaving it unchecked will only display text with no images for your buttons.

Layout:

Layouts include Standard, Button Count & Box Count. Each have a slightly unique look to them and take up different amounts of spacing.

Button Order:

Side by Side will display the buttons horizontally, Up and Down will display the buttons vertically.

Font:

You can choose which font you would like the text to display in. Default is Tahoma, the font used on Facebook.

Like Verb:

The Like button can either say “Like” or “Recommend”.

Width:

Allows you to define a maximum width for this stack. This does not effect the size of the images, only the length of the text. This is most useful for the Standard Layout, with Side by Side.

Embed Post

Embedding posts allows you to place any public Facebook post on any website page.

Embed Facebook Post

Select the down arrow on the top right side of the post you wish to embed and select the option (if it’s not available then the post has been made private and can only be viewed on Facebook).

Embed Page

To embed a Facebook page simply select the URL of that page and place it in the URL input field.

Show Page Cover is selected by default and shows the cover image of the Facebook page.

Show Faces will show people the visitor knows who also likes/follows that Facebook page.

Show Latest Post will show your most recent post.

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-stacks/social-connect/">
RSS