[Beta] Dynamic Facebook and Twitter Meta Tags

[jcocking]

Modification Name: Dynamic Facebook and Twitter Meta Tags
Author: jcocking

This Mod is being converted to 3.1.x. The code base is viewtopic.php?f=456&t=2341191.

Modification Description:: Installation of Facebook Open Graph and Twitter Cards. This mod will:

• Install Facebook Open Graph Meta Tags.
• Install Twitter Cards Meta Tags.
• Use first posting content of a topic to populate the og:description and twitter:description meta tag. It will use the board description for all secondary pages.
• Use the first image posted, if present, to populate the og:image and twitter:image meta tag. It will use a default image if no image is present.
• Option to select the last image of the topic versus the first by a true/false parameter in code.
• Support video bbcode for creation of video facebook opengraph.
• Will work on all pages within the forums.

Modification Version:: 0.3.0

Requirements: This mod requires the Canonical URL modification. (if you have another canonical mod, it will also work, like php-SEO.)

Features:

• Use real content from the first topic posting to populate the description field. Makes each Facebook and Twitter post custom.
• Uses the first photo from the posting, to populate the Facebook. This enables your Facebook page to have unique photos for each topic.

Demo URL: This modification has been implemented on this forum. http://www.lotuselan.net/forums
Example page: http://www.lotuselan.net/forums/lotus-e ... 23626.html

Modification Download: https://github.com/LotusJeff/phpbb-face ... itter-tags

Comments: If you install this modification, please indicate by replying to this post. We want to have several installs before submitting the modifications to the database.

This modification will end with the following items populated within your header:

Code: Select all

<meta property="og:locale" content="" />
<meta property="og:locale:alternate" content="" />
<meta property="og:type" content="" />
<meta property="og:title" content="" />
<meta property="og:url" content="" />
<meta property="og:site_name" content="" />
<meta property="og:description" content=""/>
<meta property="og:image" content="" />
<meta property="og:video" content="" />
<meta name="twitter:card" content="" />
<meta name="twitter:url" content="" />
<meta name="twitter:title" content="" />
<meta name="twitter:description" content=""/>
<meta name="twitter:image" content="" />

[Theriddler1]

Tested and works great

Only for twitter the description is sometimes too long.
I changed if the description had been shorten to place 3 dots after

eg

Code: Select all

// Shorten description if it's longer than 150 characters
    if( ( utf8_strlen( $sMetaDescription )> 150 )&& ( $iSpace= utf8_strpos( $sMetaDescription, ' ', 150 ) )!== FALSE ) $sMetaDescription= substr( $sMetaDescription, 0, $iSpace ) . '...';

It seems that only attachments works for the sharing images, can this be extended like for normal photos from external url's eg. photobucket, imageshack ect... that have been posted within the img tag.

Object Debugger from facebook shows Responscode 200 so everything is oke

[Ozo]

$sMetaDescription, ' ', 150 ) You only need to change 150 to a lower number for less of a description.


I think most will want also img from posts for the tags +1

[jcocking]

Let me look into the image bbcode.

I forgot twitter is 140 characters, let me make that change.

jeff

[Theriddler1]

Let me look into the image bbcode.

+1 that would be great

[forforce]

Thank you for this great mod. You only forgot to comment: <!-- Dynamic Facebook Mod - http://www.cocking.com/dynamic-facebook ... tags-phpbb --> from "overall_header.html". Is there possible to make it so people can choose from 2,3 or 4 photos from a topic to appear on facebook post ? And not only the 1st picture ?

[jcocking]

Version 0.2.0 has been placed on the website.

Changes:

• Support for [img] BBCode
• Fixed Twitter Length to 140 characters (Theriddler1)
• Fixed the comment indicators for overall_header.html (forforce)

The sequence for images are:

1. Any attached images
2. Any [img] bbcode
3. Default images

[jcocking]

Is there possible to make it so people can choose from 2,3 or 4 photos from a topic to appear on facebook post ? And not only the 1st picture ?

I will look, but my initial review is probably not.

jeff

[Theriddler1]

tested Version 0.2.0

Works great the img tags are also being taken from first post without any problems,
the only thing i found out is that it not directly takes the description and or image from the first post
you have to click on the like button first and then unlike it ,then refresh the page and like again before it shows. Maybe i'm not using the right button codes or maybe it's because facebook bot has not crawled the page yet.

i use this within viewtopic_body.html

Code: Select all

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
	<li id="twitter-icons"><a href="https://twitter.com/share" class="twitter-share-button" data-url="{U_CANONICAL}" data-text="{S_META_DESCRIPTION}" data-lang="nl"></a></li><li id="facebook-like"><div class="fb-like" data-send="false" data-layout="button_count" data-width="90" data-show-faces="false" data-action="like"></div></li>

also if say were on page 2 and further on a topic it shares the description and or image from the first post on that pages not the one from the very first post of the topic.

now for twittercard to be working people need to get approval from twitter to use them
eg:

1. Click this https://dev.twitter.com/docs/cards/validation/validator link
2. sign in
3. select your card:e.g. summary card
You can see two tabs , try card and validate &apply
4. Select Validate and apply Card Validator

one suggestion though

change:

Code: Select all

<meta property="og:locale" content="en_US" />

with:

Code: Select all

<meta property="og:locale" content="{S_USER_LANG}" />

[jcocking]

tested Version 0.2.0

Works great the img tags are also being taken from first post without any problems,
the only thing i found out is that it not directly takes the description and or image from the first post
you have to click on the like button first and then unlike it ,then refresh the page and like again before it shows. Maybe i'm not using the right button codes or maybe it's because facebook bot has not crawled the page yet.

Yes, Facebook will come and scrape the page every 24 hours or so. The Like=>Unlike=>Like forces Facebook to reindex your page. Once you have the tags correct, the pages will be index with the new data over the next couple of weeks.

also if say were on page 2 and further on a topic it shares the description and or image from the first post on that pages not the one from the very first post of the topic.

Correct. The modification gets the first post and the first image from the topic to create the meta tags. It was not setup to create a like button for each posting, but for the topic in general.

I use a rss feed to my Facebook page. When ever I have a topic created, it is posted to Facebook within 30 minutes.

one suggestion though
change:

Code: Select all

<meta property="og:locale" content="en_US" />

with:

Code: Select all

<meta property="og:locale" content="{S_USER_LANG}" />

I will add this to the next release.

Thank you for your feedback.

jeff

[forforce]

Is it possible to crawl the last image from topic and post it on facebook instead of 1st one ? Thank you.

[jcocking]

Is it possible to crawl the last image from topic and post it on facebook instead of 1st one ? Thank you.

Can you help me understand why you would like this addition?

thank you.

jeff

[forforce]

My forum is a website for tutorials so on each tutorial (topic) , the last image is the image with the final step or product witch is more important. The 1st picture is not so important because it`s the picture from the beginning of the tutorial .

[Theriddler1]

My forum is a website for tutorials so on each tutorial (topic) , the last image is the image with the final step or product witch is more important. The 1st picture is not so important because it`s the picture from the beginning of the tutorial .

a better way to keep your suggestion is to have some acp control for this mod
with options like first post (yes/no) or last post (yes/no) or all posts (yes/no) within a topic.
maybe also add the twitter and like buttons in the posts to allow first,last or every post for sharing this way you can decide wich post you want to share and grab image and text from.
maybe with group permissions witch group can share.
much more like a combination with the share on mod and this mod.

But then again this is just an idea.

[Ozo]

Thanks for the update