Using share it stack in foundation web site


(Julia Bowen) #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?

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

Julia


(Robert Ziebol 🖖🏼) #2

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


It should help you out.


(Julia Bowen) #3

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

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

more to follow


(Julia Bowen) #4

the metatags on the share it demo are as follows:


(Julia Bowen) #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.


(Robert Ziebol 🖖🏼) #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

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.


(Julia Bowen) #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:


(Robert Ziebol 🖖🏼) #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.


(Julia Bowen) #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!


(Julia Bowen) #10

aaaarrgghh!

I am sooooooo slow!

have worked it out (I think)

thanks again


(Julia Bowen) #11

Hi Zeebe

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

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


(Robert Ziebol 🖖🏼) #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.


(Julia Bowen) #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.

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 https://www.dropbox.com/sh/srfixpbfo4tbo90/AACxnrNxD6GX5UeUDiR_BwEBa?dl=0

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


(Joe Workman) #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.


(Julia Bowen) #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.

Julia


(Julia Bowen) #16

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


(Joe Workman) #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.


(Julia Bowen) #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