Ventrian Product Forums

We've moved our Product Forums!
To better assist our customers, we've moved to an integrated knowledge base and ticketing system. You can access the new forums at http://support.ventrian.com.
Forums > Modules > News Articles
Subject: Add facebook like button to articles
Prev Next
You are not authorized to post a reply.

Page 2 of 3 << < 123 > >>
Author Messages
ron dyarUser is Offline
Gold Membership
Ventrian Wiz
Ventrian Wiz
Posts:171
6/09/2011 11:37 AM  

My notes on this with the new view.pageheader.html tag in 7.85:

First problem, is that FB wants your opening html tag to have some extra crap in it:

html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml"

To do that I used some code posted in the DNN forum - see this post:

http://www.dotnetnuke.com/Resources/Forums/forumid/108/postid/399761/scope/posts.aspx

I added the VB code to the top of my skin file and it works great.

Next, i added in the og: tags that are specified on:

http://developers.facebook.com/docs/opengraph/

I added those to the view.pageheaders.html template. Here is what they looked like for

me: meta property="og:image" content="http://ephotopros.com/Portals/0/fb-e.png"

meta property="fb:app_id" content="215131801851977"

meta property="og:site_name" content="ePhotoPros.com"

meta property="og:title" content="[TITLE]"

meta property="og:type" content="article"

meta property="og:url" content="[ARTICLELINK]"

meta property="og:description" content="[SUMMARY:150]"

I have left off the opening and closing tags as the forum no likey. URL has to be the url of the page you are on - not the root of the site. When users click the recommend button, they are sharing this url, not liking my sites page on FB.

Then I added the xfbml like button code you can get from here:

http://developers.facebook.com/docs/reference/plugins/like/

I turned off show faces and changed like to recommend. I added this to the view.item template with ARTICLELINK as the href.

Then check your work using the FB Linter at:

http://developers.facebook.com/tools/lint

I get mixed results on the linter - any new url i stick in works, but older ones seem to not get updates.

I also added in the FB comments - which was pretty easy - just stuck that in the view.item template also.

Check it out here - one of our videos:(and leave a comment or like it!)

http://ephotopros.com/training/video-archive/id/308/photoshop-screenshot-help-videos-thing.aspx

PS the google plus 1 requires a line of script - that is added to the pageheader.html file as well. Twitter stuff is just in the view.item template.

Oh yeah - my site was fully valid for xhtml transitional - now with the facebook stuff it is not. For the FB og: tags that are required to be in the header to validate, the site must be xhtml 1.1 strict. I tried that and there were a whole bunch of new problems, so I am keeping it as transitional for now. No idea what it even matters as most sites do not validate anyways. If google doesn't, I feel like I should be ok too.
Scott McCullochUser is Offline
Administrators
Ventrian Master
Ventrian Master
Posts:21233
6/09/2011 2:15 PM  
That's really poor about it requires attributes on the html tag.

Is it only on the view article page you would want it on? I guess I can add an option that would include it in.

The page header template was designed to allow you to put anything in the head section and still use tokens like [ARTICLELINK]
Scott McCulloch
Site Administrator
ron dyarUser is Offline
Gold Membership
Ventrian Wiz
Ventrian Wiz
Posts:171
6/09/2011 3:05 PM  
I don't need it because I added it in via code to the skin file - which was easy, but not exactly something everyone will understand how to do.

What you did was perfect. I suppose if there was a way for you to add the extra attribute on the html tag that would sure make it easier for others, but seems like it could also open up a can of worms.
R1ckJon3zUser is Offline
Registered Users
Ventrian Super Newbie
Ventrian Super Newbie
Posts:12
6/22/2011 9:58 AM  

I wasn't able to insert the code in the skin that I am using, but I was able to create a simple module and inserted the code:

Dim defaultPage As CDefault = TryCast(Me.Page, CDefault)
    defaultPage.HtmlAttributes.Add("xmlns:og", "http://opengraphprotocol.org/schema/")
    defaultPage.HtmlAttributes.Add("xmlns:fb", http://www.facebook.com/2008/fbml)
 

into the load event and it works just as described.  Now on to the next part!  I will post a link to my finished product when I'm done.  Hopefully it turns out as nice as ron's implementation..

-Ricky
R1ckJon3zUser is Offline
Registered Users
Ventrian Super Newbie
Ventrian Super Newbie
Posts:12
6/22/2011 2:59 PM  

Got it working :)  I didn't use the FB comments code, but the recommend seems to be working nicely.  Thanks ron!

Here is a link to my implementation:

http://www.pokersharkz.net/Blog/articleType/ArticleView/articleId/22590/New-Twitter-Integration.aspx

-Ricky

 
ron dyarUser is Offline
Gold Membership
Ventrian Wiz
Ventrian Wiz
Posts:171
6/22/2011 3:55 PM  
Nice!

I checked your markup for validation (validator.w3.org), and it shows that you have multiple Head sections - the page above has 3 that I see when I do view source - and the home page has 2. While i am not worried about valid/not valid, I think having multiple Head sections is a really bad thing.

I originally played with that skin as I like the look of it, but the css and html are totally retarded. I'd be careful with it. I would think your multiple head sections are caused by the module you built, but your home page has problems too.
Alabama Technology NetworkUser is Offline
Registered Users
Ventrian Super Newbie
Ventrian Super Newbie
Posts:12
7/08/2011 7:59 AM  
So are we saying that in-order to get Facebook to properly use the Open Graph tags we have to hack up the skin file. Because just using the View.Pageheader.Html and placing the Meta Properties that Facebook requires doesn't work.
ron dyarUser is Offline
Gold Membership
Ventrian Wiz
Ventrian Wiz
Posts:171
7/08/2011 9:27 AM  
That is my understanding - without the html attributes the linter won't validate it properly. It was easy enough to do to my skin, just had to add the one line to it that the post on the DNN forum said to do.

But just because it doesn't lint does not necessarily mean that it won't work. But I don't know. I think mine was working before I added the attributes, but the image and other things could not be controlled.

Also, I think the og tags are needed only if you are doing the xfbml version - i think you can use the iframe one with out it? the whole thing is a little vague.
ron dyarUser is Offline
Gold Membership
Ventrian Wiz
Ventrian Wiz
Posts:171
7/08/2011 9:33 AM  
"When your Web page represents a real-world entity, things like movies, sports teams, celebrities, and restaurants, use the Open Graph protocol to specify information about the entity. If you include Open Graph tags on your Web page, your page becomes equivalent to a Facebook page."

from http://developers.facebook.com/docs/reference/plugins/like/

I take this to mean that the og tags are optional and not required. Without the og tags, the like button basically just shares the url on the users wall. With it, you can do a lot more - but I doubt most people need that. The one good thing is the og tags give you control over the image and description stuff that gets shared. I like that.
Alabama Technology NetworkUser is Offline
Registered Users
Ventrian Super Newbie
Ventrian Super Newbie
Posts:12
7/08/2011 9:37 AM  
Well I didn't see a iframe version for the Open Graph, just for the "Like" button integration. I agree there documentation is very vague. Kinda stupid to pull from the Meta tag area when your dealing with dynamic content, and if you dont use it it very random on what picture it selects.
ron dyarUser is Offline
Gold Membership
Ventrian Wiz
Ventrian Wiz
Posts:171
7/08/2011 10:35 AM  
I meant the iframe version of the like button, not the og tags just to be clear.
Dale RossUser is Offline
Gold Membership
Ventrian Addict
Ventrian Addict
Posts:93
1/12/2012 12:09 AM  

The Facebook widget fronm DNN Widgets works great! I just implemented it. Pretty easy to add to every article, even played around and added it to every forum post in Active Forums.

Now trying to decide if I want to add the comment widget...

Scott if you see this, have you thought about usign activeforums as the comment point for articles? I'd like that a lot...
Scott McCullochUser is Offline
Administrators
Ventrian Master
Ventrian Master
Posts:21233
1/12/2012 3:28 AM  
There are that many comment system now (e.g. facebook), I generally leave it to the templates for implementation. Does active forums have a method of integration based upon url?
Scott McCulloch
Site Administrator
Dale RossUser is Offline
Gold Membership
Ventrian Addict
Ventrian Addict
Posts:93
1/12/2012 6:43 AM  
I don't know if AF does. But I'll try to find out. Since AF will see be the core forum for DNN maybe if it currently doesn't that kind of stuff will be added...

In general, what do you think about something like facebook comments for articles?
Scott McCullochUser is Offline
Administrators
Ventrian Master
Ventrian Master
Posts:21233
1/12/2012 6:45 AM  
I think facebook comments are great for preventing against spam and moving more into social networks.

I also think that commenting systems like akismet are great too.

It's definitely the way of the future.
Scott McCulloch
Site Administrator
Antony GilbertUser is Offline
Gold Membership
Ventrian Wiz
Ventrian Wiz
Posts:101
1/12/2012 7:43 AM  

Hey Scott,

Check what I did with New Article... about social media sharing:
Sorry it's in french but you'll see the result.

http://www.bd2web.com/Blogue/tabid/87/-/87/Votre-site-web-en-premiere-page-de-Google-ou-argent-remis.aspx

 
Dale RossUser is Offline
Gold Membership
Ventrian Addict
Ventrian Addict
Posts:93
1/12/2012 9:02 AM  
Nice Anthony!
Scott McCullochUser is Offline
Administrators
Ventrian Master
Ventrian Master
Posts:21233
1/13/2012 5:43 AM  
Nice!
Scott McCulloch
Site Administrator
Lance LongUser is Offline
Gold Membership
Ventrian Master
Ventrian Master
Posts:225
2/20/2012 7:07 PM  

How are people coding up the og:image tag?

I want to use something like:

[HASIMAGE]< meta property="og:image" content="[Portal:PortalAlias][IMAGELINK]"/ >[/HASIMAGE]

but the DNN token isn't getting replaced and I don't see an equivalent in the token list.  I'd prefer to not hard code it.
Leo KUser is Offline
Gold Membership
Ventrian Super Newbie
Ventrian Super Newbie
Posts:11
7/26/2012 5:43 AM  
Posted By Antony Gilbert on 1/12/2012 7:43 AM

Hey Scott,

Check what I did with New Article... about social media sharing:
Sorry it's in french but you'll see the result.

http://www.bd2web.com/Blogue/tabid/87/-/87/Votre-site-web-en-premiere-page-de-Google-ou-argent-remis.aspx

 


Hi Antony,

Could you please share the code you used to produce this result?
Thanks in advance!

 Leo
You are not authorized to post a reply.
Page 2 of 3 << < 123 > >>
Forums > Modules > News Articles > Add facebook like button to articles


ActiveForums 3.7
We've moved our Product Forums!
To better assist our customers, we've moved to an integrated knowledge base and ticketing system. You can access the new forums at http://support.ventrian.com.