• How to use Facebook Open Graph Protocol 5 0 5 1
Currently:  

Author Topic: How to use Facebook Open Graph Protocol  (Read 38032 times)

0 Members and 1 Guest are viewing this topic.

Offline jeyjoo

  • Newbie
  • *
  • Posts: 46
  • Jeyjoo Web Design
    • View Profile
    • Sheffield Web Design
How to use Facebook Open Graph Protocol
« on: March 01, 2011, 01:10:38 AM »
Hi,

I use version 1.7.6
My gallery is at www.jeyjoo.com/gallery/index.php
My detail page currently displays a like button count using Facebook OGP. when clicked the user likes the search page.
I would like to change this such that the user can like each individual URL.
To do this I need a way of automatically specifying:

1. The image url
2. The page to like URL (the current page url for each image)

and preferably:

3. title tag (using image title) e.g. <meta property="og:title" content="image of ....."/>
4. description tag using image description e.g.  <meta property="og:description" content="image description.............."/>

Any ideas,

Thanks,
Mike
Jeyjoo - kick ass web design, SEO and online marketing packages.

http://www.jeyjoo.com/gallery/ - free stock images (a 4images gallery)  |
http://www.jeyjoo.com - Sheffield web design  |  http://www.jeyjoo.com - Sheffield SEO  |  http://it.jeyjoo.com - Web Design Milano  |  http://it.jeyjoo.com - SEO Italiano

Offline bernd

  • Full Member
  • ***
  • Posts: 214
    • View Profile
Re: How to use Facebook Open Graph Protocol
« Reply #1 on: March 02, 2011, 08:48:55 PM »
I can't access your site. AFAIK if you use the FBXML (or whatever the facebook freaks call their crap) like button and don't provide any URL it does take the current URL, doesn't it?

This PHP code would give you your current URL though:
$url "http" . ((!empty($_SERVER['HTTPS'])) ? "s" "") . "://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'];

And you can play around with that. I did a dirty hack using this as a basis in the functions.php to provide me with an absolute path to the thumbnail image which I include in the og:image meta tag.

Offline jeyjoo

  • Newbie
  • *
  • Posts: 46
  • Jeyjoo Web Design
    • View Profile
    • Sheffield Web Design
Re: How to use Facebook Open Graph Protocol
« Reply #2 on: March 03, 2011, 06:32:06 PM »
$url "http" . ((!empty($_SERVER['HTTPS'])) ? "s" "") . "://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'];

Thanks. Tjhis is somehting like what I was looking for, though:
- where exactly do I place this code?
- how do I call it in the HTML e.g. is it [URL]?
- how do I create the img thumbnail call?

Much appreciated,
mike
p.s. my gallery is back up after a server issue yesterday!
Jeyjoo - kick ass web design, SEO and online marketing packages.

http://www.jeyjoo.com/gallery/ - free stock images (a 4images gallery)  |
http://www.jeyjoo.com - Sheffield web design  |  http://www.jeyjoo.com - Sheffield SEO  |  http://it.jeyjoo.com - Web Design Milano  |  http://it.jeyjoo.com - SEO Italiano

Offline uploadeur

  • Newbie
  • *
  • Posts: 47
    • View Profile
Re: How to use Facebook Open Graph Protocol
« Reply #3 on: March 23, 2011, 11:38:04 PM »
Same problem... Please someone help us. :)

Offline jeyjoo

  • Newbie
  • *
  • Posts: 46
  • Jeyjoo Web Design
    • View Profile
    • Sheffield Web Design
Re: How to use Facebook Open Graph Protocol
« Reply #4 on: March 24, 2011, 10:42:48 AM »
I hate to delude, but I have not "done it"... everytime a user like's or tweets a page, they are actually liking the same page every time (my search page, which shows latest images posted). Consequently, a user can only click like on my site once.
Anyway, the required code is below:

EDIT HTML TAG TO INCLUDE FOLLOWING:
<html dir="ltr"  xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">


INSERT IN HEADER TAG
<meta property="og:title" content="5-a-day images @ Jeyjoo Gallery"/>
<meta property="og:description" content="Surf and sand... the best beaches in England"/>
<meta property="og:url" content="INSERT URL TO LINK TO"/>
<meta property="og:image" content="INSERT IMAGE TO SHOW ON FACEBOOK"/>
<meta property="og:type" content="company"/>
<meta property="fb:admins" content="INSERT YOUR FB ADMIN ID"/>

INSERT THIS BETWEEN BODY TAGS, WHERE YOU WANT THE LIKE BUTTON TO APPEAR
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like href="INSERT HERE THE URL TO LIKE - THE LIKE COUNT WILL BE APPLIED TO THIS SPECIFIC URL" layout="button_count" show_faces="false" width="40" font="trebuchet ms"></fb:like>

Hope this helps,
Mike
www.jeyjoo.com
Jeyjoo - kick ass web design, SEO and online marketing packages.

http://www.jeyjoo.com/gallery/ - free stock images (a 4images gallery)  |
http://www.jeyjoo.com - Sheffield web design  |  http://www.jeyjoo.com - Sheffield SEO  |  http://it.jeyjoo.com - Web Design Milano  |  http://it.jeyjoo.com - SEO Italiano

Offline uploadeur

  • Newbie
  • *
  • Posts: 47
    • View Profile
Re: How to use Facebook Open Graph Protocol
« Reply #5 on: March 25, 2011, 01:04:15 PM »
<meta property="og:image" content="how can do this images for every single post automatically?"/>

Offline jeyjoo

  • Newbie
  • *
  • Posts: 46
  • Jeyjoo Web Design
    • View Profile
    • Sheffield Web Design
Re: How to use Facebook Open Graph Protocol
« Reply #6 on: March 26, 2011, 03:50:40 PM »
Thats what I would like to know. Leaving it image blank does not work either.
There is a mod here, but it would not work on my version of 4images.
http://www.4homepages.de/forum/index.php?topic=17912.0

Let me know if you have any success with this.
Jeyjoo - kick ass web design, SEO and online marketing packages.

http://www.jeyjoo.com/gallery/ - free stock images (a 4images gallery)  |
http://www.jeyjoo.com - Sheffield web design  |  http://www.jeyjoo.com - Sheffield SEO  |  http://it.jeyjoo.com - Web Design Milano  |  http://it.jeyjoo.com - SEO Italiano

Offline Jakarta

  • Newbie
  • *
  • Posts: 22
    • View Profile
Re: How to use Facebook Open Graph Protocol
« Reply #7 on: March 27, 2011, 02:57:11 PM »
<meta property="og:image" content="http://yourwebsite.com/{media_src}"/>
-------------------------------------
-Making 4images templates upon request!
-Converting HTML templates to work with 4images!
-------------------------------------

Offline jeyjoo

  • Newbie
  • *
  • Posts: 46
  • Jeyjoo Web Design
    • View Profile
    • Sheffield Web Design
Re: How to use Facebook Open Graph Protocol
« Reply #8 on: March 27, 2011, 04:15:49 PM »
Thanks Jakarta, that's awesome. Here is an update of the full code to like an image.
I have also added a generic title, and the image description will be the name you have given to the image being liked.
STILL MISSING - the URL tag needs modifying to automatically pick up the actual link - I am working on this.

EDIT HTML TAG TO INCLUDE FOLLOWING:
<html dir="ltr"  xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">


INSERT IN HEADER TAG
<meta property="og:title" content="Jeyjoo Image Gallery"/>
<meta property="og:description" content="{image_name}"/>
<meta property="og:url" content="LINK TO LINK BACK TO"/>
<meta property="og:image" content="http://www.jeyjoo.com/gallery/{media_src}"/>
<meta property="og:type" content="company"/>
<meta property="fb:admins" content="INSERT YOUR FB ADMIN ID"/>

INSERT THIS BETWEEN BODY TAGS, WHERE YOU WANT THE LIKE BUTTON TO APPEAR
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like href="INSERT HERE THE URL TO LIKE - THE LIKE COUNT WILL BE APPLIED TO THIS SPECIFIC URL" layout="button_count" show_faces="false" width="40" font="trebuchet ms"></fb:like>
« Last Edit: March 27, 2011, 05:41:46 PM by jeyjoo »
Jeyjoo - kick ass web design, SEO and online marketing packages.

http://www.jeyjoo.com/gallery/ - free stock images (a 4images gallery)  |
http://www.jeyjoo.com - Sheffield web design  |  http://www.jeyjoo.com - Sheffield SEO  |  http://it.jeyjoo.com - Web Design Milano  |  http://it.jeyjoo.com - SEO Italiano

Offline uploadeur

  • Newbie
  • *
  • Posts: 47
    • View Profile
Re: How to use Facebook Open Graph Protocol
« Reply #9 on: March 27, 2011, 05:59:17 PM »
<meta property="og:image" content="http://yourwebsite.com/{media_src}"/>

Doesnt work for me :(

Offline budduke

  • Hero Member
  • *****
  • Posts: 506
    • View Profile
    • http://www.budduke.com
Re: How to use Facebook Open Graph Protocol
« Reply #10 on: March 28, 2011, 12:11:46 AM »
I have just posted what I think should work...
Waiting for it to be moved to the mods section before posting the link.

I could not get the above to work on my system either so I went about it a little differently.
@jeyjoo,
I hope you do not mind that I did this...
Buddy Duke
www.budduke.com

Offline jeyjoo

  • Newbie
  • *
  • Posts: 46
  • Jeyjoo Web Design
    • View Profile
    • Sheffield Web Design
Re: How to use Facebook Open Graph Protocol
« Reply #11 on: March 28, 2011, 12:12:10 AM »
Check1 - you need your insert your website name, in my case www.jeyjoo.com
Check 2 - you probably need the extension for your gallery - mine is simple called "gallery", so I add www.jeyjoo.com/gallery

In my case, the whole line of code reads <meta property="og:image" content="http://www.jeyjoo.com/gallery/{media_src}"/>
Jeyjoo - kick ass web design, SEO and online marketing packages.

http://www.jeyjoo.com/gallery/ - free stock images (a 4images gallery)  |
http://www.jeyjoo.com - Sheffield web design  |  http://www.jeyjoo.com - Sheffield SEO  |  http://it.jeyjoo.com - Web Design Milano  |  http://it.jeyjoo.com - SEO Italiano

Offline Jakarta

  • Newbie
  • *
  • Posts: 22
    • View Profile
Re: How to use Facebook Open Graph Protocol
« Reply #12 on: March 28, 2011, 02:14:23 PM »
for current page url this should work, add this in the top of header
<?php
function curPageURL() {
 
$pageURL 'http';
 if (
$_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
 
$pageURL .= "://";
 if (
$_SERVER["SERVER_PORT"] != "80") {
  
$pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
 } else {
  
$pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
 }
 return 
$pageURL;
}
?>


and

Code: [Select]
<meta property="og:url" content="<?php echo curPageURL(); ?>" />
-------------------------------------
-Making 4images templates upon request!
-Converting HTML templates to work with 4images!
-------------------------------------

Offline didoman

  • Newbie
  • *
  • Posts: 32
    • View Profile
Re: How to use Facebook Open Graph Protocol
« Reply #13 on: May 02, 2011, 03:02:49 PM »
I found an easier way. Modify your details.php file and add the tag "full_url" see below instuctions.
Now you can use the {full_url} insert tag for your header meta stuff.


search in your details.php:

if ($image_allow_comments == 1) {
  
$site_template->register_vars(array(

and replace:

if ($image_allow_comments == 1) {
  
$site_template->register_vars(array(
      
"full_url" => $script_url."/details.php?".URL_IMAGE_ID."=".$image_id,


Offline bergblume

  • Sr. Member
  • ****
  • Posts: 463
  • on to the top!
    • View Profile
Re: How to use Facebook Open Graph Protocol
« Reply #14 on: January 17, 2012, 03:48:07 PM »
wow !! that helped me a lot... in my case it works with...

Code: [Select]
<link rel="image_src" href="{media_src}" />