Using share it stack in foundation web site

Classic General
1

I am a beginner at web design but have put together a small web site for a book. I am having problems with the facebook link as I don’t know how to use it to get any useful information in the pop up window… I have no idea where it is getting the picture from (this is a picture on my site, but nothing special), nor do I know where the “Home” comes from - the page name is not Home. Although the URL is correct, I don’t know how to put any info into the bit empty white box. can you help?

Pasted image866×566 171 KB

I have looked in the demo site that came with the add-on but am still in the dark.

Julia

2

Hey Julia, if you visit our Docs Page for Share It, you would find this Docs Page


It should help you out.

3

tried this already. sorry, should have said so. am using rapidweaver 6 and stacks 3. have the following meta tags set

Pasted image693×439 32.9 KB

and also not sure how to get the text in after the title

more to follow

4

the metatags on the share it demo are as follows:

Pasted image693×389 27.8 KB

5

and this produces the following
and this produces the following

so confused

still don’t know where the image is coming from, don’t know where the title or description is coming from.

6

OK, so we figured this out, and guess what, you are VERY lucky you are using the Foundation theme. The FAQ I pointed you to is a little old and it actually works for Twitter, G+ and LinkedIn (only ones I tried), the only one it does not work with is Facebook. This is actually a RapidWeaver/Facebook issue. Facebook changed the way it looks for the meta tags, instead of the Meta Name attribute, which is what RapidWeaver uses, they want the Meta Property. Here is an example of what Facebook is looking for:

<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />

Now, if you were not using Foundation, you could add these properties to the Header area in RapidWeaver

Screen Shot 2015-09-10 at 11.17.37 PM.png332×751 62.7 KB

Once you publish like this, it will start working in all, Facebook, Twitter, LinkedIn and Google+.

Now, since you are using Foundation, and hopefully Stacks 3 with the latest version of Foundation stacks (version 1.5.14), you have a stack that will put these tags out there very easily for you and also help you greatly with SEO, and that is the SEO Helper stack (for those users who do NOT have Foundation, look for a new group of stacks that will include an SEO Helper type stack in it coming soon).

I suggest you add that to your site and add all of the tags you can, it will not only help with Share It, but will improve your SEO!

Hope this helps, sorry it took so long.

7

thanks Zeebe. I only bought the starter pack for Foundation, being an impoverished author and the AUD is plummeting against the USD. Oh well, I will code it as suggested in the rapidweaver header area for now, unless you want to buy my book…

:grin:

8

Actually, the SEO Helper stack should be with the Starter Pack, so you should have it. Do you have Stacks 2 or Stacks 3 though, that matters. You would need Stacks 3 to get the SEO Helper stack as it is only with the 1.5.x stacks which are Stacks 3 only.

9

ok…perhaps I should have looked first.

actually I have no idea how to use these stacks (the ones with magnifying glass). where do you drag them to?

thanks again for bearing with me.

web site looking awesome - thanks for your great stacks!

10

aaaarrgghh!

I am sooooooo slow!

have worked it out (I think)

thanks again

11

Hi Zeebe

still struggling with this. I have put in the following stuff into the seo helper

Pasted image1128×243 41 KB

if you go onto the site and click the facebook button, you can see it is still not working. what can I do now?

www.persephonestone.com

12

Hey @juliabowen, try putting it in the header area in RapidWeaver and let me know if it works that way. I will do some testing here as well.

13

ok. have put a fb button on the who am I page with the following in the headers. I left the first page alone so you can see both.

Pasted image1017×897 227 KB

I still get the same result - you can try it on my site.

to help you if you still don’t know why, you can access a copy of the Rapidweaver 6 file for the site on my dropbox Dropbox - Error - Simplify your life

thanks for the help. off to bed now - just noticed the time in Sydney.
J

14

If you look at the Facebook debug tool, its throwing an error because you have multiple of the same tags defined. https://developers.facebook.com/tools/debug/og/object/

I assume that you still have the meta tags defined somewhere else outside of SEO Helper.

15

Hi

have now progressed and the facebook link is now working (using header area as SEO helper never worked properly). unfortunately I can’t get the twitter share it button to work, either using the button in the SEO helper, or by using manual meta-tags (in the header area).

I have put the following info in the header area: - the first bit is the FB (left in for completeness) and the second the twitter.

the twitter card validator comes up fine but the link does not work on my page. any hints? I have expanded the tweet page so you can see the full URL generated by the link on my page.

Pasted image843×1071 538 KB

Julia

16

dont know why meta tags didn’t show. here they are as an image

17

These meta tags do not actually place any share buttons on your site. They simply inform twitter about additional information about your site when someone does share it on Twitter.com.

18

I realise that - I meant in my response above - I pasted them in as text and they disappeared. I have a twitter share it button on the site and the meta tags shown above in the header area.

I am still at a loss as to how to proceed. you can see the site at www.persephonestone.com - press the twitter button and you can see what happens.

Julia